经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
手把手教你使用Vite构建第一个Vue3项目
来源：cnblogs　　作者：xiezhr　　时间：2023/9/6 11:00:07　　对本文有异议

写在前面

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

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

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

vue2停止维护

虽然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下载nvm

②百度网盘下载

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

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

2.1.2 nvm 安装

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

双击可执行文件

② 选择nvm安装路径
选择nvm安装路径

③选择nodejs安装路径
选择nodejs安装路径

④安装
安装

⑤检查是否安装成功

  1. C:\Users\xiezhr>nvm version
  2. 1.1.9

⑥ nvm 常用命令

  1. # 显示可以安装的所有nodejs版本
  2. nvm list available 
  3.  # 安装指定版本的nodejs
  4. nvm install <version> 
  5. # 显示已安装版本列表
  6. nvm list
  7. # 使用指定版本node
  8. nvm use [version]
  9. # 卸载指定版本node
  10. nvm uninstall <version>

2.2 nodejs安装

2.2.1 nodejs官网

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

nodejs官网

2.2.2 查看nodejs 所有版本

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

① nvm list available 查看版本

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

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

  1. # 安装16.17.1版本
  2. C:\Users\xiezhr>nvm install 16.17.1
  3. Downloading node.js version 16.17.1 (64-bit)...
  4. Extracting...
  5. Complete
  7. Installation complete. If you want to use this version, type
  8. nvm use 16.17.1
2.2.3 使用指定版本的nodejs

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

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

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

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

报错提示

2.2.4 查看当前nodejs版本

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

  1. # 查看node版本
  2. C:\Users\xiezhr>node -v
  3. v16.17.1
  4. # 查看npm版本
  5. C:\Users\xiezhr>npm -v
  6. 8.15.0

2.3 镜像管理工具NRM 安装

2.3.1 安装NRM

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

  1. C:\Users\xiezhr>npm install -g nrm
  2. 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.
  3. npm WARN deprecated har-validator@5.1.5: this library is no longer supported
  4. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
  6. added 58 packages in 6s
  7. npm notice
  8. npm notice New minor version of npm available! 8.15.0 -> 8.19.2
  9. npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
  10. npm notice Run npm install -g npm@8.19.2 to update!
  11. npm notice
2.3.2 nrm镜像管理工具使用

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

  1. # 查看镜像列表
  2. nrm ls
  3. # 查看当前使用的镜像
  4. nrm current 
  5. # 添加镜像
  6. nrm add <名称> <远程地址或私服地址>
  7. # 删除镜像
  8. nrm del <名称>
  9. # 切换镜像
  10. nrm use <名称> 
  11. # 测试镜像网络传输速度
  12. nrm test <名称>
  13. # 查看nrm版本号
  14. nrm <-version | -V> 
  15. # 查看nrm相关信息
  16. nrm <-help | -h>
  17. # 打开镜像主页
  18. nrm home <名称> [browser]
  19. # 上传npm包或命令程序
  20. nrm publish [<tarball>|<folder>]

查看镜像列表

image-20230902110743824

三、创建Vue3项目

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

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

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

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

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

使用 NPM:

  1. $ npm create vite@latest

使用 Yarn:

  1. $ yarn create vite

使用 PNPM:

  1. $ pnpm create vite

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

输入项目名称

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

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

选择Vue框架

④ 选择Javascript 和TypeScript

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

选择TypeScript

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

构建完成

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

  1. # 切换到项目跟目录
  2. cd vite-project
  3. # 安装依赖
  4. npm install

安装依赖

⑦ 启动Vue 项目

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

  1. # 启动项目
  2. npm run dev

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

启动成功

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

浏览器打开

四、项目结构介绍

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

4.1 项目结构

Vue项目目录

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

项目结构说明

4.2 index.html

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

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

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

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

4.3 App.vue

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

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

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

  1. <script setup lang="ts">
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.   <div>
  7.     <a href="https://vitejs.dev" target="_blank">
  8.       <img src="/vite.svg" class="logo" alt="Vite logo" />
  9.     </a>
  10.     <a href="https://vuejs.org/" target="_blank">
  11.       <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
  12.     </a>
  13.   </div>
  14.   <HelloWorld msg="Vite + Vue" />
  15. </template>
  17. <style scoped>
  18. .logo {
  19.   height: 6em;
  20.   padding: 1.5em;
  21.   will-change: filter;
  22.   transition: filter 300ms;
  23. }
  24. .logo:hover {
  25.   filter: drop-shadow(0 0 2em #646cffaa);
  26. }
  27. .logo.vue:hover {
  28.   filter: drop-shadow(0 0 2em #42b883aa);
  29. }
  30. </style>

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

  • 标签中书写js/ts代码

  • 标签中写页面代码

  • 中写css 样式

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

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

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

4.4 HelloWorld.vue

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

我们来看看其中代码

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  4. defineProps<{ msg: string }>()
  6. const count = ref(0)
  7. </script>
  9. <template>
  10.   <h1>{{ msg }}</h1>
  12.   <div class="card">
  13.     <button type="button" @click="count++">count is {{ count }}</button>
  14.     <p>
  15.       Edit
  16.       <code>components/HelloWorld.vue</code> to test HMR
  17.     </p>
  18.   </div>
  20.   <p>
  21.     Check out
  22.     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
  23.       >create-vue</a
  24.     >, the official Vue + Vite starter
  25.   </p>
  26.   <p>
  27.     Install
  28.     <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
  29.     in your IDE for a better DX
  30.   </p>
  31.   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
  32. </template>
  34. <style scoped>
  35. .read-the-docs {
  36.   color: #888;
  37. }
  38. </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"> 产生联系的

我们来看看具体代码

  1. import { createApp } from 'vue'
  2. import './style.css'
  3. import App from './App.vue'
  5. 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 项目依赖配置

  1. {
  2.   "name": "vite-project",
  3.   "private": true,
  4.   "version": "0.0.0",
  5.   "type": "module",
  6.   "scripts": {
  7.     "dev": "vite",
  8.     "build": "vue-tsc && vite build",
  9.     "preview": "vite preview"
  10.   },
  11.   "dependencies": {
  12.     "vue": "^3.3.4"
  13.   },
  14.   "devDependencies": {
  15.     "@vitejs/plugin-vue": "^4.2.3",
  16.     "typescript": "^5.0.2",
  17.     "vite": "^4.4.5",
  18.     "vue-tsc": "^1.8.5"
  19.   }
  20. }

我们挑几个重要的说一说

  • "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

  1. # 选择一个你喜欢的包管理器
  3. # NPM
  4. $ npm install element-plus --save
  6. # Yarn
  7. $ yarn add element-plus
  9. # pnpm
  10. $ pnpm install element-plus

安装element-plus

5.2 如何在项目中使用Element Plus

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

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

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

image-20230902164045281

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

  1. import { defineConfig } from 'vite'
  2. import AutoImport from 'unplugin-auto-import/vite'
  3. import Components from 'unplugin-vue-components/vite'
  4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  6. export default defineConfig({
  7.   // ...
  8.   plugins: [
  9.     // ...
  10.     AutoImport({
  11.       resolvers: [ElementPlusResolver()],
  12.     }),
  13.     Components({
  14.       resolvers: [ElementPlusResolver()],
  15.     }),
  16.   ],
  17. })

③ 添加全局配置

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

  • size 用于设置表单组件的默认尺寸
  • zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000
  1. <template>
  2.   <el-config-provider :size="size" :z-index="zIndex">
  3.    
  4.   </el-config-provider>
  5. </template>
  7. <script>
  8. import { defineComponent } from 'vue'
  9. import { ElConfigProvider } from 'element-plus'
  11. export default defineComponent({
  12.   components: {
  13.     ElConfigProvider,
  14.   },
  15.   setup() {
  16.     return {
  17.       zIndex: 3000,
  18.       size: 'small',
  19.     }
  20.   },
  21. })
  22. </script>

5.3 添加一个按钮

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

  1. <script setup lang="ts">
  4. </script>
  6. <template>
  7.   <el-button type="primary">使用element-plus的第一个按钮</el-button>
  8. </template>
  10. <style scoped>
  12. </style>

添加一个按钮

六、配置@别名

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

配置前写法

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

配置@后写法

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

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

① 修改 vite.config.ts

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

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3.  // 配置@别名
  4.  import { resolve } from "path"; 
  5.  
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [vue()],
  9.       // ↓解析配置
  10.     resolve: {
  11.       // ↓路径别名
  12.       alias: {
  13.         "@": resolve(__dirname, "./src")
  14.       }
  15.     }
  16. })

② 修改 tsconfig.json

  1. {
  2.   "compilerOptions": {
  3.     "target": "ESNext",
  4.     ...
  5.  
  6.     // 配置@别名
  7.     "baseUrl": ".",
  8.     "paths": {
  9.       "@/*": ["src/*"]
  10.     }, 
  11.   },
  12. }

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

  1.  npm install @types/node

③ 插件推荐

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

image-20230902173845720

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

打开设置

打开settings.json中配置

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

路径提示

七、Element Plus Icon使用

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

  1. <!--原来使用方式-->
  2. <i class="el-icon-edit"></i>
  3.  
  4. <!--现在使用方式-->
  5.  <el-icon :size="size" :color="color">
  6.    <edit></edit>
  7.  </el-icon>

① 安装icon库

  1. # 选择一个你喜欢的包管理器
  3. # NPM
  4. $ npm install @element-plus/icons-vue
  5. # Yarn
  6. $ yarn add @element-plus/icons-vue
  7. # pnpm
  8. $ pnpm install @element-plus/icons-vue

安装icons-vue

② 按需引入Icon

  1. <script setup lang="ts">
  3. import { Edit } from '@element-plus/icons-vue'
  5. </script>
  7. <template>
  8.   <!-- <el-button type="primary">使用element-plus的第一个按钮</el-button> -->
  9.   <el-icon>
  10.     <Edit />
  11.   </el-icon>
  12. </template>
  14. <style scoped>
  16. </style>

icon出来了

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

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

增删改查

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

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

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

let locale = zhCn

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

  1. <!-- App.vue-->
  3. <script setup lang="ts">
  5. import { ElConfigProvider } from 'element-plus'
  6. import zhCn from "element-plus/dist/locale/zh-cn.mjs"
  8. import HelloWorld from '@/components/HelloWorld.vue'
  11. // 切换为中文
  12. let locale = zhCn
  14. </script>
  16. <template>
  17.  <el-config-provider :locale="locale">
  18.   <HelloWorld msg="Vite + Vue" />
  19. </el-config-provider>
  21. </template>
  23. <style scoped>
  25. </style>

HelloWorld.vue

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

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. import { Search } from '@element-plus/icons-vue';
  4. import { Refresh } from '@element-plus/icons-vue';
  7. const currentPage4 = ref(4)
  8. const pageSize4 = ref(100)
  9. const small = ref(false)
  10. const background = ref(false)
  11. const disabled = ref(false)
  13. const handleSizeChange = (val: number) => {
  14.   console.log(`${val} items per page`)
  15. }
  16. const handleCurrentChange = (val: number) => {
  17.   console.log(`current page: ${val}`)
  18. }
  21. let username = ref('')
  22. let email = ref('')
  24. const query = () => {}
  26. const tableData = [
  27.   { username:"李莲花",
  28.     sex:"男",
  29.     age:38,
  30.     email:"123456@qq.com",
  31.     phone:12345678901,
  32.     address:"莲花楼",
  34.   },
  35.   {
  36.     username:"方多病",
  37.     sex:"男",
  38.     age:23,
  39.     email:"fdb@qq.com",
  40.     phone:1589999999,
  41.     address:"天机堂",
  43.   },
  44.   {
  45.     username:"笛飞声",
  46.     sex:"男",
  47.     age:39,
  48.     email:"dfs@153.com",
  49.     phone:13266666666,
  50.     address:"金鸳盟",
  52.   },
  53.   {
  54.     username:"乔婉娩",
  55.     sex:"女",
  56.     age:32,
  57.     email:"qwm@163.com",
  58.     phone:12345678901,
  59.     address:"四顾门",
  61.   },
  62.   {
  63.     username:"角丽谯",
  64.     sex:"女",
  65.     age:32,
  66.     email:"jlq@163.com",
  67.     phone:1258888888,
  68.     address:"金鸳盟",
  70.   },
  72. ]
  73. </script>
  75. <template>
  76.   <el-card>
  77.     <div class="query-input">
  78.       <el-input v-model="username" placeholder="请输入用户名"/>
  79.       <el-input v-model="email" placeholder="请输入邮箱"/>
  80.       <el-button type="primary" @click="query"> 
  81.         <el-icon><Search /></el-icon>
  82.         查询
  83.       </el-button>
  84.       <el-button type="danger" @click="query">
  85.         <el-icon><Refresh /></el-icon>
  86.         重置
  87.       </el-button>
  88.     </div>
  89.     
  90.   </el-card>
  92.   <el-card>
  93.     <el-table :data="tableData" stripe style="width: 100%">
  94.     <el-table-column prop="username" label="姓名" width="180" />
  95.     <el-table-column prop="sex" label="性别" width="180" />
  96.     <el-table-column prop="age" label="年龄" width="180" />
  97.     <el-table-column prop="email" label="邮箱" width="180" />
  98.     <el-table-column prop="phone" label="电话" width="180" />
  99.     <el-table-column prop="address" label="地址"  />
  100.     <el-table-column fixed="right" label="操作" width="180">
  101.       <template #default>
  102.         <el-button  type="primary" size="small" 
  103.           >编辑</el-button
  104.         >
  105.         <el-button  type="danger" size="small">删除</el-button>
  106.       </template>
  107.     </el-table-column>
  109.   </el-table>
  111.   <div class="demo-pagination-block">
  112.     <el-pagination
  113.       v-model:current-page="currentPage4"
  114.       v-model:page-size="pageSize4"
  115.       :page-sizes="[100, 200, 300, 400]"
  116.       :small="small"
  117.       :disabled="disabled"
  118.       :background="background"
  119.       layout="total, sizes, prev, pager, next, jumper"
  120.       :total="400"
  121.       @size-change="handleSizeChange"
  122.       @current-change="handleCurrentChange"
  123.     />
  124.   </div>
  125.   </el-card>
  126. </template>
  128. <style scoped>
  130.   .el-input {
  131.     margin-right: 5px;
  132.     width: 300px;
  133.   }
  134.   .query-input{
  135.     display: flex;
  136.     justify-content:center
  137.   }
  138.   .el-card{
  139.     margin-bottom: 10px;
  140.   }
  141.   .demo-pagination-block{
  142.     display: flex;
  143.     justify-content: center;
  144.     margin-top: 20px;
  145.   }
  147. </style>

九、小结

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

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

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

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

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

我们下期再见 (●'?'●)

原文链接：https://www.cnblogs.com/xiezhr/p/17678592.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号