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">