webpack的学习02---webpack与vue结合

1. 单文件组件 

   单文件组件就是文件扩展名为 .vue 的 single-file components(单文件组件) ，详细请看  https://cn.vuejs.org/v2/guide/single-file-components.html

2. 单文件组件的使用

2.1 建立单文件组件 例如建立名为app.vue 的组件

 1 <template>
 2   <div>
 3     {{msg}}
 4   </div>
 5 </template>
 6 <script>
 7 export default {   //由export default 导出一个对象
 8   data(){
 9     return {
10       msg: 'hello world'
11     }
12   }
13 }
14 </script>
15 <style>
16   div {
17     color: #f00;
18   }
19 </style>

2.2 安装 loader 

命令： npm install vue --save

            npm install vue-loader vue-template-compiler --save-dev

2.3 建立一个app.js文件 把loader 引入 而后在new一个实例，而且在HTML中建立id为APP 的元素，而后再引入App组件，经过 render 函数 把组件渲染到页面

 1 // 引入vue   这里的vue就死经过npm 安装过来的
 2 import Vue from 'vue'
 3 // 引入建立的App 组件
 4 import App from './components/app.vue'
 5 //new 一个实例
 6 new Vue({
 7   el: '#app',
 8   // render: function(h){  // 参数名h 能够随便取
 9   //   return h(App)   //render函数就是把App组件渲染到 #APP 的实例上
10   // }
11 
12   //把render函数写为ES6的写法
13   render: h => h(App)
14 })

2.4 在webpack.config.js文件中配置  vue-template-compiler （由于浏览器不可以解析vue文件 因此须要插件来打包翻译）配置方法以下;

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

　　2.5 运行 npm run dev

 路由的配置

命令：  npm install vue-router --save

配置文件app.js

 1   //app.js
 2   import Vue from 'vue'
 3   import App from './App.vue'
 4   import Login from './Login.vue'
 5     // 1. 引入vue-router
 6   import VueRouter from 'vue-router'
 7   // 2. 表示使用路由插件
 8   Vue.use(VueRouter)
 9   //3. 配置路由规则
10   var router = new VueRouter({
11    routes: [
12     { name: 'login', path: '/login', component: Login }
13   ]
14   })
15   new Vue({
16    el: '#app',
17    // 挂载路由
18    router,
19    // 这是个渲染函数，指定渲染组件
20    render: h => h(App)
21   })

 3.vue-cli脚手架工具

 vue-cli 是一个官方脚手架工具，所谓脚手架就是一架子，什么架子呢，项目结构的架子，里面有一些最基本的配置，利用vue-cli 咱们能够生成这样的一个架子，因此它被称为vue脚手架工具

 

命令： npm install vue-cli -g

            vue init webpack admin     这行命令的意思是用vue初始化一个以webpack工具打包的名为admin的项目