通过 Vue CLI 快速创建一个 Vue 3 项目，并简单介绍项目结构
在前端开发领域，Vue.js 是一个备受喜爱的框架，而 Vue CLI 则是一个强大的工具，可以帮助开发者快速地创建和管理 Vue 项目。本文将详细介绍如何通过 Vue CLI 快速创建一个 Vue 3 项目，并简要介绍项目的结构。
1. 安装 Vue CLI
首先，您需要确保系统上已经安装了 Node.js 和 npm。可以通过以下命令检查：
node -v
npm -v
如果还没有安装 Node.js，请前往 Node.js 官方网站下载并安装合适的版本。
接下来，通过 npm 全局安装 Vue CLI：
npm install -g @vue/cli
安装完成后，可以通过以下命令验证 Vue CLI 是否成功安装：
vue --version
此时，应该能看到 Vue CLI 的版本号，说明安装成功。
2. 创建 Vue 3 项目
安装 Vue CLI 之后，可以使用 vue create 命令快速创建一个 Vue 项目。这里我们将创建一个名为 my-vue3-project 的 Vue 3 项目：
vue create my-vue3-project
在创建项目的过程中，Vue CLI 会给出一系列选项供您选择。为了创建一个 Vue 3 项目，请选择 Default Vue 3 preset：
? Please pick a preset:
Default Vue 3 Preview ([Vue 3] babel, eslint)
选择之后，Vue CLI 会自动生成项目文件。整个过程可能需要几分钟，具体取决于网络状况。
3. 启动项目
项目创建完成后，进入项目目录并启动开发服务器：
cd my-vue3-project
npm run serve
默认情况下，开发服务器会在 http://localhost:8080/ 启动。打开浏览器访问这个地址，可以看到 Vue 应用的欢迎页面。
4. 项目结构介绍
创建好的 Vue 项目包含多个文件和目录，具体结构如下：
my-vue3-project
├── node_modules
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ │ └── HelloWorld.vue
│ ├── App.vue
│ ├── main.js
│ └── router
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js
接下来我们将详细介绍每个目录和文件的用途。
node_modules
这是由 npm 自动生成的目录，包含了项目的所有依赖包。安装新依赖包时，npm 会将它们保存到这个目录中。
public
这个目录包含了静态资源，最常见的是 index.html 文件。index.html 是项目的入口 HTML 文件，所有的 Vue 组件最终都会被注入到这里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>my-vue3-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-vue3-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src
src 是您编写应用代码的主要目录。它通常包含以下子目录和文件：
assets：存放静态资源，如图片、字体等。components：存放 Vue 组件的目录。默认包含一个示例组件HelloWorld.vue。App.vue：根组件，所有其他组件都会在这里渲染。main.js：项目的入口 JavaScript 文件，它实例化了 Vue 应用并挂载到index.html中的#app元素。
main.js 文件示例：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
.gitignore
这个文件指定了 Git 在版本控制中忽略的文件和目录。例如，它通常会忽略 node_modules 目录和生成的构建文件。
babel.config.js
Babel 是一个 JavaScript 编译器，可以将 ES6+ 代码转换为兼容性更好的版本。这个文件包含了 Babel 的配置。
package.json
这个文件包含了项目的基本信息，如名称、版本和依赖包。所有的 npm 脚本也在这里定义。
{
"name": "my-vue3-project",
"version": "0.1.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2"
}
}
README.md
这个文件通常包括项目的简要介绍、如何安装和使用的指导。它是一个用 Markdown 语法编写的文本文件。
vue.config.js
这是一个可选的配置文件，您可以在这里自定义 Vue CLI 的配置。例如，修改开发服务器的端口，设置代理等。默认情况下，这个文件可能不存在，需要手动创建。
总结
通过 Vue CLI 创建 Vue 3 项目是一个非常快捷和高效的过程。它不仅生成了必要的文件和目录，还使您能够专注于编写代码而不是配置项目。