深入理解基于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 框架Backbone使用指南
Jul 24 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
vue.js+element 默认提示中英文操作
Nov 11 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
世界上第一台立体声收音机
2021/03/01 无线电
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
DWR Ext 加载数据
2009/03/22 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python json模块使用实例
2015/04/11 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
自学考试自我鉴定范文
2013/09/26 职场文书
应用数学自荐书范文
2013/11/24 职场文书
大四学生思想汇报
2014/01/13 职场文书
《观舞记》教学反思
2014/04/16 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android