Vue CLI创建Vue项目详细步骤

一、安装Node环境（建议使用LTS版本）

在开始之前，请确保您已经安装了Node.js环境。您可以从Node.js官方网站下载LTS版本，以确保稳定性和兼容性。

中文官网下载

确认已安装 Node.js。可以在终端中运行 node -v 命令来检查是否已安装。

⚙️ 二、下载Vue和Vue CLI脚手架

打开命令行终端，执行以下命令来全局安装Vue和Vue CLI：

npm install -g vue @vue/cli

在终端中运行 vue -V 命令来检查是否已安装（这里要大写的V）

三、创建Vue项目

在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端）

在终端中进入要创建项目的目录，运行以下命令创建新的项目：vue create 。

vue create <project-name>

其中 是要创建的项目名称

3.2 ️ 进入详细选择

创建过程中，您将进入一个交互式的选择界面，根据您的需求进行配置。

3.2.1 选择创建模式

选择Vue的创建模式：Vue 2.x、Vue 3.x 或自定义。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
myvuepro ([Vue 3] dart-sass, babel, router, vuex, eslint)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

3.2.2 ️ 选择需要支持的特性

根据项目需求，选择需要支持的特性，如Babel、Router、Vuex等。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press
to select, to toggle all, to invert selection, and
to proceed)
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
() Linter / Formatter
( ) Unit Testing
( ) E2E Testing

我的配置：

3.2.3 选择Vue版本

选择您希望使用的Vue版本，例如2.x或3.x。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with (Use arrow keys)
3.x
2.x

3.2.4 是否选择history路由模式

根据需求选择是否使用history路由模式，这会影响路由的URL显示方式。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with 3.x
? Use history mode for router? (Requires proper server setup
for index fallback in production) (Y/n)

这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n

3.2.5 选择CSS预处理器

选择是否使用CSS预处理器，如Sass、Less等。

这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with 3.x
? Use history mode for router? (Requires proper server setup
for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS
Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Less
Stylus

3.2.6 格式化代码方式

3.2.7 代码规则检测

这里的意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save

3.2.8

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个

3.2.9

这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了

完成后如下图：

3.4 打开项目文件

使用命令行进入项目目录：

cd project-name

3.5 ▶️ 运行项目并查看页面

运行以下命令以启动开发服务器：

npm run serve

在浏览器中打开显示的URL，即可看到Vue应用的页面。

通过这些步骤，您已经成功地使用Vue CLI创建了一个新的Vue项目，根据项目需求进行了相应的配置。接下来，您可以根据需要进行开发和定制。 Vue CLI的强大功能将为您的项目带来便利和效率！