vuex

关于引入nuxt到项目中的思考 为什么前端要引入同构SSR a.为了更好的seo和首屏加载速度 b.引入BFF层，为前端赋能，提升前端解决问题的能力 nuxt带来的优点 1.更为清晰严格的结构:nuxt类似于egg等框架提供了一套结构和约束机制，所以，基于nuxt基础上创立项目，结构会更清晰一些。 2.简单易上手，开箱即用，集成了ui框架，测试框架等。 npx create-nuxt-app appName 一套下来就可以直接运行起来，迁移成本较低 关于同构SSR 虽然使用了服务端渲染，但是这个只能叫同构SSR，和传统的服务端渲染还是有区别的。目前同构SSR的本质就是集成页面组件，路由，前端状态，在服务端中运行生成快照，将生成的快照HTML传给客户端。需要注意的是，由于同构的这种快照所需的计算量远大于传统服务端渲染，所以单机性能上，可能要弱于传统服务端渲染。 同构SSR的实现得意于虚拟DOM的出现，虚拟DOM的最大好处并非Diff算法而是为前端赋能，把HTML的DOM抽象化，可以在服务端、IOS、安卓甚至智能家电上运行。 同构SSR的实质是当用户首次请求时，通过node端生成一个HTML快照给前端，之后用户在当前页面上的操作，其实都是一个SPA的操作交互，前端的路由交互还是依靠history路由去处理，而非传统路由，所以其实还是一个“ SPA ”。这样的处理，可以在保证首屏速度时

前段时间写了一篇 前端vue项目实现mock数据方式 的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。 初始化vue项目 这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的方式。 vue create vue-koa2-demo 复制代码 前提是安装了vue-cli的脚手架，我电脑安装的是vue-cli3的版本。按照要求一步一步选择后，记得选择安装vuex，后续要使用，启动项目。 koa2项目初始化 前端项目弄好之后，开始安装koa mkdir koa-demo cd koa-demo npm koa koa-router koa-cors 复制代码 安装工作完成后，在项目根目录下新建一个server.js. let Koa=require( 'koa' ) let Router=require( 'koa-router' ) let cors=require( 'koa-cors' ) let fs=require( 'fs' ) const app=new Koa() const router=new Router() router.get( '/getData' ,async ctx=>{ // 允许cors跨域请求

通信方式： > props（常用） > props和$emit（常用） > .sync（语法糖） > model（单选框和复选框场景可以使用） > $attr和$listeners（组件封装用的比较多） > provide和inject（高阶组件/组件库使用比较多） > eventBus（小项目中使用就好） > Vuex（中大型项目推荐使用） > $parent和$children（推荐少用） > $root（组件树的根，用的少） > 其他通信方式 一、props 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。 在使用prop传参时需要注意： vue的设计理念是单向数据流，不建议在子组件直接更改父级的数据。 未在父组件data中声明的对象属性，子组件无法获取更新内容。 数组的变化和更新，取决于vue重写数组方法是否有实现数据监听功能。vue有两种观察数组的方法：变异方法（push、pop、shift、unshift、splice、sort、reverse）和非变异方法（filter、concat、slice），变异方法可以修改原数组，非变异方法不可以修改原数组，但是非变异方法可以用新数组替换旧数组来实现数据的重新渲染。 // Father组件 <template > <div class = "father" > <Child :msg =

abp框架Excel导出——基于vue 目录 abp框架Excel导出——基于vue 1.技术栈 1.1 前端采用vue，官方提供 1.2 后台是abp——aspnetboilerplate 2. Excel导出需求 3. 升级日志Excel导出 4. 技术实现方案 4.1 后台 4.1.1 EPPlus导出静态方法 4.1.2 生成升级日志列表 4.1.3 将升级日志列表放到Excel导出静态方法中去 4.1.4 abp框架中前后端分离模式文件流传输 4.2 前端 4.2.1 vuex的action中添加请求方法 4.2.2 upgradeLog.vue升级页面 4.2.2.1 增加下载方法 4.2.2.2 点击导出报表按钮调用下载方法 5. 最终效果 5.1 点击按钮 5.2 报表展示 6.小结 1.技术栈 1.1 前端采用vue，官方提供 UI套件用的是iview 1.2 后台是abp——aspnetboilerplate 即abp v1， https://github.com/aspnetboilerplate/aspnetboilerplate。 下载时选择的是net core 3.1。 2. Excel导出需求 管理后台系统，主要以图表统计形式归档数据，用户经常会有Excel导出报表的需求。可以以文件形式保存，更加地直观，符合使用习惯。 3. 升级日志Excel导出

mutations const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) console.log(store.state.count) //0 store.state.count = 3; console.log(store.state.count) //3 来源： oschina 链接： https://my.oschina.net/u/2285087/blog/4318919

首发于： https://lonhon.top 最近遇到的一个场景，由于项目的权限系统+路由控制中用到了vuex存储全局数据，在登出时需要将所有数据进行重置or清空。 比如 store.state.username初始为'' => 登陆后变成'张三' => 登出后还是'张三'，此时需要置为''. 解决方法0.1 actions.resetVuex = function() { store.commit(state.a, null) store.commit(state.b, null) store.commit(state.c, null) ... } store.dispatch('resetVuex') 一开始的想法是创建一个action实现vuex重置，在登出时调用该放方法即可。 ** 但是 ** 这种方法需要手动维护，而且一个个写上去感觉太low了，随后又想到可以通过遍历store.state进行所有重置，但是这种方法有一个弊端就是如果重置的值有不同的初始值的话，赋值的时候就很麻烦了。 总之，上面的方法和搜索出来的方法都不尽人意，但是迫于无奈就先用着第一种了。 解决方法1.0 就在上述方法写到一半的时候忽然灵光一闪，我特么之前为了store的数据持久化不被页面F5重置还专门把数据放在SessionStorage这些本地存储里，现在一个个去重置感觉像个睿智，**

使用技术 LR.APP 是基于uni-app开发的多端APP/小程序系统，设计理念是解决多端开发问题，使用时，开发者仅需一套代码，即可编译到iOS、Android、H5、小程序等多个平台。 LR.APP封装了跨端兼容的组件和api，如果你不熟悉uni-app框架，可以直接使用 Vue.js 的开发模式进行二次开发，以 .vue 单文件的形式来编写每一个App 页面。 为降低上手难度，基于Vue.js的LR.APP支持组件化开发，且内置了 Vuex 等常用工具库。同时，LR.APP还封装了一套 UI 组件库，包括了「公司/部门/职员选择」、「文件上传」等常用的 OA 业务组件，方便二次开发。 APP展示 开发进度 目前 learunAPP 已经开发完成，可以在微信公众号上体验 （ 力软信息 ） ，APP已开发基本的工作流程，包括流程发起和数据看板、在线消息等。 开发工具 HBuilder X.该工具提供从起步到开发到调试到发布的全过程支持，无需额外配置任何环节，内置模拟器可以直接模拟运行，电脑 USB 连接手机即可真机调试，编写代码时还会提供智能代码提示，有效提高开发效率。 来源： oschina 链接： https://my.oschina.net/u/4148883/blog/4314465

1.安装jQuery和jQuery-ui npm i jquery s npm i jquery - ui s yarn install 2.在vue.config.js中进行配置 // webpack build externals const prodExternals = { vue: 'Vue' , 'vue-router': 'VueRouter' , vuex: 'Vuex' , axios: 'axios' , jquery: 'jquery', // 新添加 $: 'jquery' // 新添加 } 3.在需要引入的组件中引入 <script> import jsplumb from 'jsplumb' import $ from "jquery" // 需要注意的是，在jquery-ui引入的时候， // 直接写成 import juqery-ui 是没有效果的，只能直接写到具体的方法 import 'jquery-ui/ui/widgets/draggable' import 'jquery-ui/ui/widgets/droppable' export default { name: 'test1' , components: { jsplumb }, mounted(){ /* global jsPlumb */ var instance = jsPlumb