Vue3 项目创建教程

本篇文件将详细介绍在 Windows 环境下如何通过命令行新建 Vue3 项目。

一、环境准备

1. Node 安装

node 环境依赖相对简单，进入官网下载的对应的安装包无脑下一步即可，官网直达

2. 环境验证

安装完成后在命令窗口输入如下命令查看版本，若能正确显示则说明安装成功。

node -v         # 查看 Node 版本

npm -v          # 查看 NPM 版本

3. 依赖安装

完成 node 安装之后，在新建工程之前我们还需要安装 vue-cli 依赖。

npm install vue-cli -g

二、创建步骤

完成上述环境准备后下面就可以正式开始创建项目了。

1. 新建工程

在你的本地工作目录下进入命令行窗口，通过 vue create <工程名> 创建工程。

2. 模块选择

3. 自定义模块

通过上下键切换对象，空格键选择对应功能，完成后回车进入下一步。

4. 版本选择

这里选择版本选择 Vue3 。

5. 路由模式

设置路由模式为 history ，这里选择 yes。

6. Eslint配置

选择 Eslint 配置，选择默认回车即可。

7. 依赖管理

选择依赖管理方式，这里选择 package.json。

8. 设置保存

即保存上述我们的选项下次即可快速创建项目。

三、完成创建

1. 工程生成

完成上述步骤最后等待项目文件生产完毕即可。

创建结束之后打开目录即可看见已经生成如下内容：

四、框架集成

1. 依赖下载

为了更便捷的实现开发这里选择集成 Element 框架，需要注意 Element-UI 是针对 Vue 2 版本，而本文的 Vue 3 则需选择 Element-Plus。

在上述创建工程目录下打开命令行输出下述命令下载依赖。

npm install element-plus --save

2. 项目配置

完成后修改项目的 /src/main.js 文件，全局引入 ElementPlus，完整的配置如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)
app.mount('#app')

3. 图标集成

在 Element-Plus 中使用 Icon 图标需要额外引入依赖。

同样在项目工程命令窗口输入下述命令下载依赖：

npm install @element-plus/icons-vue

完成后修改 main.js 文件全局引入，完整配置如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// element-plus icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(ElementPlus)
app.use(router)
app.mount('#app')