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的項目