深入理解基于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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
JavaScript oncopy事件用法实例解析
May 13 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
优化使用mysql存储session的php代码
2008/01/10 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js字符串转成JSON
2013/11/07 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
行政专员工作职责
2013/12/22 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
租房协议书范文
2014/08/20 职场文书
六查六看心得体会
2014/10/14 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2014年收银工作总结
2014/11/13 职场文书
教师考核评语大全
2014/12/31 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
MySQL8.0的WITH查询详情
2021/08/30 MySQL
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL