深入理解基于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 函数中的参数使用分析
Mar 27 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
angular 服务随记小结
May 06 Javascript
用JS实现选项卡
Mar 23 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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+MSSQL分页的例子
2006/10/09 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python异常处理例题整理
2019/07/07 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python 默认参数相关知识详解
2019/09/18 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
3分钟英语演讲稿
2014/04/29 职场文书
书法大赛策划方案
2014/06/04 职场文书
2014年小学工作总结
2014/11/26 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
大学生支教感言
2015/08/01 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL