深入理解基于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 相关文章推荐
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
详解vue 组件注册
Nov 20 Vue.js
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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
网络工程师自荐书范文
2014/04/01 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
个人思想政治总结
2015/03/05 职场文书
中学图书馆工作总结
2015/08/11 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android