一、在webpack中配置.vue元件頁面的解析

• 1、執行cnpm i vue -S將vue安裝為執行依賴；

  解釋：

  • 1）在main.js檔案中引入import Vue from 'vue'，但是這樣引入的功能不全，只提供了runtime-only的方式，並沒有提供像網頁那樣的使用方式
  • 2）解決方案：①指定路徑import Vue from 'vue'改為import Vue from '../node_modules/vue/dist/vue.js' 　② 在webpack.config.js中新增resolve屬性：

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

• 2、建立login.vue元件模板檔案

<template>
  <div>
    <h1>這是登入元件</h1>
  </div>
</template>

<script>
</script>

<style>
</style>

• 3、 執行cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包（.vue元件模板檔案）安裝為開發依賴；
• 4、在main.js檔案中，匯入vue模組import Vue form 'vue'
• 5、import login from './login.vue' 匯入元件
• 6、建立vm例項，使用render渲染元件

var vm = new Vue({
  el: '#app',
  render:function(createElements) {  //在webpack中，向通過vue把一個元件放到頁面中去展示，vm例項中的render函式可以實現
    return createElements(login);
  },
  //簡寫ES6
  rener : c => c(login)
  
});

• 7、在頁面中建立一個id為app的元素，作為我們vm例項要控制的區域
• 8、 在webpack.config.js中，新增如下module規則：

module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  }

---

補充：回顧包的查詢規則：import Vue from 'vue'

• 找專案目錄中有沒有node-modules的資料夾
• 在這個資料夾中根據包名，找對應的VUE資料夾
• 在vue資料夾中找package.json的包配置檔案
• 在package.json檔案中，查詢一個main屬性（main屬性指定了包在被載入的時候的入口檔案）

二、ES6語法使用總結

 <script>
    export default {
      data() {
        return {
          msg: 'OK'
        }
      }
    }
</script>

在 .vue 的元件中，通過 script 標籤來定義元件的行為，需要使用 ES6 中提供的 export default 方式，匯出一個vue例項物件

• node中匯入和匯出模組
  • 1）匯入：var 名稱 = require('模組識別符號')
  • 2）匯出：module.export和exports來暴露模組
• ES6中匯入和匯出模組
  • 1）匯入：impotr 模組 from 模組識別符號 import 表示路徑
  • 2）匯出：使用export default 和 export向外暴露成員
  • export default向外暴露的成員，可以使用任何的變數來接收。但是隻能暴露一個成員
  • export向外暴露成員，只能使用{ }的形式來接收，且名字不能改變，叫做【按需匯出】。可以暴露多個成員。如果有多個成員，我們不需要時，可以不在{ }中定義。如果非要改變名稱的話可以import {title as title123 from 'test.js'}
  • 可以同時使用export default 和export來暴露成員

var info = {
	name:'WSR',
	age:18
}
export default info;    //方式1
export var title = '小星星';  //方式2

三、在vue元件頁面中，整合vue-router路由模組

[vue-router官網](https://router.vuejs.org/)

• 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

  <h1>這是 App 元件</h1>
  <router-link to="/login">登入</router-link>
  <router-link to="/register">註冊</router-link>
  <router-view></router-view>

因為render會把el指定的容器中。所有的內容都清空覆蓋，所以不要把路由的router-view和router-link直接寫到el所控制的元素中。可以寫在元件中。
login和register元件，是通過路由匹配監聽到的，所以這兩個元件，只能展示到屬於路由的<router-view></router-view>中去

四、路由巢狀

var router = new VueRouter({
	routes:[
		{
			path:'./account',
			component:account,
			children:[
				{path:'login',component:login},
				{path:'register',component:register}
			]
		},
		{path:'/goodslist',component:goodslist}
	]
})

然後在account元件中建立兩個連結

<router-link to="./login">登入</router-link>
<router-link to="./register">註冊</router-link>

<router-view></router-view>

五、元件樣式

在元件中的style標籤中寫樣式

• 作用域：在style中的樣式會作用到全部的元件上，新增scoped屬性表示只作用於當前的元件。推薦都加上scoped屬性
• 樣式型別：普通的style標籤只支援普通的樣式，如果想要啟用scss和less，需要為style元素設定lang屬性

<style lang="scss" scoped>
</style>

六、Mint-UI的使用（餓了麼的 MintUI 元件）

[Github 倉儲地址](https://github.com/ElemeFE/mint-ui) [Mint-UI官方文件](http://mint-ui.github.io/#!/zh-cn)

6.1 完整匯入

• 匯入所有MintUI元件：

import MintUI from 'mint-ui'

• 匯入樣式表：

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

• 在 vue 中使用 MintUI中的Button按鈕和Toast彈框提示：

Vue.use(MintUI)

• 使用的例子：

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

6.2 按需匯入

http://mint-ui.github.io/docs/#/zh-cn2/quickstart - 安裝 babel-plugin-component

npm install babel-plugin-component -D

按照官方操作即可

七、使用 MUI 程式碼片段

注意： MUI 不同於 Mint-UI，MUI只是開發出來的一套好用的程式碼片段，裡面提供了配套的樣式、配套的HTML程式碼段，類似於 Bootstrap； 而 Mint-UI，是真正的元件庫，是使用 Vue 技術封裝出來的 成套的元件，可以無縫的和 VUE專案進行整合開發；
因此，從體驗上來說， Mint-UI體驗更好，因為這是別人幫我們開發好的現成的Vue元件；
從體驗上來說， MUI和Bootstrap類似；
理論上，任何專案都可以使用 MUI 或 Bootstrap，但是，MInt-UI只適用於Vue專案；

注意： MUI 並不能使用 npm 去下載，需要自己手動從 github 上，下載現成的包，自己解壓出來，然後手動拷貝到專案中使用；

官網首頁

文件地址

• 匯入 MUI 的樣式表：

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

• 在webpack.config.js中新增新的loader規則：

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

• 根據官方提供的文件和example，嘗試使用相關的元件

從github網站下載專案，在 mui/examples/hello-mui/examples/ 目錄下查詢所需的元件