深入理解基于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 对象(object)的prototype
May 09 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
element tree树形组件回显数据问题解决
Aug 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
mysql5写入和读出乱码解决
2006/11/25 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php strftime函数的详细用法
2018/06/21 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
Python合并字符串的3种方法
2015/05/21 Python
python通过socket查询whois的方法
2015/07/18 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
小学开学寄语
2014/01/19 职场文书
环保志愿者活动总结
2014/06/27 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
心理学培训心得体会
2016/01/22 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技