本文重点介绍Vue单页面应用的优化手段：异步加载面切换时加loading特效点击延迟inline manifest逻辑代码优化依赖包体积优化cdn引用Vue代码优化异步加载所谓的异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用。所以在router文件夹下 index.js 做如下配置组件优化由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体...
使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式先安装插件.Vetur+ Prettier + ESlint1、ESlint设置 文件.eslintrc.js中的配置 1 module.exports = {2 root: true,3 env: {4 node: true 5 },6‘extends‘: [7‘plugin:vue/essential‘,8‘eslint:recommended‘ 9 ], 10 parserOptions: { 11 parser: ‘babel-eslint‘12 }, 13 rules: { 14‘no-console‘: process.env.NO...
问题：代码上传服务器后，图片404，使用的font-awesome图标也是404 解决办法：如果你用了vue-cil，那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: ‘../../‘ 解释：文件最终会打包压缩为js。当运行的时候，css中的相对路径指向已经发生变化指向了根目录，所以出现加载错误的问题。下面是这个插件的解释。extract-text-webpack-plugin作用：该插件的主要是为了抽离...
在vscode中使用 ctrl+shift+p 打开一个选项窗口，然后找到配置用户代码片段，点击进去，输入vue.json找到对应的配置文件点击进去，然后粘贴下面配置替换即可。{// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2...
我们用Vue-Cli脚手架新建项目时会选择使用ESLint + Prettier来统一我们的前端代码风格，但这对新手使用有很大困难，严格的格式要求容易出现很多警告和错误，这时最好关闭ESLint + Prettier。1.在src下新建文件.eslintrc.js，并如下配置：module.exports = {root: true,env: {node: true},extends: [‘plugin:vue/essential‘,//关闭ESlint关键代码// ‘@vue/standard‘],parserOptions: {parser: ‘babel-eslint‘},rules: {//严格...
前置说明：日期：2018年6月5日环境：win7系统、vscode、vue2.5.0源代码 1）问题现象：D:\workspace\html5\everyday2\vue>npm run dev> vue@2.5.0 dev D:\workspace\html5\everyday2\vue> rollup -w -c build/config.js --environment TARGET:web-full-devrollup v0.50.0bundles D:\workspace\html5\everyday2\vue\src\platforms\web\entry-runtime-with-compiler.js → dist\vue.js...[!] Error: Could not load D:\workspace\html...
规范是为了让团队统一，提高代码阅读性、降低代码维护成本等，本文是记录一些在项目code review中常见的规范，仅供参考JS部分和渲染无关的数据vue中data的数据默认便会进行双向数据绑定，若是将大量的和渲染无关的数据直接放置在data中，将会浪费双向数据绑定时所消耗的性能，将这些和渲染无关的数据进行抽离并配合Object.freeze进行处理table中columns数据可以单独提取一个外部js文件作为配置文件，也可以在当前.vue文件中定义一个...
实际上我们应该在.eslintrc.js文件中修改 删掉 “@vue/prettier” 就可以了module.exports = {root: true,env: {node: true},extends: ["plugin:vue/essential"], // "@vue/prettier" rules: {"no-console": process.env.NODE_ENV === "production" ? "error" : "off","no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"},parserOptions: {parser: "babel-eslint"} }; 原文：https://www.cnblogs.com/Sab...
最近花了近半个多月的时间， 自己纯手工写了一个很小型的类angularjs/vue的mvvm 库. 目前已经用于公司一个项目。 项目托管在github https://github.com/leonwgc/link 也许有许多人觉得如今angularjs , react , vue , knockout ,avalon 等框架/库层出不穷， 为什么还要自己造一个相同（类似）的轮子？ 原因如下： 1 . 从最初knockoutjs 到现在用angularjs ，写了不少项目， 一直想自己写一个mvvm练练手,顺便熟悉巩固下最基础的html,...
知识点：1、vue基本代码结构2、插值表达式 v-cloak v-text v-html v- bind(缩写为:) v-on(缩写为:@) v-model v-for v-if v-sow3、事件修饰符 ：.stop .prevent .capture .self .once1、基本代码结构<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--cdn镜像快速导入Vue包--><script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <!--将来new的...
文件-首选项-用户代码片段{"Print to console": {"prefix": "vue","body": ["<template>"," <div class=\"page\">\n"," </div>","</template>\n","<script type=\"text/ecmascript-6\">","export default {"," components: {\n"," },"," data() {"," return {\n"," }"," },"," methods: {\n"," }","}","</script>\n","<style scoped lang=\"stylus\">","</style>","$2"],"description": "Log output to console"} } 原文：https:...
出处：https://github.com/ZSI2017/blog/issues/14yorkie 的 github：https://github.com/yyx990803/yorkiepre-commit钩子，代码质量检查：在 vue-cli 3.x 版本中，已经使用尤大改写的yorkie，yorkie实际是fork husky，然后做了一些定制化的改动，使得钩子能从package.json的 "gitHooks"属性中读取原文：https://www.cnblogs.com/cag2050/p/10518074.html
1. 打开菜单 -> 首选项(Perferences) -> 插件控制(Packpage Control)，输入"Install Package"2. 等待程序进入插件管理功能，再输入插件名称："HTML-CSS-JS prettify"3. 点击安装插件 "HTML-CSS-JS Prettify" 。4. 插件安装成功后，在需要格式化的HTML代码中，选中代码，然后按 "Ctrl+Alt+H" 对代码进行格式化。也可以右击菜单选择"html css js prettify"格式化代码 注意：(1). 使用此插件需先安装node.js，windows默认安装在C盘，如...
总结项目用到的一些处理方法，用来解决数据处理的一些实际问题，所有方法都可以放在一个公共工具方法里面，实现不限ES5，ES6还有些Vue处理的方法。都是项目中来的，有代码跟图片展示，长期更新。 1.获取两个给定日期之间所有日期集合/*** 传入一个日期字符串（不要时间，如果带时间的话在修改方法）**datestr:形如‘2017-06-12’的字符串（如果是2017.06.12格式在修改代码，这里没有做通用）**return Date 对象 **/ getDate (dates...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./Kvue.js" type="text/javascript"></script></head><body><div id="app">{{ message }}fsdafdsa<div><span><span><span> {{ message }}</span></span></span></div>{{mydata}}<div v-html="...