手把手教你用Vite构建第一个Vue3项目

写在前面

在之前的文章中写过“如何创建第一个vue项目”，但那篇文章写的是创建vue2的 项目。

传送门如何创建第一个vue项目

打开Vue.js官网:https://cn.vuejs.org/，我们会发现Vue 2 将于 2023 年 12 月 31 日停止维护

虽然Vue2的项目还不少，但是官方尤大大都在拥抱Vue3。

那我们也不能落后啊，今天就来说说怎么创建第一个Vue3项目。

并安装Element Plus 及一些常用配置，最终实现一个简单页面

一、工具简介

这里我们简单介绍一下文章中使用到的工具，使用这些工具可以提高我们开发效率。

当然了只有nodejs 是必须要安装的，nvm 、Vite 、NRM 这些都不是必须的，

1.1 nvm nodejs管理工具

nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。

通过它可以安装和切换不同版本的nodejs

1.2 node.js js运行环境

Node.js 就不用多说了，官方解释：Node.js is an open-source, cross-platform JavaScript runtime environment.
翻译过来：Node.js是一个开源、跨平台的JavaScript运行时环境。

1.3 Vite 前端构建工具

Vite是尤雨溪团队开发的，官方称是下一代新型前端构建工具，能够显著提升前端开发体验。

上面称是下一代，当前一代当然是我们熟悉的webpack

Vite 优势

• 开发环境中，无需打包操作，可快速的冷启动。
• 轻量快速的热重载（HMR）。
• 真正的按需编译，不再等待整个应用编译完成。

Vite 官网：https://cn.vitejs.dev/

1.4 NRM镜像管理工具

nrm 全称是：（npm registry manager） 是npm的镜像管理工具

有时候国外的资源太慢，使用它就可以快速地在npm镜像源间快速切换

二、安装上面工具

2.1 nvm 安装与使用

2.1.1 nvm下载

①github下载
https://github.com/coreybutler/nvm-windows/releases

②百度网盘下载

有的小伙伴可能打开GitHub网站比较忙，贴心的我帮大家准备了百度网盘下载

链接：https://pan.baidu.com/s/18FZuhmw7OCFeLFpQmf7u6w
提取码：lnaf

2.1.2 nvm 安装

① 双击nvm-setup.exe可执行文件

② 选择nvm安装路径

③选择nodejs安装路径

④安装

⑤检查是否安装成功

C:\Users\xiezhr>nvm version
1.1.9

⑥ nvm 常用命令

# 显示可以安装的所有nodejs版本
nvm list available # 安装指定版本的nodejs
nvm install <version> 
# 显示已安装版本列表
nvm list
# 使用指定版本node
nvm use [version]
# 卸载指定版本node
nvm uninstall <version>

2.2 nodejs安装

2.2.1 nodejs官网

官网： https://nodejs.org/en/

2.2.2 查看nodejs 所有版本

上一小节中安装好的nvm，既然nvm是nodejs管理工具，我们这里就是用nvm 查看node.js 版本，安装nodejs

① nvm list available 查看版本

C:\Users\xiezhr>nvm list available
|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   18.10.0    |   16.17.1    |   0.12.18    |   0.11.16    |
|    18.9.1    |   16.17.0    |   0.12.17    |   0.11.15    |
|    18.9.0    |   16.16.0    |   0.12.16    |   0.11.14    |
|    18.8.0    |   16.15.1    |   0.12.15    |   0.11.13    |
|    18.7.0    |   16.15.0    |   0.12.14    |   0.11.12    |
|    18.6.0    |   16.14.2    |   0.12.13    |   0.11.11    |
|    18.5.0    |   16.14.1    |   0.12.12    |   0.11.10    |
|    18.4.0    |   16.14.0    |   0.12.11    |    0.11.9    |
|    18.3.0    |   16.13.2    |   0.12.10    |    0.11.8    |
|    18.2.0    |   16.13.1    |    0.12.9    |    0.11.7    |
|    18.1.0    |   16.13.0    |    0.12.8    |    0.11.6    |
|    18.0.0    |   14.20.1    |    0.12.7    |    0.11.5    |
|    17.9.1    |   14.20.0    |    0.12.6    |    0.11.4    |
|    17.9.0    |   14.19.3    |    0.12.5    |    0.11.3    |
|    17.8.0    |   14.19.2    |    0.12.4    |    0.11.2    |
|    17.7.2    |   14.19.1    |    0.12.3    |    0.11.1    |
|    17.7.1    |   14.19.0    |    0.12.2    |    0.11.0    |
|    17.7.0    |   14.18.3    |    0.12.1    |    0.9.12    |
|    17.6.0    |   14.18.2    |    0.12.0    |    0.9.11    |
|    17.5.0    |   14.18.1    |   0.10.48    |    0.9.10    |This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases

② nvm install [version] 安装我们需要的版本

# 安装16.17.1版本
C:\Users\xiezhr>nvm install 16.17.1
Downloading node.js version 16.17.1 (64-bit)...
Extracting...
CompleteInstallation complete. If you want to use this version, type
nvm use 16.17.1

2.2.3 使用指定版本的nodejs

如果我们在日常开发中用到多个版本的nodejs,我们电脑上也安装了多个版本的nodejs

这时候，我们就可以使用如下命令切换nodejs版本

C:\WINDOWS\system32>nvm use 16.17.1
Now using node v16.17.1 (64-bit)

小提示：在执行上面命令中可能会报如下错，只需要将cmd切换到管理员登录即可解决

2.2.4 查看当前nodejs版本

当我们按照上面的方法切换了nodejs版本后，可以用如下命令查看当前nodejs版本信息

# 查看node版本
C:\Users\xiezhr>node -v
v16.17.1
# 查看npm版本
C:\Users\xiezhr>npm -v
8.15.0

2.3 镜像管理工具NRM 安装

2.3.1 安装NRM

输入npm install -g nrm 后回车即可全局安装NRM镜像管理工具

C:\Users\xiezhr>npm install -g nrm
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142added 58 packages in 6s
npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.19.2 to update!
npm notice

2.3.2 nrm镜像管理工具使用

我们可以通过如下常用nrm命令管理npm镜像

# 查看镜像列表
nrm ls
# 查看当前使用的镜像
nrm current 
# 添加镜像
nrm add <名称> <远程地址或私服地址>
# 删除镜像
nrm del <名称>
# 切换镜像
nrm use <名称> 
# 测试镜像网络传输速度
nrm test <名称>
# 查看nrm版本号
nrm <-version | -V> 
# 查看nrm相关信息
nrm <-help | -h>
# 打开镜像主页
nrm home <名称> [browser]
# 上传npm包或命令程序
nrm publish [<tarball>|<folder>]

查看镜像列表

三、创建Vue3项目

我们到官网 https://cn.vitejs.dev/guide/ 根据官网一步步往下走即可

**兼容性注意：**Vite 需要 Node.js 版本 14.18+，16+。

然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

① 使用npm 、yarn 、pnpm 其中一种命令安装即可

pnpm 是集合了npm 和yarn 优点的，在使用前需要先安装

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

② 输入vue项目名称，我们这里就叫vite-project

③选择使用哪种框架，这里我们当然是选择Vue 了

Vite 不仅仅支持Vue 框架，还支持React、Vanilla、Lit 等前端主流框架

④ 选择Javascript 和TypeScript

Vue3 已经全面拥抱TypeScript，所以这里我们就选择TypeScript

⑤ 到此我们就创建完成了，是不是很简单了

⑥ 我们按照上面提示，进入到 vite-project 项目路径下 按照依赖

# 切换到项目跟目录
cd vite-project
# 安装依赖
npm install

⑦ 启动Vue 项目

输入如下命令启动我们创建好的Vue项目

# 启动项目
npm run dev

当控制台看到如下所示，说明启动成功了

浏览器打开 http://127.0.0.1:5173/

四、项目结构介绍

通过Vite创建好的Vue 项目机构如下所示

4.1 项目结构

里面需要重点关注的，我用小红旗和小星星标注了

4.2 index.html

首页文件的初始代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue + TS</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

这就是一个普普通通的html文件，让它与众不同的是<div id="app"></div>

整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中

4.3 App.vue

上面图中我把这个文件称为“父组件”，因为其它的组件都是这个的儿子组件

.vue 文件是vue 中自定义的文件类型，我们把它看作成html即可，可以在里面写标签元素、css样式、js/ts代码

我们来看看其初始化的代码

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

我们不要被这么多的代码吓到了，仔细一看，你会发现都是我们熟悉的。

• 标签中书写js/ts代码

• 标签中写页面代码

• 中写css 样式

我们看不懂的可能只有import HelloWorld from './components/HelloWorld.vue' 和 <HelloWorld msg="Vite + Vue" /> 这两句

这里其实就是前面我们说的App.vue 是所有组件的父组件。

在父组件中引入了子组件 ，并给子组件传递了一个字符串参数msg="Vite + Vue"

4.4 HelloWorld.vue

这是一个子组件，供父组件调用

我们来看看其中代码

<script setup lang="ts">
import { ref } from 'vue'defineProps<{ msg: string }>()const count = ref(0)
</script><template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="count++">count is {{ count }}</button><p>Edit<code>components/HelloWorld.vue</code> to test HMR</p></div><p>Check out<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter</p><p>Install<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>in your IDE for a better DX</p><p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template><style scoped>
.read-the-docs {color: #888;
}
</style>

结合页面，我们猜一猜都知道，页面上有一个计数器，就是在这里实现的了

我们来看看我们看不懂的，

• import { ref } from 'vue' 表示从Vue库中导入 ref 函数，ref是一个响应式函数
• defineProps<{ msg: string }>() 表示接收父组件App.vue 传递过来的msg参数
• const count = ref(0) 创建一个响应式的数据引用,count 是一个变量名,ref(0) 表示将数字0作为初始值传递给 ref 函数,意味着当 count 的值发生变化时，相关的Vue组件会自动更新
• {{ msg }} 是vue的插值语法，即将父组件传递过来的msg 信息显示出来

4.5 main.ts

main.ts 通常是应用程序的入口文件, App.vue就是通过这个文件和 index.html 里的 <div id="app"> 产生联系的

我们来看看具体代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')

• import { createApp } from 'vue' 导入了 Vue 的 createApp 函数，用于创建一个 Vue 应用实例。
• import './style.css' 导入了一个 CSS 文件,这里可以忽略
• import App from './App.vue' 导入了根组件 App ，而App又包含了所有子组件
• createApp(App).mount('#app') 创建了一个 Vue 应用实例，并将根组件 App 挂载到具有 id 为 app 的 DOM 元素上。

这样我们就将所有写的页面都挂在到了index.html文件上了，到这儿，是不是豁然开朗了呢

4.6 package.json 文件

到上一小节，我们已经将vue的代码分析的差不多了，接下来，我们在来看看package.json 项目依赖配置

{"name": "vite-project","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.3.4"},"devDependencies": {"@vitejs/plugin-vue": "^4.2.3","typescript": "^5.0.2","vite": "^4.4.5","vue-tsc": "^1.8.5"}
}

我们挑几个重要的说一说

• "name": "vite-project" 指定项目的名称为 “vite-project”
• "version": "0.0.0" ：指定项目的版本号，这是一个初始版本号,后面如果项目升级新版本了，可以在这里定义
• "scripts" ：定义了一些脚本命令，用于开发、构建和预览项目
  • "dev": "vite" ：启动开发服务器，用于在开发环境下运行项目。 我们前面通过npm run dev 就是在这儿配置的
  • "build": "vue-tsc && vite build" ：我们使用TypeScript ，需要将 TypeScript 代码编译为 JavaScript才能运行
• "dependencies" ：列出了项目的生产环境依赖项。
  • "vue": "^3.3.4" ：指定了 Vue 的版本为 3.3.4，这是项目所依赖的核心库。
• "devDependencies" ：列出了项目的开发环境依赖项。
  • "@vitejs/plugin-vue": "^4.2.3" ：Vite 插件版本
  • "typescript": "^5.0.2" ：TypeScript 编译器版本
  • "vite": "^4.4.5" ：Vite 构建工具

五、集成Element Plus

5.1 安装Element Plus

打开官网：https://element-plus.gitee.io/zh-CN/guide/design.html

# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

5.2 如何在项目中使用Element Plus

官网提供了三种用法 完整引入、按需引入、手动导入，这里我们使用按需导入（可以使打包文件变小） 官方也推荐使用按需引入

① 首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

② 在 Vite 的配置文件vite.config.ts中 添加如下代码

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

③ 添加全局配置

在引入 ElementPlus 时，可以在App.vue 中传入一个包含 size 和 zIndex 属性的全局配置对象。

• size 用于设置表单组件的默认尺寸
• zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000

<template><el-config-provider :size="size" :z-index="zIndex"></el-config-provider>
</template><script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'export default defineComponent({components: {ElConfigProvider,},setup() {return {zIndex: 3000,size: 'small',}},
})
</script>

5.3 添加一个按钮

我们将多余的代码删除，并添加一个element 样式的按钮

<script setup lang="ts"></script><template><el-button type="primary">使用element-plus的第一个按钮</el-button>
</template><style scoped></style>

六、配置@别名

我们将src 目录配置一个别名@ 这样我们开发中使用起来就很高效，在写路径的时候就不用../../ 这样写了

配置前写法

<img src="../../src/assets/images/password_icon.png" />

配置@后写法

<img src="@/assets/images/password_icon.png" />

@写法看起来是不是舒服多了呢

① 修改 vite.config.ts

注意： 这里的代码有一部分是有的，按需要添加，别添加错了

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 配置@别名import { resolve } from "path"; // https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],// ↓解析配置resolve: {// ↓路径别名alias: {"@": resolve(__dirname, "./src")}}
})

② 修改 tsconfig.json

{"compilerOptions": {"target": "ESNext",...// 配置@别名"baseUrl": ".","paths": {"@/*": ["src/*"]}, },
}

如果运行不了或报错尝试按下面命令安装下 @types/node ，没有报错可以不用安装，有安装也没事

 npm install @types/node 

③ 插件推荐

如果这里你使用vscode开发vue ,这里推荐一款插件给你Path-intellisense

插件安装完成后，我们还需要做如下配置

安装上面配置完成后，我们在书写路径的时候就有提示了~

七、Element Plus Icon使用

Element Plus中将Icon 封装成了组件形式，我们不能想element-ui中那样使用了。

<!--原来使用方式-->
<i class="el-icon-edit"></i><!--现在使用方式--><el-icon :size="size" :color="color"><edit></edit></el-icon>

① 安装icon库

# 选择一个你喜欢的包管理器# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

② 按需引入Icon

<script setup lang="ts">import { Edit } from '@element-plus/icons-vue'</script><template><!-- <el-button type="primary">使用element-plus的第一个按钮</el-button> --><el-icon><Edit /></el-icon>
</template><style scoped></style>

八、一个简单页面带你入门

做完之后的效果，当然了还没有和后台交互，里面数据都是写死的。

这个没啥难的用到什么控件就到element plus 官网找就可以了。下面是具体代码

App.vue 代码， 我们在App中引用 HelloWorld 组件，具体页面都在HelloWorld 组件中

注意： 这里引入 import zhCn from "element-plus/dist/locale/zh-cn.mjs"

let locale = zhCn

这块是为了解决分页显示英文问题，加上之后分页控件就正常显示中文了

<!-- App.vue--><script setup lang="ts">import { ElConfigProvider } from 'element-plus'
import zhCn from "element-plus/dist/locale/zh-cn.mjs"import HelloWorld from '@/components/HelloWorld.vue'// 切换为中文
let locale = zhCn</script><template><el-config-provider :locale="locale"><HelloWorld msg="Vite + Vue" />
</el-config-provider></template><style scoped></style>

HelloWorld.vue

这个文件没啥说的，基本上都是copy的

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue';
import { Refresh } from '@element-plus/icons-vue';const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}let username = ref('')
let email = ref('')const query = () => {}const tableData = [{ username:"李莲花",sex:"男",age:38,email:"[e-mail]",phone:[phone],address:"莲花楼",},{username:"方多病",sex:"男",age:23,email:"[e-mail]",phone:[phone],address:"天机堂",},{username:"笛飞声",sex:"男",age:39,email:"[e-mail]",phone:[phone],address:"金鸳盟",},{username:"乔婉娩",sex:"女",age:32,email:"[e-mail]",phone:[phone],address:"四顾门",},{username:"角丽谯",sex:"女",age:32,email:"[e-mail]",phone:[phone],address:"金鸳盟",},]
</script><template><el-card><div class="query-input"><el-input v-model="username" placeholder="请输入用户名"/><el-input v-model="email" placeholder="请输入邮箱"/><el-button type="primary" @click="query"> <el-icon><Search /></el-icon>查询</el-button><el-button type="danger" @click="query"><el-icon><Refresh /></el-icon>重置</el-button></div></el-card><el-card><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="username" label="姓名" width="180" /><el-table-column prop="sex" label="性别" width="180" /><el-table-column prop="age" label="年龄" width="180" /><el-table-column prop="email" label="邮箱" width="180" /><el-table-column prop="phone" label="电话" width="180" /><el-table-column prop="address" label="地址"  /><el-table-column fixed="right" label="操作" width="180"><template #default><el-button  type="primary" size="small" >编辑</el-button><el-button  type="danger" size="small">删除</el-button></template></el-table-column></el-table><div class="demo-pagination-block"><el-paginationv-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[100, 200, 300, 400]":small="small":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper":total="400"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></el-card>
</template><style scoped>.el-input {margin-right: 5px;width: 300px;}.query-input{display: flex;justify-content:center}.el-card{margin-bottom: 10px;}.demo-pagination-block{display: flex;justify-content: center;margin-top: 20px;}</style>

九、小结

这么一波操作下来，是不是很简单呢。Vite 构建Vue3项目，你学废了么？

基本上都是从官网copy过来改改就行了。

从Vue2 到Vue3 变化还是挺多的，尤其是按需引入这个，写起来很烦。不过习惯就好了

本期内容到此就结束了，希望对你有所帮助 (●’◡’●)

下一期我们将要用SpringBoot 搭建后端部分，敬请期待哦~

我们下期再见 (●’◡’●)