项目脚手架VueCLI2&3

项目脚手架VueCLI2&3

VueCLI简介

VueCLI（Vue Command-Line Interface）是一个用于快速构建基于webpack的Vue项目的脚手架工具。它提供了静态资源模块化打包、热加载调试服务、预处理和文件转译、自动化测试、静态检测等功能，并支持零配置的原型开发。

VueCLI与webpack的关系

VueCLI依赖于webpack，后者依赖NodeJS。因此，在使用VueCLI之前需要安装NodeJS（推荐版本v10及以上）。VueCLI的核心封装内容通过webpack实现，体现了前端工程化的思想。

VueCLI版本

VueCLI包括多个版本：2.X、3.X、4.X和5.X。VueCLI2.X需要手动配置webpack，学习难度较高；VueCLI3.X通过隐藏webpack配置、提供UI界面化服务简化了使用流程，使初学者更容易上手。VueCLI4.5以下支持Vue2，VueCLI4.5以上支持Vue3。

VueCLI2快速搭建项目

使用VueCLI2需安装NodeJS，并通过以下命令安装webpack和VueCLI2：

npm install webpack -g
npm install -g vue-cli

安装完成后，使用vue init webpack [项目名称]初始化项目，并根据提示选择项目配置，如项目名称、路由、编码规范等。最后通过npm run dev启动调试服务。

若创建过程缓慢，可通过设置国内源地址加速：

npm config set registry http://registry.npmmirror.com

VueCLI2目录文件详解

VueCLI2项目目录包括以下关键文件夹：

• build：webpack核心配置文件。
• config：环境变量配置文件。
• src：核心资源代码文件夹。
• static：存放不参与编译的静态资源。
• node_modules：第三方类库安装目录。

其他重要文件包括package.json（项目配置文件）和.babelrc（JS文件编译兼容性配置）。

VueCLI3.x的安装与使用

VueCLI3.x通过以下命令安装：

npm install -g @vue/cli@3.9.3

使用vue create [项目名称]创建项目，可选择默认配置或手动个性化配置。手动选择支持功能包括babel转义、CSS预处理器、代码风格检查等。

最终通过npm run serve启动项目服务。

VueCLI2.0与3.0目录差异

VueCLI3.0对目录结构进行了优化：

• 移除static文件夹，替换为public文件夹。
• 将index.html移至public文件夹。
• 隐藏build和config文件夹配置，将其集成到@vue/cli-service中。

总结

VueCLI是一个强大的前端脚手架工具，简化了Vue项目的创建和配置流程。VueCLI2适合有一定webpack经验的用户，而VueCLI3通过隐藏配置和UI界面化降低了使用门槛，适合初学者。

想要了解更多内容？

查看原文：项目脚手架VueCLI2&3

文章来源：

springboot葵花宝典

扫码关注公众号

测试开发之系统篇-Docker常用操作

了解更多