• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

其他 Echoyya、 1110次浏览 0个评论

码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14363272.html

关于VUE的项目,有个问题一直不是特别清楚 ,不同公司的项目,其项目结构,对应配置文件位置,及启动打包对应的命令等,都有所不同,近期通过查找相关资料及公开视频教学,整理一篇笔记,希望能帮跟我一样困惑的同学,拨开迷雾!

公司在创建项目的时候,都会倾向使用脚手架vue-cli,vue-cli 提供一个官方命令行工具,能够快速的搭建vue项目结构,同时可帮助配置各种文件目录及项目打包。其实就是一个基于webpack构建,可以让用户快速初始化一个项目的工具。

基本原理: vue-cli并非从无到有地凭空生成一个项目,而是通过(download-git-repo工具)下载/拉取已有的工程到本地,完成生成项目的工作。

而导致不同项目的配置及目录不同的原因之一,就是脚手架的版本不同导致,接下来具体讲述一下vue-cli 2.xvue-cli 3+,项目构建、运行、编译命令区别:

首先: cmd > vue -V,该命令查看的是vue-cli的版本,并非vue的版本

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

vue-cli 2.x vue-cli 3+
安装 npm install -g vue-cli npm install -g @vue/cli
创建项目 vue init webpack projectName vue create projectName
编译运行 npm run dev npm run serve
可视化项目管理工具 vue ui 默认地址:localhost:8000

创建项目

  • 搭建vue-cli 3项目前,如若已安装旧版本vue-cli,需先卸载旧版本vue-cli,再重新安装vue-cli 3+,2个命令可以升级到3以上

  • node版本要求: Node.js8.9 或更高版本 ,输入 node -v 查看node版本

  • 当vue-cli 版本达到 vue-cli4.5.0 以上,就可以创建vue3.0的项目,支持体验vue3.0的新特性,(3.x Preview)

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

目录结构

  1. vue-cli 3+的项目摒弃了 config 、 build 、 static 目录,新增了 public 目录,将根目录下的 index.html 放置在 public 目录下。

  2. 新增 vue.config.js (需手动创建)配置文件,可以在该文件中进行webpack的相关配置,例如 loader、开发环境等。

  3. 新增.browserslistrc 文件,指定项目的目标浏览器的范围,用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀,可以理解为浏览器兼容。

  4. 新增 babel.config.js 替代原先的.babelrc,具备和原先.babelrc一样的作用。

  5. src文件夹中多了 views 文件夹

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

编译运行

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

配置项

修改配置:vue-cli 3+的设计原则是“零配置”,移除(隐藏)配置文件 build 和 config 等目录,隐藏到哪里了?我们如何修改配置?

方法一:在隐藏的文件夹直接修改

node_modules\@vue\cli-service\webpack.config.js 对应的 node_modules\@vue\cli-service\lib\Service.js

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

方法二: (推荐)

  1. 根目录下创建vue.config.js,包括:常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等,详细配置可以看 官方文档

  2. config文件夹已经被移除,但是多了.env.productionenv.development文件,除了文件位置,实际配置起来和2.0没什么不同

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

方法三: 命令行vue ui 开启一个本地服务,打开可视化项目管理工具

简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

其他小知识点补充

  • 安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目:需要安装一个桥接工具@vue/cli-init, 即可使用vue-cli 2.x对应指令创建项目
npm install -g @vue/cli-init
  • vue-cli3.0+在项目创建最后会有一个保存当前配置的功能preset(预设),其实是在create新项目时,生成的插件配置项预设,也就是在项目中需要用到的插件安装成功之后,会生成一个关于preset的文件,当再次create新项目时,就不需要再去选择同样的插件,直接用预设安装即可。设置保存预设时系统会自动生成一个.vuerc的文件,一般在c盘,可查看之前做的预设配置

    简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别
喜欢 (0)

您必须 登录 才能发表评论!

加载中……