项目脚手架VueCLI2&3

项目脚手架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`命令。