vue 那点破事

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/>'
})
上一篇 下一篇

猜你喜欢

热点阅读