【爬坑日記】基於vue cli+vuex+axios+iview+sass初始化專案步驟

1. 安裝node.js

  2. 全域性安裝vue-cli

npm install -g vue-cli
複製程式碼

可以用vue -V命令來檢查vue是否安裝成功

 

3. 基於webpack建立專案

vue init webpack myproject
複製程式碼

myproject是專案名稱，可替換成自己的專案名稱 可以一路回車，最後完成建立

建立成功如圖

 

4. 進入專案目錄

cd myproject
複製程式碼

 

5. 安裝iview、vuex、axios的依賴

npm i iview --save
npm i vuex --save
npm i axios --save
複製程式碼

 

6. 單獨配置sass需要到dev模式下

npm i sass-loader --save-dev
//sass-loader依賴於node-sass
npm i node-sass --save-dev
複製程式碼

sass在元件中使用方法：

<style lang="scss" scoped=""></style>
複製程式碼

 

7. 安裝完成，去main.js檔案中配置依賴

配置iview

import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView)
複製程式碼

 

配置axios

import axios from 'axios'

//vue中全域性注入 axios方法
Vue.prototype.$axios = axios
複製程式碼

配置axios後，在元件中使用方法：

this.$axios.get(url[, config])

 

配置vuex

import {store} from './store/store.js'

// 在例項化vue時，注入`store`物件
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})
複製程式碼

在store.js檔案中，使用vuex的module方法分割成模組

import Vue from 'vue'
import Vuex from 'vuex'
import module1 from './module1.js'
import module2 from './module2.js'
import module3 from './module3.js'

Vue.use(Vuex)

export const store = new Vuex.Store({
  modules:{
    module1,
    module2,
    module3,
  }
})
複製程式碼

 

配置完main.js如圖

 

9. 配置完成後，即可執行專案預覽

npm run dev
複製程式碼