1，新增 sass 模組

• 安裝：npm install sass-loader node-sass --save-dev
• .vue檔案的style標籤改寫為：

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

2，新增 jQuery 模組

• 安裝：cnpm install jquery --save
• webpack有providePlugin外掛，可以自動引入模組。所以需要在專案工程的build資料夾下webpack.base.config.js中新增以下配置
  （1）開頭加入 const webpack = require('webpack')
  （2）在最後一個大括號內 加入程式碼

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    'window.jQuery': 'jquery'
  })
]

• eslint認為沒有宣告，需要在eslintrc.js中加入globals配置

globals: {
  '$': false,
  'jquery': false
}

3，新增 md5 密碼加密模組

• 安裝：npm install --save js-md5
• 在 main.js 輸入以下程式碼：

import md5 from 'js-md5'
Vue.prototype.$md5 = md5
 

• 在其他 .vue 檔案中使用md5：

let password = this.$md5('111')

4，新增 ElementUI 框架

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 上部分為引入ElementUI的css樣式
// 若出現問題，可以在index.html檔案中引入靜態element-ui的靜態css檔案
Vue.use(ElementUI)

// 注：修改ElementUI主題色網站：https://elementui.github.io/theme-preview/#/zh-CN
 

• 在外部 .js 檔案中使用 ElementUI 的彈窗功能

import ElementUI from 'element-ui'
let $msgbox = ElementUI.MessageBox
let $alert = ElementUI.MessageBox.alert
let $confirm = ElementUI.MessageBox.confirm
let $prompt = ElementUI.MessageBox.prompt
let $message = ElementUI.Message
// 呼叫，例：$message.error('1111')

5，新增 vue-cookie 框架

• 安裝：npm install vue-cookie --save
• main.js檔案配置如下：

import VueCookie from 'vue-cookie'
Vue.use(VueCookie)

• 使用vue-cookie：

this.$cookie.set('userName', '使用者名稱') // 設定 cookie
this.$cookie.get('userName') // 讀取 cookie

• 外部 .js 檔案 使用 cookie：

import $cookie from 'vue-cookie'
$cookie.set('userName', 'aaa111') // 設定 cookie
console.log($cookie.get('userName')) // 讀取 cookie

6.1 安裝：npm install axios --save
6.2 新建 fetch.js檔案，程式碼如下

import axios from 'axios'
import router from '@/router'
// elementui
import ElementUI from 'element-ui'
let $msgbox = ElementUI.MessageBox
let $alert = ElementUI.MessageBox.alert
let $confirm = ElementUI.MessageBox.confirm
let $prompt = ElementUI.MessageBox.prompt
let $message = ElementUI.Message

// 建立axios例項
const service = axios.create({
  baseURL: '/api', // 請求地址
  timeout: 5000
})

// request 攔截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

// response 攔截器
service.interceptors.response.use(
  // response => response
  response => {
    const code = response.data.code
    console.log('返回資料' + JSON.stringify(response.data))

    // 驗證錯誤碼
    if (code === 0) {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    $message({
      message: '錯誤：' + error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

6.3 編寫介面

import fetch from '@/util/fetch'
export function getData() {
	let data = {
		no: '18600000000',
		value: '222'
	}
	return fetch({
		method: 'post',
		url: '/login',
		data
	})
}

6.4 在元件中呼叫介面

import { getData } from '介面地址'
getData().then(res => {
	console.log(res)
})

6，npm install --save 與 npm install --save-dev區別
以npm安裝msbuild為例
1,npm install msbuild:
（1）會把msbuild安裝到node_modules目錄中
（2）不會修改 pack.json
（3）之後執行 npm install命令時，不會自動安裝msbuild

2,npm install msbuild --save:
（1）會把msbuild包安裝到node_modules目錄中
（2）會在package.json的dependencies屬性下新增msbuild
（3）之後執行npm install 命令時，會自動安裝msbuild到node_modules目錄中
（4）之後執行npm install --production 或者註明NODE_ENV變數值為production時，會自動安裝msbuild到node_modules目錄中

3,npm install msbuild --save-dev:
（1）會把msbuild包安裝到node_modules目錄中
（2）會在package.json的devDependencies屬性下新增msbuild
（3）之後執行npm install命令時，會自動安裝msbuild到node_modules目錄中
（4）之後執行npm install --production或者註明NODE_ENV變數值為production時，不會自動安裝msbuild到node_modules目錄中

4,使用原則:
執行時需要用到的包使用–save，否則使用–save-dev。