vue项目引入axios和element-ui、jquery、scss、vuex、齐全！！！！_安装 element-ui、vue-router和json-server

**

安装SCSS

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

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

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

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

 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"]
      }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

3、修改style标签

<style lang="scss">
1

大功告成！！！！

**

安装element-ui

**
1、终端输入

npm i element-ui -S
1

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)
});
1
2
3
4
5
6
7
8
9

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

**

安装jquery

**

npm install jquery --save

cnpm install jquery --save
1
2
3

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

const webpack = require('webpack')
1

在底部加入:

  plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "window.jQuery":"jquery"
    })
  ]
1
2
3
4
5
6
7

如下图

之后在main.js中引入

import $ from 'jquery'
1

就可以直接使用了

**

引入axios

**

npm install axios --save
1

然后在main.js中写：

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

使用方法：

this.$axios({
              method: 'get',
              url: ‘  url ’,
              data: .,
               headers: {
                'Authorization':'token',
                'Accept':"application/json; charset=utd-8"
              }
            }).then(res => {
            }).catch(error => {
            });
1
2
3
4
5
6
7
8
9
10
11

**

引入vuex

**

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

安装引入具体步骤如下

第一步：先下载vuex

npm install vuex --save
1

第二步： 在main文件中引入

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

import Vuex from 'vuex'

Vue.use(Vuex)
1
2
3
4
5

然后挂在实例中

第三步：建文件

第四步：文件中引入

使用方法：

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

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

getters：相当于过滤器

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

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

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