【爬坑日记】基于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