「Vue3系列」Vue3起步/创建项目

文章目录

一、Vue3 创建项目
二、Vue3 Create详解
- 命令格式
- 可选选项
- 使用示例
- 注意事项
三、Vue3 项目目录结构
四、Vue3 起步实例
五、相关链接

一、Vue3 创建项目

在 Vue 3 中创建项目，通常使用 Vue CLI（命令行工具）来简化项目的初始化过程。Vue CLI 是一个强大的工具，它可以帮助你快速搭建 Vue.js 项目，并且内置了对 Vue Router、Vuex、CSS 预处理器、PWA 支持、单元测试等的集成。

以下是使用 Vue CLI 创建 Vue 3 项目的步骤：

安装 Node.js 和 npm/yarn

确保你的计算机上安装了最新版本的 Node.js 和 npm（Node.js 的包管理器）。npm 会随同 Node.js 一起安装。你也可以选择安装 yarn，它是一个流行的替代包管理器。

安装 Vue CLI

在安装了 Node.js 和 npm/yarn 之后，你需要全局安装 Vue CLI。打开终端或命令提示符，然后运行以下命令之一来安装 Vue CLI：

使用 npm：

npm install -g @vue/cli
npm install -g @vue/cli@next # 如果要安装最新版本的 Vue CLI（包括 Vue 3 支持）

使用 yarn：

yarn global add @vue/cli
yarn global add @vue/cli@next # 如果要安装最新版本的 Vue CLI（包括 Vue 3 支持）

安装完成后，你可以通过运行 vue --version 来验证 Vue CLI 是否正确安装。

创建 Vue3 项目

使用 Vue CLI，你可以通过以下命令创建一个新的 Vue3 项目。请将 my-vue3-project 替换为你想要的项目名称：

vue create my-vue3-project

这个命令会启动一个交互式的命令行界面，询问你一些问题以定制项目的配置。你可以选择默认配置（Default）来快速创建一个项目，或者手动选择特性（Manually select features）来定制你的项目。在配置选项中，确保选择了 Vue 3 作为项目的版本。

此外，Vue CLI 还提供了一个快捷方式来直接创建 Vue 3 项目，使用 -- --next 标志：

vue create my-vue3-project -- --next

这个命令将直接为你创建一个使用 Vue 3 的项目。

创建项目后，你需要进入项目的目录以开始开发。使用以下命令切换到你的项目目录：

cd my-vue3-project

运行项目

在项目目录中，你可以使用以下命令之一来启动开发服务器：

使用 npm：

npm run serve

使用 yarn：

yarn serve

这将启动一个本地开发服务器，并在浏览器中自动打开一个新的标签页，显示你的 Vue3 应用。默认情况下，应用将在 http://localhost:8080 上运行。

开发你的应用

现在你可以开始开发你的 Vue3 应用了。在 src 目录下，你会找到主要的项目文件，如 App.vue（应用的根组件）和 main.js（应用的入口文件）。你可以根据需要编辑这些文件和其他文件来构建你的应用。

构建生产版本

当你的应用开发完成并准备部署到生产环境时，你可以使用以下命令之一来构建项目的生产版本：

使用 npm：

npm run build

使用 yarn：

yarn build

这将创建一个优化过的、用于生产环境的版本在你的项目目录下的 dist 文件夹中。

部署应用

构建完成后，你可以将 dist 文件夹中的内容部署到你的 Web 服务器或静态文件托管服务上，以便让其他人能够访问你的 Vue3 应用。

二、Vue3 Create详解

vue create 命令是 Vue CLI 中的一个重要命令，用于创建新的 Vue.js 项目。这个命令提供了丰富的配置选项，允许开发者根据项目需求定制项目结构和依赖项。以下是 vue create 命令的详细解释和一些常用的选项：

命令格式

vue create <project-name>

其中 <project-name> 是你想要创建的新项目的名称。

可选选项

-p 或 --preset <presetName>：忽略提示符并使用已保存或远程的预设选项。预设是一组预定义的配置选项，可以用来快速创建具有特定功能的项目。
-d 或 --default：忽略提示符并使用默认预设选项。这将使用 Vue CLI 的默认配置来创建项目。
-i 或 --inlinePreset <json>：忽略提示符并使用内联的 JSON 字符串预设选项。你可以直接提供一个 JSON 字符串来定义项目的配置。
-m 或 --packageManager <command>：在安装依赖时使用指定的 npm 客户端。例如，你可以使用 yarn 代替 npm。
-r 或 --registry <url>：在安装依赖时使用指定的 npm registry。这允许你使用私有 registry 或镜像源。
-g 或 --git [message]：强制或跳过 git 初始化，并可选地指定初始化提交信息。
-n 或 --no-git：跳过 git 初始化。
-f 或 --force：覆写目标目录可能存在的配置。
-c 或 --clone：使用 git clone 获取远程预设选项。
-x 或 --proxy：使用指定的代理创建项目。
-b 或 --bare：创建项目时省略默认组件中的新手指导信息。
-h 或 --help：输出使用帮助信息。

使用示例

使用默认配置创建项目：

vue create my-project

这将启动一个交互式的命令行界面，询问你一些问题来定制项目配置。

使用预设创建项目：

如果你有一个预定义的预设文件（例如 my-preset.json），你可以使用 -i 选项来直接应用它：

vue create my-project -i my-preset.json

跳过 git 初始化：

如果你不想在创建项目时初始化 git，可以使用 -n 选项：

vue create my-project -n

指定 npm 客户端：

如果你想使用 yarn 而不是 npm 来安装依赖，可以使用 -m 选项：

vue create my-project -m yarn

注意事项

当你运行 vue create 命令时，它会根据你的选择下载和安装相应的依赖项，并为你创建一个新的 Vue.js 项目目录结构。
在执行 vue create 命令之前，确保你已经安装了最新版本的 Node.js 和 Vue CLI。
根据你的需求和偏好，选择适当的选项来定制你的项目配置。

三、Vue3 项目目录结构

Vue3 项目的目录结构通常包含以下主要部分：

node_modules：这个目录包含了项目运行所依赖的所有 npm 包。这些包是通过运行 npm install 或 yarn install 命令安装的。
public：这个目录包含静态资源，这些资源不会被 webpack 处理，而是直接被复制到最终的构建目录中。常见的文件包括：

index.html：项目的入口 HTML 文件，通常包含了应用的根元素和一些初始化的 JavaScript 代码。
favicon.ico：网站的图标文件。
其他静态资源，如图片、字体等。

src：这是项目的源代码目录，包含了所有的 Vue 组件、JavaScript 代码、样式文件等。

assets：存放静态资源，如图片、字体文件、CSS 文件等。
components：存放 Vue 组件文件，这些组件通常是可复用的 UI 元素。
views（或 pages）：存放页面级别的 Vue 组件，每个组件通常对应一个路由页面。
router：存放 Vue Router 的配置文件，定义了路由规则和页面之间的导航。
store：如果项目使用 Vuex 进行状态管理，这里会存放 Vuex 的相关文件。
App.vue：Vue 应用的根组件，通常包含了整个应用的布局和路由视图。
main.js（或 main.ts）：项目的入口文件，用于初始化 Vue 应用、导入全局样式和配置等。
App.vue：根组件文件，包含了整个应用的布局和路由视图。
main.js：项目的入口文件，用于实例化 Vue 应用，并导入所需的插件、组件和样式。

.gitignore：这个文件用于配置哪些文件不应该被 Git 跟踪，即不会被提交到版本控制系统中。
package.json：这是项目的配置文件，包含了项目的元信息、依赖项、脚本命令等。你可以通过运行 npm install 或 yarn install 命令来根据这个文件安装项目依赖。
README.md：这是项目的说明文档，通常包含了项目的介绍、运行命令、贡献指南等信息。
vue.config.js（可选）：这是 Vue CLI 的项目配置文件，用于修改默认的 webpack 配置和其他 Vue CLI 的配置。

四、Vue3 起步实例

在 Vue 3 中，起步实例代码通常包括以下几个步骤：

创建一个 Vue 应用实例。
定义应用的根组件。
挂载这个实例到 DOM 中的某个元素上。

下面是一个简单的 Vue 3 起步实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 Starter</title><!-- 引入 Vue 3 --><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!-- 定义挂载点 -->
<div id="app"><!-- 使用双花括号插值显示消息 -->{{ message }}<!-- 使用 v-bind 指令绑定属性 --><button v-bind:disabled="isButtonDisabled">Click Me</button><!-- 使用 v-on 指令监听点击事件 --><button v-on:click="toggleButton">Toggle Button</button>
</div><!-- Vue 3 实例代码 -->
<script>const app = Vue.createApp({// 定义数据data() {return {message: 'Hello Vue 3!',isButtonDisabled: false}},// 定义方法methods: {toggleButton() {this.isButtonDisabled = !this.isButtonDisabled;}}});// 挂载实例app.mount('#app');
</script></body>
</html>