深入理解基于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中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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与浏览器缓存的分析
2013/06/03 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
js 字符串操作函数
2009/07/25 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JS实现div居中示例
2014/04/17 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
详解Python time库的使用
2019/10/10 Python
python logging添加filter教程
2019/12/24 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
《美丽的田园》教学反思
2014/03/01 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
Django drf请求模块源码解析
2021/06/08 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL