Vue三方框架的安装

写在前面：

以下安装，如果在安装过程中因为网络原因导致无法安装成功，建议更换执行命令npm为cnpm（前提是有安装过淘宝镜像）

一、axios 网络请求

1. 安装

npm install axios —save

2. 引入

// main.js 导入 axios 来处理网络请求（这不是vue本身的模块，这是官方推荐使用的第三方模块）
import axios from 'axios'
//使用--示例
// Vue.prototype.userName='小黑'
Vue.prototype.axios=axios;

二、vuex 各个组件要操作同一数据的时候适合使用vuex

1. 安装

npm install vuex --save

2. 引入
   src下新建一个文件夹，例如 store，在里边新建对应的文件

index.js文件中加入对其他文件的引用

import Vue from 'vue'
import Vuex from 'vuex'
import action from './action'
import getters from './getters'
import mutations from './mutations'

Vue.use(Vuex)

const state = {
  
}
export default new Vuex.Store({
  state,
  action,
  getters,
  mutations
})

然后在main.js中将store引入

import store from './store'

三、mint-ui使用

1. 安装

npm install mint-ui -S

2. 引入

import Mint from 'mint-ui'
import "mint-ui/lib/style.css"
Vue.use(Mint)

四、vue-navigation 第三方导航库

1. 安装

npm i -S vue-navigation

2. 引入

在main.js中引入

import navigation from 'vue-navigation'
Vue.use(navigation)

五、stylus CSS预处理器

1. 安装

npm install stylus --save-dev
npm install stylus-loader --save-dev

2. 引入
   使用方式分两种，一种是在.vue文件的style块中使用，一种是引用.styl文件的形式

在.vue文件的style块中使用

<style scoped lang='stylus'>
 .content
      width: 100%
      position absolute
      top .44rem
      left 0
      right 0
      bottom 0
      overflow scroll
</style>

六、SCSS使用

1. 安装

npm install sass-loader --save-dev
npm install node-sass --sava-dev
npm install style-loader --save-dev

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

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

3. 修改style标签，使用scss时候，在所在的style样式标签上添加lang=”scss”即可应用对应的语法

<style lang="scss">