vue项目引入axios和element-ui、jquery、scss、vuex、齐全！！！！

**

安装SCSS

**
1、在当前目录下安装

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

2、在build文件夹下的webpack.base.conf.js的 “ rules” 里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

 rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {  //手动添加这一条，相当于是编译识别sass!
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
    ]

3、修改style标签

<style lang="scss">

大功告成！！！！

**

安装element-ui

**
1、终端输入

npm i element-ui -S

2、完整引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

然后直接开始用就OK ！！！

**

安装jquery

**

npm install jquery --save

cnpm install jquery --save

在build文件夹内修改 webpack.base.conf 文件，加入：

const webpack = require('webpack')

在底部加入:

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

如下图

之后在main.js中引入

import $ from 'jquery'

就可以直接使用了

**

引入axios

**

npm install axios --save

然后在main.js中写：

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

使用方法：

this.$axios({
              method: 'get',
              url: ‘  url ’,
              data: .,
               headers: {
                'Authorization':'token',
                'Accept':"application/json; charset=utd-8"
              }
            }).then(res => {
            }).catch(error => {
            });

**

引入vuex

**

理解这个vuex就把他理解成状态管理仓库就行了，没有多复杂，就是存储公共变量得地方

安装引入具体步骤如下

第一步：先下载vuex

npm install vuex --save

第二步： 在main文件中引入

import store from './store/index.js'

import Vuex from 'vuex'

Vue.use(Vuex)

然后挂在实例中

第三步：建文件

第四步：文件中引入

使用方法：

state相当于 组件中的data 里面存储变量

mutations：相当于methods 是一些数据的处理方法

getters：相当于过滤器

在组件中使用state的方法同router相似

使用：this.$store.state.变量名 就可以获取 与赋值

在插值表达式中{{ $store.state.变量名 }}