Vue CLI

文末福利资源更新 本文将重点介绍4个可以用来提高页面渲染速度的CSS技巧。 1. Content-visibility 一般来说，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染时间。 这个功能是最新增加的功能之一，也是对提高渲染性能影响最大的功能之一。虽然 content-visibility 接受几个值，但我们可以在元素上使用 content-visibility: auto; 来获得直接的性能提升。 让我们考虑一下下面的页面，其中包含许多不同信息的卡片。虽然大约有12张卡适合屏幕，但列表中大约有375张卡。正如你所看到的，浏览器用了1037ms来渲染这个页面 。 下一步，您可以向所有卡添加 content-visibility 。 在这个例子中，在页面中加入 content-visibility 后，渲染时间下降到150ms，这是6倍以上的性能提升。 正如你所看到的，内容可见性是相当强大的，对提高页面渲染时间非常有用。根据我们目前所讨论的东西，你一定是把它当成了页面渲染的银弹。 content-visibility 的限制 然而，有几个领域的内容可视性不佳。我想强调两点，供大家参考。

前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢！ 根据首屏加载资源文件过大，进行一下优化： 1. 路由懒加载 结合Vue的异步组件再结合webpack的代码分割，我们可以轻松的实现路由懒加载。 ️vue-cli 3.0 模式就使用了Babel，我们需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。 // 安装插件 syntax-dynamic-import cnpm install --save-dev @babel/plugin-syntax-dynamic-import // 修改babel.config.js module.exports = { "presets": [ "@vue/app" ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }, "syntax-dynamic-import" ] ] } // 修改路由组件的加载（router/index.js） { path: '/', name: 'home'

vue-cli 实战总结 https://juejin.im/post/5a1a6a6551882534af25a86b http://www.runoob.com/vue2/vue-tutorial.html 来源： oschina 链接： https://my.oschina.net/u/437465/blog/3035568

1. Vue 简介 详细内容可以参考官网 Vue.js 1）兼容性 Vue 不支持 IE8 及以下版本 ，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 目前 ECMAScript 6 已经渐渐流行起来，但是有一些浏览器还不完全支持，所以在使用 ECMAScript 6 时，可以通过 Babel转码器 进行转换 2）使用方式 （1） 直接用 <script> 引入 直接在 html 页面中引入 <script> ， Vue 会被注册为一个全局变量。 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 这个适合单独的 H5 页面的使用 （2）命令行工具 vue-cli 适合构建大型应用，配合 npm ， npm 能很好的和 webpack 等模块打包器配合使用。 # 全局安装vue最新版 $ npm install vue 2. 环境搭建 1）安装 node.js 傻瓜式安装，官网下载 node.js ，一路点击 下一步 安装。 打开 命令行工具 ，输入 node -v ，如果显示 node 版本号 ，则表示安装成功。 **注意：**官网安装的 node.js 后，就已经自带 包管理工具npm 2

npm 安装vue脚手架报错 报错详情 npm ERR! Unexpected end of JSON input while parsing near '...TuHxXJaknDulF3AdSBoul' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2019-12-22T03_12_06_342Z-debug.log 最后解决方法 npm cache clean --force npm i -g npm 不行再试一遍这些 npm ls --depth 0 -g // 看看哪些失效了 npm prune -g // 修剪下全局包 npm rebuild -g // 重建下全局包 npm update -g // 更新下全局包的版本 npm cache clear --force -g // 删除全局包的缓存（慎重） 对了重装是没有用得（我试过了） 再次安装 C:\Users\xxx>npm install vue-cli -g npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm

起因 前公司商城App项目使用的是H5开发，有微信公众号、Ios和Android三个版本，H5版本是自己写的一套框架，已经用了有些年头了，承载不下不断涌现出的新需求。而Ios和Android端通过webview加载h5文件显示，App的原生功能和H5交互的代码写得有些凌乱，在我接手项目后老板完全没给重构的时间，所以只能在做新功能的时候顺手一点点的重构。后来要做一个与原先的商城相对独立的新商城，而且新商城的入口放在老商城中。因为时间紧任务重，使用React Native或者weex的话需要将原项目重构后再引入，考虑到可能存在的各种各样的坑，不太可能使用这些解决方案。使用vue或者react构建一个web项目再嵌入原有的app项目中是最稳妥的。最终因为vue的名字在字符数和音节数量上占了绝对的优势而入选。 vue项目构建 预备 vue中文文档: https://cn.vuejs.org/v2/guide/instance.html 构建工具环境 nodejs: http://nodejs.cn 构建工具vue-cli: https://github.com/vuejs/vue-cli 如果是第一次接触vue或者在已有项目中引入vue时可以选择用CDN版本或者下载js文件 vue的生产版本js： https://vuejs.org/js/vue.min.js 引入CDN版本：

项目地址：https://github.com/wanghao12345/elm 前言 本项目采用官方提供的vue-cli脚手架进行搭建，因此在正式进行项目的搭建前，需要自行安装node、cnpm、git等环境，在这里不再详细介绍这些环境的安装。如果有不会的，可以去网上查找相关的文章以及教程进行安装，当然也可以给我留言，我会尽快给你解答的。 github创建项目 首先在github中创建elm仓库 建立create-environment分支并且切换到create-environment分支 使用git将elm下载到本地 vue-cli脚手架构建项目 首先使用命令行工具运行：cnpm install --global vue-cli（安装全局vue-cli） 命令行工具放到elm项目文件夹的同级，然后运行：vue init webpack elm （使用vue-cli创建一个基于webpack模板的新项目），点击回车运行命令后会产生如下一些询问，照着下图设置即可 安装完成后会有如下的提示： 此时说明我们的vue项目环境已经搭建完毕，运行命令：cd elm，进入项目，然后再运行：npm run dev或者cnpm run dev就可以将项目跑起来了，根据提示在浏览器输入：localhost:8080就可以看到如下显示效果 项目搭建结束 项目搭建到这里就结束了

一、搭建Vue项目的前提的环境 1.1、node.js 的的下载安装和环境变量的教程链接： Nodejs的下载和安装以及环境配置 1.2、Webpack （1）WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格 式供浏览器使用。 （2）注意node的版本，只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本。 　1、下载安装包之后直接点击安装即可。windown+R测试安装成功的界面如下： 2.安装淘宝镜像（类似于阿里云的maven中央仓库镜像） 安装时间有点长 安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org 验证命令：cnpm -v 3.安装webpack 1、利用 cnpm安装webpack 命令行语句为 cnpm install webpack -g 。时间略长。测试安装成功的界面如下： 4.接下来就是 全局安装vue-cli 。时间略长请耐心等待 安装语句为： cnpm install --global vue-cli 验证命令:vue -V (V要大写)

分析： https://kuangpf.com/vue-cli-analysis/create/basic-verification.html vue-cli-service : https://blog.csdn.net/weixin_34080903/article/details/88667618 vue-cli: 举个插件的栗子： 传送门： vue-cli-plugin- element 尽管我觉得vue -cli-plugin- element可以做得更好，比如自定义选择需要添加的组件，自定义主题色（vue ui的交互页面其实是提供了颜色选择器的，如下图），模板选择等 2. webpack,vue-cli,vue都使用到了插件机制。面向接口编程，确实是很优秀的想法。这个也是插件模式的一种体现插件（Plugin）模式向用户提供了一种扩展程序的接口，用户可以在程序本体之外，按照指定接口编写插件来为程序增加功能 cli插件 https://blog.csdn.net/dengdongxia/article/details/87923329 https://juejin.im/post/5b8f586c5188255c9d55eedf#comment https://juejin.im/post/5cedb26451882566477b7235 https://juejin.im

自定义自己的vue-cli模板 在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。 例如下面是我常用构建项目的目录。 src ├─api //接口 ├─assets //图片 ├─components //公用组件 ├─css //样式 主要是scss ├─js //第三方以及工具类 ├─page //页面 ├─router //路由 └─store //vuex 下面说下怎么自定义自己的vue-cli模板 fork一个自己的模板 从 https://github.com/vuejs-templates/webpack fork 一个库，再提交自己的修改到【自己的分支】，因为我们大部分内容还是在这个基础上做修改的。 关于vue-cli的源码分析可以参考下这个文章 从vue-cli源码学习如何写模板 vuejs-templates/webpack 目录如下， │ .gitignore │ circle.yml │ deploy-docs.sh │ LICENSE │ meta.js //该文件必须导出为一个对象, 用于定义模板的 meta 信息 │ package.json │ README.md │