深入理解基于vue-cli的vuex配置


Posted in Javascript onJuly 24, 2017

本文介绍了基于vue-cli的vuex配置,分享给大家,希望对大家有帮助

首先成功运行vue-cli项目

安装vuex

cnpm i vuex --save

修改配置文件

store

新建文件夹store(与router同级)然后在store目录下新建index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
export default new Vuex.Store({
 strict: process.env.NODE_ENV !== 'production',
 modules: {

 },
 getters: {

 },
 actions: {

 },
});

main.js

import Vue from 'vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 router,
 store
}).$mount('#app')

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vue-cli</title>
 </head>
 <body>
 <div id="app">
  <router-view></router-view>
 </div>
 </body>
</html>

上面对main.js和index.html做了修改。主要是符合个人的用法,这样的好处是根组件只有index.html(如果可以理解为组件),而不是有app.vue和index.html两个。

直观上来看可能这样就会出现每个组件都要引一个导航栏的问题,这样可能不太好。但是从过往的开发经验来看,如果在app.vue中定义了导航栏,那么相应的在app.vue中就要加入相应的业务逻辑,网站规模大了之后app.vue的业务逻辑会越来越多,不利于管理。(所以这里app.vue就可以删除了)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 #Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 #Javascript
关于vue-resource报错450的解决方案
Jul 24 #Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 #Javascript
react-router4 嵌套路由的使用方法
Jul 24 #Javascript
关于react-router的几种配置方式详解
Jul 24 #Javascript
简单实现js放大镜效果
Jul 24 #Javascript
You might like
php获取后台Job管理的实现代码
2011/06/10 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
jQuery 选择器理解
2010/03/16 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
Python代码缩进和测试模块示例详解
2018/05/07 Python
Django models.py应用实现过程详解
2019/07/29 Python
python中下标和切片的使用方法解析
2019/08/27 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
自我评价正确写法范文
2013/12/10 职场文书
学校卫生检查制度
2014/02/03 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis