Vue-Cli4与Vue-Cli2区别浅谈

当时学习 Vue-Cli 的时候看的是 Vue-Cli2 的相关教程，当把 package.json 上传 github 的时候提醒有安全问题，于是准备使用最新版的 Vue-Cli ，我一直认为才更新到 Vue-Cli3，没想到都到Vue-Cli4了
可能有很多特性在 Vue-Cli3 时就有了，做个笔记记录一下

创建工程

Vue-Cli4文档推荐以下两种方式创建项目

vue create my-project
# OR
vue ui # 可视化操作

如果仍然需要使用vue init webpack初始化项目的话，则需要安装cli-init，但是拉取的仍然是Vue-Cli2.0版本

npm install -g @vue/cli-init

启动服务

Vue-Cli4中使用npm run serve运行开发模式，其配置为

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"}

也可以使用vue ui进行可视化操作

浏览器兼容

package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件)，指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer用来确定需要转译的JavaScript特性和需要添加的CSS浏览器前缀。查阅此处了解如何指定浏览器范围

代码拆分

    // route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload/* webpackChunkName: "about" */

vue-router提供了一个About组件示例，为此路由生成单独的块，访问路由时延迟加载，可参阅 Prefetch与Preload

配置相关

Vue-Cli4没有了配置webpack的config与build目录，配置由vue.config.js定义，vue.config.js文件定义于根目录，相关配置信息参阅 Webpack配置

配置代理

module.exports = {devServer: {proxy: {'/': {target: 'http://www.example.com',ws: true,changeOrigin: true,pathRewrite: {}}}}
}

Vue-Cli4笔记相关推荐

菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
验证：使用node 12.18.4版本安装vue cli4没有问题（先卸载vue cli2再安装）
使用node 12.18.4版本安装vue cli4没有问题
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...

Vue-Cli4笔记