想尝试使用vuex的module来进行操作，看了一些资料，我简单进行了一个简化 目录结构： store │ index.js │ ├─feeds │ actions.js │ getters.js │ index.js │ mutation-type.js │ mutations.js │ state.js │ └─moviesactions.jsgetters.jsindex.jsmutation-type.jsmutations.jsstate.js 这里是两个模块feeds和movies 第一步：在store文件夹下的index.js入口文件写入：import Vue from vue; import Vuex...
了解vuex的朋友都知道它是vue用来集中管理状态的容器，如果了解过Reduce的朋友可能看见他时就会非常熟悉，都是用来管理全局的状态的，实现不同组件之间相互的数据访问。这里我们不介绍vuex,主要介绍vuex拆分store以及多模块管理。我们知道如果一个项目非常大的话状态就会非常的多，如果不进行分类处理，所有的状态都维护在一个state里面的话，状态管理就会变得非常的混乱，这样非常不利于项目的后期维护。我们现在前端推崇模块化开...
现代Web开发中的CSS离完美还差得远，这并不奇怪。现在，项目通常是相当的复杂的，而CSS样式又是全局性的，所以到最后总是极容易地发生样式冲突： 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 。 为了减轻CSS存在的主要痛点，我们在项目中普遍采用 BEM 的方法来。不过这只能解决CSS问题中的一小部分。 对我们来说是幸运的，社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过 CSS Modules 、 Styled C...
在开发vue的项目（我使用的是vue2）,需要添加js，虽然可以通过npm install 安装插件，但是如果有一些插件并没有开源，这时候我们只有脸上宽面条了。所以我更倾向于在webpack中引入外部js文件。 1.直接引用Note:(红色标注部分) 位置1：将页面中需要用到的js，引入进来，from 后面是该js所在的文件目录； 位置2：需要用到位置一中定义的变量Swiper; 位置3：为防止eslint严格模式下报错，需要将位置2定义的swiper再次调用一下； 以上这...
1 引入第三方插件 import echarts from echarts2 引入工具类 第一种是引入单个方法 import {axiosfetch} from ./util;下面是写法，需要export导出export function axiosfetch(options) {} 第二种 导入成组的方法 import * as tools from ./libs/tools其中tools.js中有多个export方法,把tools里所有export的方法导入 vue中怎么用呢？Vue.prototype.$tools = tools 直接用 this.$tools.method调用就可以了说到这 export 和 export d...
需求分析： 如图，有很多高度不固定的模块（图中只显示两个，本人项目有十三个），点击模块标题展开相应的模块，再次点击此模块匿藏，如何实现此需求并实现复用？ 点击红框前： 点击后： 难点分析: 模块高度不固定。比如，本人一开始想到的方法如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{height:500px;background-color:black; overflow: hidden; }.my...
场景 在实际的项目开发中会出现这样的场景，项目中需要多个模块（单页或者多页应用）配合使用的情况，而vue-cli默认只提供了单入口打包，所以就想到对vue-cli进行扩展 实现 首先得知道webpack是提供了多入口打包，那就可以从这里开始改造 新建build/entry.js const path = require(path) const fs = require(fs) const moduleDir = path.resolve(__dirname, ../src/modules) let entryObj = {} let moduleItems = fs.readdirSync(m...
本文我们主要来聊聊登录以及组件的动态加载。 登录状态保存当用户登录成功之后，需要将当前用户的登录信息保存在本地，方便后面使用。具体实现如下： 登录成功保存数据在登录操作执行成功之后，通过commit操作将数据提交到store中，核心代码如下： this.postRequest(/login, {username: this.loginForm.username,password: this.loginForm.password }).then(resp=> {if (resp && resp.status == 200) {var data = resp.data;_this....
上上篇：Vuex 入门 上一篇：Vuex 提升自制vuex LOGO前两篇讲解了一下 Vuex 的基本使用方法，可是在实际项目中那么写肯定是不合理的，如果组件太多，不可能把所有组件的数据都放到一个 store.js 中的，所以就需要模块化的组织 Vuex，首先看一下 项目结构。 项目结构一、首先执行以下命令： vue init webpack-simple vuex-demo cd vuex-demo npm install npm install vuex -S npm run dev二、按照上图结构创建文件目录Vuex 模块化目...
AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库，主要用于快速开发 PC 网站产品。 专门为桌面应用程序构建，AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程，以及一个体面的干净整洁的 UI 组件。 特性 基于 Vue 开发的 UI 组件基于 npm + webpack + babel 的工作流，支持 ES2015CSS 样式独立，保证不同的框架实现都能保持统一的 UI 风格（ 详见： AT-UI Style ）提供友好的 API，可灵活的使用组件支持环境...
引子vuejs 是一个入门简单的框架，具有使用简单，扩展方便的特点。随着webpack的流行，vuejs也推出了自己的load，vue-loader，可以方便的打包代码。最近写了一个json viewer-ac，就是完全使用vue-loader带来的模块化特性，写的比较开心，也得到了不少经验。这里记录一下。文件结构 <template><div><app-header></app-header></div> </template> <style> ... </style> <script>import AppHeader from ./AppHeader.vueexport default...
前言 Vuex 强调使用单一状态树，即在一个项目里只有一个 store，这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护，所以就需要对状态树进行模块化的拆分。 这篇文章预设你已经了解vue相关的基础知识，因此本文不再赘述。需要学习的朋友可以参考这篇文章://www.gxlcms.com/article/110212.htm 对vuex的定位和解释可以看官方文档，说的很详细了，需要的朋友也可以...
我们看到了VUE分了很多模块（initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()），通过使用Mixin模式，都是使用了JavaScript原型继承的原理，在Vue的原型上面增加属性和方法。我们继续跟着this._init(options)走，这个一点击进去就知道了是进入了init.js文件是在initMixin函数里面给Vue原型添加的_init方法。首先来从宏观看看这个init文件，可以看出主要是导出了两个函数：initMixin和resolveConstructorOption...
在看电影、打Dota、撸代码间来回，犹豫不决，终于还是下决心继续学习VUE。 仿照 conde.js 官网写的一个demo，目前已经基本可用，但始终缺少登录页，没有用户权限管理，于是开撸......<template><div id="login"><c-header></c-header><c-form></c-form><p class="content-block"><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click=showState class="button button-fill button-success">登录</a></p...
前言 在vue里，组件之间的作用域是独立的，父组件跟子组件之间的通讯可以通过prop属性来传参，但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件，那么A就要先告诉他们的爸组件，然后爸组件再告诉B。当组件比较多，要互相通讯的事情很多的话，爸组件要管他们那么多事，很累的。vuex正是为了解决这个问题，让多个子组件之间可以方便的通讯。 项目介绍待办事项中的一个事件，它可能拥有几个状态，未完成、已完成、已...