孙肖宁

在webpack中配置.vue组件
在webpack中配置.vue组件页面的解析运行npm i vue -S将vue安装为运行依赖;运行npm i v...
扫描右侧二维码阅读全文
04
2018/08

在webpack中配置.vue组件

在webpack中配置.vue组件页面的解析

  1. 运行npm i vue -S将vue安装为运行依赖;
  2. 运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖;
  3. 运行npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
  4. 在webpack.config.js中,添加如下module规则

    module: {
    
       rules: [
    
         { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    
         { test: /\.vue$/, use: 'vue-loader' }
    
       ]
    
     }
  5. 创建App.js组件页面

    <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.创建main.js入口文件

 // 导入 Vue 组件

   import Vue from 'vue'

   // 导入 App组件

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

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

   var vm = new Vue({

     el: '#app',

     render: c => c(App)

   });

在使用webpack构建的Vue项目中使用模板对象

在webpack.config.js中添加resolve属性:

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

在vue组件页面中,集成vue-router路由模块

  1. 导入路由模块:

       import VueRouter from 'vue-router'
  2. 安装路由模块:

       Vue.use(VueRouter);
  3. 导入需要展示的组件:

       import login from './components/account/login.vue'
       
       import register from './components/account/register.vue'
  4. 创建路由对象:

       var router = new VueRouter({
       
         routes: [
       
           { path: '/', redirect: '/login' },
       
           { path: '/login', component: login },
       
           { path: '/register', component: register }
       
         ]
       
       });
  5. 将路由对象,挂载到 Vue 实例上:

       var vm = new Vue({
       
         el: '#app',
       
         // render: c => { return c(App) }
       
         render(c) {
       
           return c(App);
       
         },
       
         router // 将路由对象,挂载到 Vue 实例上
       
       });
  6. 改造App.vue组件,在 template 中,添加router-link和router-view:

           <router-link to="/login">登录</router-link>
       
           <router-link to="/register">注册</router-link>
       
       
       
           <router-view></router-view>
       

组件中的css作用域问题scoped

scoped仅在当前组件,或者子组件中有效

<style scoped>
div {
 color: red;
}
</style> 

抽离路由为单独的模块

import VueRouter from 'vue-router'

// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
 routes: [
   // account  goodslist
   {
     path: '/account',
     component: account,
     children: [
       { path: 'login', component: login },
       { path: 'register', component: register }
     ]
   },
   { path: '/goodslist', component: goodslist }
 ]
})

// 把路由对象暴露出去
export default router
Last modification:August 4th, 2018 at 10:39 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment