深入理解基于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 15 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
svg动画之动态描边效果
Feb 22 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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解析html的实现代码
2011/08/08 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
EJB timer的种类
2014/10/28 面试题
应届本科生推荐信范文
2013/12/25 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
一份文言文检讨书
2014/09/13 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
大学生活感想
2015/08/10 职场文书