Cool的博客

1.安装mockjsnpm install mockjs -D安装mockjs在你的开发依赖上，因为你生产环境用的是正式的接口，安装在开发依赖上可以减少你包的大小。2.安装axiosnpm install axiosvue ajax 请求库。3.创建src/http 目录增加api.js对axios封装import axios from 'axios'// axios.defaults.headers.get['Content-Type'] = 'application/x-www-f

以前是可以初始化成功的，今天就突然不能初始化了！初始化vue2遇到问题解决方法此问题的解决办法是改为离线创建。我们需要下载github仓库中的vue-templates/webpack，然后解压到本地。下载地址为：https://github.com/vuejs-templates/webpack，下载之后，解压到本地用户目录下的.vue-templates目录下。下载之后的压缩包为webpack-develop.zip，我们解压之后，需要更改目录名为webpack。用户目录下的目录为.vue-

本篇文章针对于 vue2，目前正在基于 vue3 做一个开源的脚手架，如果有感兴趣的同学，可以来这里贡献代码。1.分解需求技术栈 考虑到后续招人和现有人员的技术栈，选择 Vue 作为框架。 公司主要业务是 GIS 和 BIM，通常开发一些中大型的系统，所以 vue-router 和 vuex 都是必不可少的。 放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。 工具库选择 lodash。 建立脚手..

子组件 MyBar<template> <div>　　　　　<slot name="two" :user1='usname'></slot>//　有名字的插槽 <slot :user='usname'></slot> //无名字插槽 :user 自己命名的属性，'usname'就是data里的值　　　　　　//通过属性把数据放到插槽里面 </div> </template&g.

组件： vue-directive-image-previewer 1.在vue前端控制台Terminal中输入以下命令 npm install vue-directive-image-previewer -D1 2.在main.js中添加以下代码 //图片放大组件import VueDirectiveImagePrev...

VueCLI3--运行单个*.vue文件1.安装全局扩展npminstall-g@vue/cli-service-global2.运行.vue文件vueserve文件夹名注意: 如果已经安装过可以直接运行vue serve 文件夹运行时, 会自动生成一个node_modules文件夹Vue官方apiJSON.parse(JSON.stringify(row))JSON.parse('要转换的数据')JSO...

两周前（202.02.17），vite2.0 发布了，作为使用了浏览器原生 ESM 为下一代前端工具，vite 2.0 相较于 1.0 更加成熟。在此之前笔者就开始关注这类「新型」的前端工具。这次趁着 vite 2.0 发布，也成功将一个基于 vue-cli(-service) + vue2 的已有项目进行了迁移。迁移工作比较顺利，花了不到半天时间。但整个迁移过程中也遇到了一些小问题，这里汇总一下，也方便遇到类似问题的朋友一起交流和参考。项目背景在介绍具体迁移工作前，先简单介绍下项目情况。目前该

对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的，我们可以通过 递归 方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。当然，在 Vue 中，组件可以递归的调用本身，但是有一些条件：该组件一定要有 name 属性 要确保递归的调用有终止条件，防止内存溢出为了方便理解递归组件，我写了一个小小的 Demo：

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册 自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建directives/index.js文件importcopyfro...

译者推荐：Typescript 和 Vue 都是现在前端必备的知识，本文基本覆盖了目前 Vue 2.x 的一些基础用法的 Typescript 版本实现，感兴趣的了解一下，更好的迎接 Vue 3.0译者根据文章中提到的知识点，自己写了一个 demo，已放到 Github 地址 ，建议大家可以动手实战一下，如果遇到什么问题，可以留言评论或者提 issueVue 是一个惊人的，轻量的渐进式前端框架。因为 Vue 是灵活的，所以用户不需要使用 Typescript。但是不像 Angu...

问题背景：Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：pexels-photo-1211847.jpeg安装：npm .

背景：由于需要将应用部署到线上开发环境、线上测试环境、线上预发环境、线上生产环境，而每个环境的访问地址是不同的。如果每次更改请求地址未免有些繁琐，就考虑在本地进行一次性配置。代码管理工具：git代码分支：1.0-dev // 开发分支1.0-test // 测试分支1.0-pre // 预发分支1.0 // 正式分支应用部署服务器：阿里云服务器一、安装依赖：cross-env使用cross-env解决跨平台设置环境变量的问题安装：np...

1.找到config 下的index.js 将里面build下的‘/’，改为 ‘./’，2.找到build 下的utils 里面的build 做如下修改if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath:'../../'})} else {return ['vue-style-loader'].conc.

在上一篇文章Webpack配置全解析介绍了Webpack中loader和plugins的一些基本用法，当loader和plugins使用较多后项目也会越来越耗时，因此这次我们继续学习如何优化webpack的配置来让我们的项目运行的更快耗时更短。　　本文将从缩小文件搜索范围、减少打包文件、缓存和多进程四个方面来了解Webpack的优化配置。缩小文件搜索范围　　Webpack会从Entry入口出发，解析文件中的导入模块语句，再递归解析；每次遇到导入语法时会做两件事情：查找导入模块的位置，比如re

一、下载vuex-class下载地址：https://www.npmjs.com/package/vuex-class$ npm install --save vuex-class# or $ yarn add vuex-class官方示例：import Vue from 'vue'import Component from 'vue-class-component'import { State, Getter, Action, Mutation,..

最后更新于2018-06-30，技术文具有时效性，请知悉 我知道你们早就想用上 vue + ts 强类型了还有后续 vue + typescript 进阶篇安装vue-cli 安装ts依赖 配置 webpack 添加 tsconfig.json 添加 tslint.json 让 ts 识别 .vue 改造 .vue文件什么是typescriptTypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由

项目的package.json 文件列出了项目所依赖的插件和库，同时也给出了对应的版本说明，但是在版本说明前面还有个符号：'^'（插入符号）和'~'（波浪符号），总结了下他们之间的区别：例如：'~'（波浪符号）:他会更新到当前minor version（也就是中间的那位数字）中最新的版本。放到我们的例子中就是："exif-js": "~2.3.0"，这个库会去匹配更新到2.3.x的最新版本，如果出了一个新的版本为2.4.0，则不会自动升级。波浪符号是曾经npm安装时候的默认符号，现在已经变为了插

简介这是基于 vue-cli4 实现的移动端框架，其中包含项目常用的配置，组件封装及webpack优化方法，可供快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios + less + postcss-px2rem源码 github.com/Michael-lzg…// 安装依赖npm install// 本地启动npm run dev// 生产打包npm run build复制代码在一两年前，vue-cli3已经声驾到3.0+版本，

前端工程性能优化一说意义深远悠长，本章主要介绍除了一些基础优化外如何实行路由懒加载、Gzip加速、CDN加速，让网页飞的快一些。基础优化老生常谈的一些：不要在模板中写复杂的表达式 慎用watch尤其是deep 合理的使用v-if/v-show/v-for 善用keep-alive 使用Object.freeze() ... 这里不再细开展~主要说下以下几点：一、 开启GZIP体积对比图：1541KB vs 466KB耗时对比图：333ms vs 225ms操作步骤：

官网：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

最近用webpack热加载项目时经常挂掉，并报95% emittingFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory1此类错误，网上查了下，这是由于编译的时间内存泄漏,因为前端项目如果非常的庞大，webpack 编译时就会占用很多的系统资源，如果超出了V8对 Node ...

前言之前使用过 Vue 开发后台、中台项目，也做过移动端 H5，弄过一点小的前端架构。每做一个项目都会收获了不一样的经验和理解。下面我把这些点点滴滴的经验总结下来，做一个系列的文章分享和阶段性的总结。常规操作，先点赞后观看哦！你的点赞是我创作的动力之一！概览问题我将从 16 个方面来论述 vue 开发过程中的一些技巧和原理。当然由于篇幅有限，先论述前...

不管是工作需要还是面试加分，vue技术栈已经成为了前端开发工程师必备的技术点。接下来，我将从零开发一套完整的vue项目开发环境，提供给需要的同行小伙伴观看也方便自己以后复习。最美的自己仓库地址项目源码地址：github.com/tangmengche…目标彻底 Vue 官方脚手架 Cli 帮我们初始化做了那些事，通过webpack4.x帮我们完成了哪些常...

前言:本文基于vue 2.5.2,webpack 3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化）vue是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。1. 新建 vue 项目vue init webpack vue_multiple_testcd vue_multiple_testnpm install2...

错误截图：解决方案：全局安装increase-memory-limit命令行cmd ,dos窗口运行：cnpm install -g increase-memory-limit，进入项目文件夹，运行：increase-memory-limit暂可解决问题。...

data：@Provide() loadings: any = { fromLoading: true }使用地方：this.loadings.fromLoading = false; this.$nextTick(() => { this.loadings.fromLoading = true;...

参数后面使用 ？id 后面加个 ‘ ? ’ ，将 id 设置为可选参数{ name: "index", path: '/p/:id?', component: resolve =>void(require(['../components/admin/layout/index.vue'], resolve))}// =={ path: '/p/:id?...

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。1.toast.js// 1.定义插件对象var Toast = {}// 2.vue开发插件有一个公开方法 install// 传一个固定的Vue和初始化配置optionsToast.install = function(Vue, options...

在Vue-cli 工程中，webpack自动启动了热更新，如果是多页面工程，当页面太多时，启用热更新变慢，可在webpack.dev.conf.js中devServer{}添加inline：false关闭热更新.devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true, ...

1.mixin    1.全局混合2.全局API    1.Vue.extend()扩展实例构造器：https://blog.youkuaiyun.com/bbsyi/article/details/82658526    2.Vue.nextTick()dom结构改变后执行    3.Vue.directive()指令    4.Vue.filter 过滤器    5.Vue.componen...

最近在做项目的时候，研究了mixins，此功能有妙处。用的时候有这样一个场景，页面的风格不同，但是执行的方法，和需要的数据非常的相似。我们是否要写两种组件呢？还是保留一个并且然后另个一并兼容另一个呢？ 不管以上那种方式都不是很合理，因为组件写成2个，不仅麻烦而且维护麻烦；第二种虽然做了兼容但是页面逻辑造成混乱，必然不清晰；有没有好的方法，有那就是用vue的混合插件mixins。混合在...

1.封装一个vue ripple的插件。已经封装好了！可参考https://segmentfault.com/a/11900000069313672.使用，引入组件&lt;button type="button" class="btn"&gt; 这个是按钮 &lt;ripple class="ripple" :center-ripple="fals...

1.在阿里图标http://iconfont.cn中找到自己需要的图标添加到购物车，或者添加自己的字体项目。下载2.解压使用这4个文件3.增加iconfont.less文件，同一目录下//url为字体路径@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1491967237541'); /* IE...

# src 代码目录 #assets 静态资源 #font 字体图标 #index.less 公共样式 #variable.less公共变量 #其他图片文件 #components 组件 #ripple 点击效果插件 #loader-picker.vue 加载提示组件 ...

keep-alive 使组件或路由切换过程中将状态保留在内存中，防止重复渲染DOM。在2.1.0版本以前Vue中&lt;!-- 注意：transition中只能一个元素结构，所以这里要分开写 --&gt;&lt;transition :name="transitionName"&gt; &lt;keep-alive&gt; &lt;router-vi...

Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时，官方文档中的方法就显得有些不够清爽了。 全局组件  在Vue官方文档中介绍的是使用Vue.component(tagName, options)来创建一个全局组件。但是这种方法是与根实例写在同一个文件中，如果要同时注册多个全局组件，就会使根实例文件过重，因此使用Vue.use()来“安...

最好基于vue2.0PC端：因为用过的是饿了么UI，所以比较以饿了么UI为基础element UI 饿了么UI 支持vue2.x 80分 优点：组件的API方法、属性等封装的较为完善 缺点：样式有些生硬，不够炫酷美观 N3 N3 支持vue2.x 70分 优点：组件操作几乎都有动画效果，组件较为丰富，比饿了么的操作更为人性化，比如表单部分，相较于elementUI可以直...

github:https://github.com/zack24q/vue-navigation  需要 vue 2.x 与 vue-router 2.x。  导航默认行为类似手机APP的页面导航（A、B、C为页面）：A前进到B，再前进到C； C返回到B时，B会从缓存中恢复； B再次前进到C，C会重新生成，不会从缓存中恢复； C前进到A，A会生成，现在路由中包...

对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;//使用官方vue-cli脚手架书写&lt;template&gt;　　//观察数据为字符串或数组　　 &lt;input v-model="example0"/&gt;　　 &lt;input v-model="example1"/&gt;　　/当单...

动态路由：　　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据　　这就要用到动态路由跟路由传参了！首先我们来了解下router-link这个组件：　　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以...