大佬教程收集整理的这篇文章主要介绍了Vue-Cli4笔记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue-Cli4与Vue-Cli2区别浅谈

创建工程

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-Cli4笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。