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

BenjaminC發表於2018-06-29
  1. 安裝node.js

  2. 全域性安裝vue-cli

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

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

 

  1. 基於webpack建立專案
vue init webpack myproject
複製程式碼

【爬坑日記】基於vue cli+vuex+axios+iview+sass初始化專案步驟
myproject是專案名稱,可替換成自己的專案名稱 可以一路回車,最後完成建立

建立成功如圖

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

 

  1. 進入專案目錄
cd myproject
複製程式碼

 

  1. 安裝iviewvuexaxios的依賴
npm i iview --save
npm i vuex --save
npm i axios --save
複製程式碼

 

  1. 單獨配置sass需要到dev模式下
npm i sass-loader --save-dev
//sass-loader依賴於node-sass
npm i node-sass --save-dev
複製程式碼

sass在元件中使用方法:

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

 

  1. 安裝完成,去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檔案中,使用vuexmodule方法分割成模組

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如圖

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

 

  1. 配置完成後,即可執行專案預覽
npm run dev
複製程式碼

相關文章