vue-cli

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。 主要写一些 官方手册 上没有写，但是实际开发中会遇到的问题，需要一定知识基础。 涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 1、异步加载组件时，会产生 polyfill 代码冗余 2、不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map

涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 正文： polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 异步加载组件时，会产生 polyfill 代码冗余 不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 不支持全局函数（如：Promise、Set、Map），Set 跟 Map 这两种数据结构应该大家用的也不多，影响较小。但是 Promise 影响可能就比较大了。 不支持实例方法（如：'abc'.include('b')、['1', '2', '3'].find((n) => n 等等）

基于vue-cli4构建的图表类web app 写在前面 项目介绍 写在前面 从 vue-cli3 开始， vue-cli 脚手架工具有了一个很大跨越，带来了全新的开发体验，和简约的配置方案，甚至有了可视化的界面操作，这一波真是，天秀！ 具体到细节，主要有以下几点体验升级： 1、创建一个项目 vue create hello-world UI 界面操作 vue ui 2、创建项目时的配置选项，可以保存为 preset 文件。 被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset 选项，可以编辑这个文件。 在项目创建的过程中，你也会被提示选择 preset 3、插件 vue-cli 使用了一套基于插件的架构，这与老的 vue-cli 有着 很大的区别 。 老版本的 vue-cli 要想在项目结构， webpack 配置，第三方功能/插件引入上，有所改变的话，没有别的办法，只能自己动手； 新版本 vue-cli 就不一样了，你可以自己写插件，DIY各种功能，也能搜索别人的插件来使用，真的是丝滑了很多。 4、webpack配置 引入了 webpack-chain ，我们可以使用链式的 api 来修改 webpack 配置。 5、环境变量和模式 默认有一个 vue.config.js 配置文件，

一、简介 Vue.js 是什么 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架 。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现 响应的数据绑定 和 组合的视图组件 。 Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的 vue.js的特点: 易用： 已经会了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！ 灵活： 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化 二、环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/） $ npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli npm install vue-cli -g vue init webpack my-project npm install 生成package.json npm run dev 本地运行 或 npm run build 上线(生成dist文件夹) vue生命周期 beforeCreate => el与data并未初始化 => 可以在这加loading事件。 created => 完成了data数据的初始化。 => 做一些初始化，实现函数自执行。 beforeMount => 完成了el和data初始化 mounted => 完成挂载 => 向后端发起请求，取回数据，配合路由钩子做事 beforeDestory destoryed => 当前组件已被删除，清空相关内容。 beforeUpdate updated props -> 声明父组件中传递给子组件的数据 data -> 声明组件中数据 components -> 声明 要使用的组件名称，要 提前引入 本组件 import。。。 methods -> 定义函数的方法 与 @click等一起使用 computed -> 计算某一（未声明）属性，值为该函数的返回值 watch -> 观测属性的变化执行相应的操作，（与computed区别在于，该属性变化未必改变别的属性，有可能执行什么函数操作） filters ->

一、安装Node 安装Node 12.14详细地址请点击这里！ 二、配置Vue环境 # 安装vue npm install vue -g # 安装vue-cli npm install vue-cli -g # 查看是否安装成功 vue -V 来源： CSDN 作者： 蒜丶 链接： https://blog.csdn.net/m0_37048012/article/details/103651224