Vue 2.0 项目创建
2019-05-16 本文已影响0人
爱绑架的猫
1,安装指令
npm install vue-cli -g // 安装 vue 命令环境
vue init myProjectName // 创建 vue 项目
cd myProjectName // 跳转到项目目录
npm run dev // 启动项目
2,安装组件
项目一般都会安装 vue-router ,axios ,vuex 等等
npm install --save axios // 安装 axios
npm install --save vuex // 安装 vuex 状态管理控制
npm install --save vuex-persist // 安装 vuex 持久化插件
3,配置 vuex
1,创建 src/vuex 文件夹,并且创建 /src/vuex/index.js
/src/vuex/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import persist from './persist' // 引入 vuex 持久化 插件
Vue.use(Vuex)
// 推荐使用 vuex 模块化
export default new Vuex.Store({
modules: {
},
plugins: [persist] // 使用持久化插件
})
上面代码中,我们使用了 presist 这个 vuex 持久化插件,所以我们要创建对应的文件,并且配置好插件。
/src/vuex/persist.js
import VuexPersistence from 'vuex-persist'
const persist = new VuexPersistence({
// 其他参数看文档
storage: window.sessionStorage
})
export default persist.plugin
4,引入组件
配置好 vuex 以后,我们就需要把安装好的这些组件引入到 main.js 中
src/main.js
// 添加以下代码
import Vuex from 'vuex'
import Axios from 'axios'
import store from './vuex/index'
Vue.use(Vuex)
// 引入的组件注册进去
new Vue({
el: '#app',
router,
store,// vuex
Axios,// axios
components: {App},
template: '<App/>'
})