通过Vue CLI快速创建一个Vue 3项目，并简单介绍项目结构

jnfy

于 2024-08-29 14:59:10 发布

阅读量440

点赞数 5

分类专栏： vue 文章标签： vue.js 前端 javascript vu3

本文链接：https://blog.csdn.net/cui137610/article/details/141678962

版权

vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

在前端开发领域，Vue.js 是一个备受喜爱的框架，而 Vue CLI 则是一个强大的工具，可以帮助开发者快速地创建和管理 Vue 项目。本文将详细介绍如何通过 Vue CLI 快速创建一个 Vue 3 的项目，并简要介绍项目的结构。

#### 1. 安装 Vue CLI

首先，您需要确保您的系统上已经安装了 Node.js 和 npm。您可以通过以下命令检查：

```bashnode -vnpm -v```

如果您还没有安装 Node.js，请前往 [Node.js 官方网站](https://nodejs.org/)下载并安装合适的版本。

接下来，可以通过 npm 全局安装 Vue CLI：

```bashnpm install -g @vue/cli```

安装完成后，您可以通过以下命令验证 Vue CLI 是否成功安装：

```bashvue --version```

这时候，应该能看到 Vue CLI 的版本号，说明安装成功。

#### 2. 创建 Vue 3 项目

有了 Vue CLI 之后，您可以使用 `vue create` 命令快速创建一个 Vue 项目。这里我们将创建一个名为 `my-vue3-project` 的 Vue 3 项目：

```bashvue create my-vue3-project```

在创建项目的过程中，Vue CLI 会给出一系列选项供您选择。为了创建一个 Vue 3 项目，请选择 `Default Vue 3 preset`。

```bash? Please pick a preset:  Default Vue 3 Preview ([Vue 3] babel, eslint) ```

选择之后，Vue CLI 会自动生成项目文件。这可能需要几分钟时间，具体取决于网络状况。

#### 3. 启动项目

创建完成后，进入项目目录并启动开发服务器：

```bashcd my-vue3-projectnpm run serve```

默认情况下，开发服务器会在 `http://localhost:8080/` 启动。打开浏览器访问这个地址，可以看到 Vue 应用的欢迎页面。

#### 4. 项目结构介绍

创建好的 Vue 项目包含多个文件和目录，具体结构如下：

```plaintextmy-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 组件最终都会被注入到这里。

```html<!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` 文件示例：

```javascriptimport { 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 脚本也在这里定义。

```json{  "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 项目是一个非常快捷和高效的过程。它不仅生成了必要的文件和目录，还使您能够专注于编写代码而不是配置项目。