Vue.js-webpack related configuration

Vue.js-webpack related configuration

note:

Sometimes it ca npm i node-sass -Dn’t be installed. At this time, you must usecnpm i node-sass -D

Use the render function to render components in normal pages

Configure the parsing of the .vue component page in webpack

1. Run cnpm i vue -Sto install vue as a run dependency;

2. Run to cnpm i vue-loader vue-template-compiler -Dinstall the parsing and converting vue package as a development dependency;

3. Run cnpm i style-loader css-loader -Dthe package that will parse and convert CSS and install it as a development dependency, because CSS styles will be written in the .vue file;

4. In webpack.config.js, add the following modulerules:

module: {
    
    

    rules: [

      {
    
     test: /\.css$/, use: ['style-loader', 'css-loader'] },

      {
    
     test: /\.vue$/, use: 'vue-loader' }

    ]

  }

5. Create a App.jscomponent page:

    <template>

      <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->

      <div>

        <h1>这是APP组件 - {
   
   {msg}}</h1>

        <h3>我是h3</h3>

      </div>

    </template>



    <script>

    // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象

    export default {
     
     

      data() {
     
     

        return {
     
     

          msg: 'OK'

        }

      }

    }

    </script>



    <style scoped>

    h1 {
     
     

      color: red;

    }

    </style>

6. Create main.jsentry file:

    // 导入 Vue 组件

    import Vue from 'vue'



    // 导入 App组件

    import App from './components/App.vue'



    // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件

    var vm = new Vue({
    
    

      el: '#app',

      render: c => c(App)

    });

Use template objects in Vue projects built with webpack?

1. In webpack.config.jsthe Add resolveAttribute:

resolve: {
    
    
    alias: {
    
    
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

Summary of grammar usage in ES6

1. Use export defaultand exportexport module members; corresponding to the ES5 module.exportsandexport

2. Use import ** from **and import '路径'also import {a, b} from '模块标识'import other modules

3. Use arrow functions:(a, b)=> { return a-b; }

In the vue component page, integrate the vue-router routing module

vue-router official website

1. Import the routing module:

import VueRouter from 'vue-router'

2. Install the routing module:

Vue.use(VueRouter);

3. Import the components that need to be displayed:

import login from './components/account/login.vue'

import register from './components/account/register.vue'

4. Create a route object:

var router = new VueRouter({
    
    

  routes: [

    {
    
     path: '/', redirect: '/login' },

    {
    
     path: '/login', component: login },

    {
    
     path: '/register', component: register }

  ]

});

5. Mount the routing object to the Vue instance:

var vm = new Vue({
    
    

  el: '#app',

  // render: c => { return c(App) }

  render(c) {
    
    

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

6. Transform the App.vue component, in the template, add router-linkand router-view:

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>



    <router-view></router-view>

The css scope problem in the component

Extract routing as a separate module

Use Ele.me's MintUI component

Github warehouse address

Mint-UI official document

1. Import all MintUI components:

import MintUI from 'mint-ui'

2. Import style sheet:

import 'mint-ui/lib/style.css'

3. Use MintUI in vue:

Vue.use(MintUI)

4. Examples of use:

<mt-button type="primary" size="large">primary</mt-button>

Use MUI components

Website homepage

Document address

1. Import MUI style sheet:

import '../lib/mui/css/mui.min.css'

2. In webpack.config.jsadding new loader rules:

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

3. According to the official documents and examples, try to use related components

Host the project source code in oschina

1. Click on the picture -> Modify -> SSH public key of how to generate SSH public key

2. Create your own empty storage, use git config --global user.name "用户名"and the git config --global user.email ***@**.comuser's name and mailbox submitted to the global configuration

3. Use git initlocal project initialization

4. Use touch README.mdand touch .gitignoreto create project documentation and ignored files;

5. Use git add .will host all the files to git

6. Use git commit -m "init project"the projects submitted by local

7. Use git remote add origin 仓储地址local projects and remote storage connections and the use of aliases origin of the most remote storage

8. Use git push -u origin masternative code to push warehousing

Basic settings of App.vue component

1. Using the navigation bar head is fixed Mint-UIto Headerthe component;

2. The bottom of the tab use muiof tabbar;

3. Shopping cart icon, use icons-extrathe mui-icon-extra mui-icon-extra-cartsame time, it should depend on the font icon file mui-icons-extra.ttf, copied to fontsthe directory!

4. The tab at the bottom, transformed into router-linkto achieve the switching of a single page;

5. There are two ways to set the highlight when Tab Bar routing is activated:

• The global setting style is as follows:

 	.router-link-active{
    
    

      	color:#007aff !important;

    }

• Or new VueRouterwhen, by linkActiveClassspecified categories highlighted:

 	// 创建路由对象

    var router = new VueRouter({
    
    

      routes: [

        {
    
     path: '/', redirect: '/home' }

      ],

      linkActiveClass: 'mui-active'

    });

Switch between different component pages of the tabbar tab

1. Tabbar transformed into the router-linkform, and to specify each connection toattribute;

2. Import the components that need to be displayed in the entry file, and create a routing object:

    // 导入需要展示的组件

    import Home from './components/home/home.vue'

    import Member from './components/member/member.vue'

    import Shopcar from './components/shopcar/shopcar.vue'

    import Search from './components/search/search.vue'



    // 创建路由对象

    var router = new VueRouter({
    
    

      routes: [

        {
    
     path: '/', redirect: '/home' },

        {
    
     path: '/home', component: Home },

        {
    
     path: '/member', component: Member },

        {
    
     path: '/shopcar', component: Shopcar },

        {
    
     path: '/search', component: Search }

      ],

      linkActiveClass: 'mui-active'

    });

Use mt-swipe carousel diagram component

1. Fake data:

lunbo: [

        'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'

      ]

2. Introduce the carousel diagram component:

<!-- Mint-UI 轮播图组件 -->

    <div class="home-swipe">

      <mt-swipe :auto="4000">

        <mt-swipe-item v-for="(item, i) in lunbo" :key="i">

          <img :src="item" alt="">

        </mt-swipe-item>

      </mt-swipe>

    </div>

  </div>

Get data .vueused in componentsvue-resource

1. Run the cnpm i vue-resource -Sinstallation module

2. Import the vue-resource component

import VueResource from 'vue-resource'

3. Use vue-resource component in vue

Vue.use(VueResource);