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 --savenpm i vuex --savenpm i axios --save复制代码

 

6. 单独配置sass需要到dev模式下

npm i sass-loader --save-dev//sass-loader依赖于node-sassnpm i node-sass --save-dev复制代码

sass在组件中使用方法：

复制代码

 

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: '
    '})复制代码

在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复制代码