在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