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屬性，指定使用的樣式語法；

<style scoped lang='less'>
    .page{
        width:100%;
        .main{
            width:100%;
        }
    }
</style>

六、安裝  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' ]
      }
    ]
  }
}