深入理解基于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检测浏览器的缩放状态实现代码
Sep 28 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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中文件上传的安全问题
2006/10/09 PHP
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP与SQL注入攻击[二]
2007/04/17 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
js表头排序实现方法
2015/01/16 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
Python psutil模块简单使用实例
2015/04/28 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
采购部部长岗位职责
2014/02/06 职场文书
十佳护士获奖感言
2014/02/18 职场文书
元旦晚会策划方案
2014/02/18 职场文书
新学期开学演讲稿
2014/05/24 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
老龙头导游词
2015/02/11 职场文书
联村联户简报
2015/07/21 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python