vue-cli 项目中引入jquery、sass、md5、ElementUI、vue-cookie

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 框架

• API：http://element-cn.eleme.io/#/zh-CN/component/installation
• 安装：npm install element-ui -S
• 在main.js文件中加入代码

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，axios
中文文档：https://www.kancloud.cn/yunye/axios/234845

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。