vue项目常用依赖

做一个新的项目，只是靠初始化的vue肯定是不够的，那么我们就要使用到依赖包了，我就总结一下我常用到的依赖

一、babel-polyfill 把ES6语法转换成IE浏览器能读取的ES5语法，通常用来兼容IE浏览器，防止出现白屏现象

npm install --save-dev babel-polyfill

安装好后可以直接在main.js文件中引入

import 'babel-polyfill'

最好呢在webpack.base.config.js文件中修改

entry: {
    app: ['babel-polyfill', './src/main.js']
},

二、axios 

npm install axios --save-dev 和 npm install vue-axios --save-dev

安装完成后引入
1、在main.js文件中

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios)

2、添加到vue的原型属性上，同样是在main.js文件中

import axios from 'axios'
Vue.prototype.axios = axios

3、结合 Vuex的action
在vuex的仓库文件store.js中引用，使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'
 
import axios from 'axios'
 
Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'kimi'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/register',
        data: context.state.user
      })
    }
  }
})
 
export default store

三、配置jQuery 

（1）在webpack.base.conf.js头部添加

var webpack = require('webpack')

（2）在entry后边添加

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

在main.js中引入jQuery

import 'jquery'

四、安装elementUI

npm i element-ui -S  

main.js引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);    // 即可直接使用文档

五、安装less

npm i less less-loader -S

1.更改配置文件build/webpack.base.conf.js

在module.export暴露的对象中，为module的rules添加如下配置：

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
},

2.使用

在style标签上添加lang属性，指定使用的样式语法；

六、安装  qs

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

npm install qs -S

mian.js引入：

import qs from 'qs';

Vue.prototype.$qs = qs //即可直接使用  this.$qs

七、安装echarts

npm install echarts --save

mian.js中引入：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts  

八、安装css-loader

css-loader用于将css文件打包到js中, 常常配合style-loader一起使用，将css文件打包并插入到页面中。

npm install css-loader --save-dev

npm install style-loader --save-dev

1.更改配置文件build/webpack.base.conf.js

在module.export暴露的对象中，为module的rules添加如下配置：

 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}