- 安装node.js
2. 全局安装vue-cli
npm install -g vue-cli
复制代码
可以用vue -V
命令来检查vue
是否安装成功
- 基于
webpack
创建项目
vue init webpack myproject
复制代码
myproject
是项目名称,可替换成自己的项目名称 可以一路回车,最后完成创建
创建成功如图
- 进入项目目录
cd myproject
复制代码
- 安装
iview
、vuex
、axios
的依赖
npm i iview --save
npm i vuex --save
npm i axios --save
复制代码
- 单独配置
sass
需要到dev
模式下
npm i sass-loader --save-dev
//sass-loader依赖于node-sass
npm i node-sass --save-dev
复制代码
sass
在组件中使用方法:
<style lang="scss" scoped=""></style>
复制代码
- 安装完成,去
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
如图
- 配置完成后,即可运行项目预览
npm run dev
复制代码