深入理解基于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 相关文章推荐
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jQuery的position()方法详解
Jul 19 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 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
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python rsa 加密解密
2017/03/20 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
简单了解python关系(比较)运算符
2019/07/08 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
车间班组长的职责
2013/12/13 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
2015年科室工作总结
2015/04/10 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers
微信小程序调用python模型
2022/04/21 Python