Vue 2.0 项目创建

作者: 爱绑架的猫 | 来源:发表于2019-05-16 15:39 被阅读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/>'
    })
    

    相关文章

      网友评论

        本文标题:Vue 2.0 项目创建

        本文链接:https://www.haomeiwen.com/subject/tapiaqtx.html