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

JJCTO袁龙

于 2024-06-30 08:24:00 发布

阅读量849

点赞数 21

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

本文链接：https://blog.csdn.net/yuanlong12178/article/details/140075930

版权

Vue 专栏收录该内容

376 篇文章 5 订阅

订阅专栏

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

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

在这里插入图片描述

JJCTO袁龙

关注

21
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
通过Vue CLI快速创建一个Vue 3项目，并简单介绍项目结构

├── public├── src接下来我们将详细介绍每个目录和文件的用途。通过 Vue CLI 创建 Vue 3 项目是一个非常快捷和高效的过程。它不仅生成了必要的文件和目录，还使您能够专注于编写代码而不是配置项目。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
复制链接

扫一扫