深入理解基于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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
js 获取时间间隔实现代码
May 12 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
Vue实现可移动水平时间轴
Jun 29 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强制下载PDF文件示例
2014/01/17 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
python 数据的清理行为实例详解
2017/07/12 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
入党自我评价范文
2014/02/02 职场文书
行政主管职责范本
2014/03/07 职场文书
部队2014年终工作总结
2014/11/27 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
建国大业观后感
2015/06/01 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
Spring 使用注解开发
2022/05/20 Java/Android