项目脚手架VueCLI2&3
![](/theme/default/default/images/main/eye-open.png)
我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。
![](/theme/default/default/images/main/icon-link.png)
![](/theme/default/default/images/main/icon-jing.png)
项目脚手架VueCLI2&3摘要
VueCLI简介
VueCLI是一个基于webpack的命令行工具,用于快速生成Vue.js项目。它封装了静态资源的模块化打包、本地热加载服务、文件预处理和转译、自动化测试和静态检测等功能,并支持快速零配置的原型开发。
VueCLI与webpack之间的关系
VueCLI基于webpack实现,因此需要安装Node.js和npm。VueCLI 4.x要求Node.js版本至少为v8.9。
VueCLI版本
VueCLI经历了多个版本迭代,包括VueCLI2.x、VueCLI3.x等。VueCLI3.x相较于2.x隐藏了webpack配置,并提供了UI界面化的配置服务,更易于上手。VueCLI4.5以下对应Vue2,4.5以上对应Vue3。
VueCLI2快速搭建项目
要使用VueCLI2搭建项目,需要Node.js(v8.9+)、npm和webpack。通过`vue init webpack vuecli2demo`命令初始化项目,随后需通过命令行进行一系列配置选择,如项目名称、描述、作者等。若遇到网络缓慢问题,可更换npm源至国内镜像。
VueCLI2目录文件详解
VueCLI2项目目录包括webpack配置的build文件夹、环境变量配置的config文件夹、存放资源代码的src文件夹、webpack不处理的静态资源文件夹static、打包结果文件夹dist、第三方类库安装目录node_modules等。
Vue CLI3.x的安装
Vue CLI3.x的安装需要Node.js(v8.9+),通过`npm install -g @vue/cli@3.9.3`全局安装。使用`vue create`命令创建项目,可以选择默认或自定义项目特性。
Vue CLI2.0与3.0目录差异
Vue CLI3.0相较于2.0版本做了目录结构优化,包括替换static文件夹为public文件夹,并将配置文件隐藏起来。
项目服务启动
Vue CLI3项目使用`npm run serve`命令启动,不再使用VueCLI2的`npm run dev`命令。
想要了解更多内容?
![](/theme/default/default/images/main/icon-link.png)
![](/theme/default/default/images/main/icon-jing.png)
![](https://cdn.easycorp.cn/rongpm/upload/202312/f_39217d624bb2b42ce8f6322ebd7e573a.png)
![](https://cdn.easycorp.cn/rongpm/upload/202312/f_39217d624bb2b42ce8f6322ebd7e573a.png)