经验首页 前端设计 程序设计 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 ViteNRM 这些都不是必须的,

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 |
  24. 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
  6. Installation complete. If you want to use this version, type
  7. 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
  5. added 58 packages in 6s
  6. npm notice
  7. npm notice New minor version of npm available! 8.15.0 -> 8.19.2
  8. npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
  9. npm notice Run npm install -g npm@8.19.2 to update!
  10. 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 版本。

① 使用npmyarn pnpm 其中一种命令安装即可

pnpm 是集合了npmyarn 优点的,在使用前需要先安装

使用 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>
  4. <template>
  5. <div>
  6. <a href="https://vitejs.dev" target="_blank">
  7. <img src="/vite.svg" class="logo" alt="Vite logo" />
  8. </a>
  9. <a href="https://vuejs.org/" target="_blank">
  10. <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
  11. </a>
  12. </div>
  13. <HelloWorld msg="Vite + Vue" />
  14. </template>
  15. <style scoped>
  16. .logo {
  17. height: 6em;
  18. padding: 1.5em;
  19. will-change: filter;
  20. transition: filter 300ms;
  21. }
  22. .logo:hover {
  23. filter: drop-shadow(0 0 2em #646cffaa);
  24. }
  25. .logo.vue:hover {
  26. filter: drop-shadow(0 0 2em #42b883aa);
  27. }
  28. </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'
  3. defineProps<{ msg: string }>()
  4. const count = ref(0)
  5. </script>
  6. <template>
  7. <h1>{{ msg }}</h1>
  8. <div class="card">
  9. <button type="button" @click="count++">count is {{ count }}</button>
  10. <p>
  11. Edit
  12. <code>components/HelloWorld.vue</code> to test HMR
  13. </p>
  14. </div>
  15. <p>
  16. Check out
  17. <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
  18. >create-vue</a
  19. >, the official Vue + Vite starter
  20. </p>
  21. <p>
  22. Install
  23. <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
  24. in your IDE for a better DX
  25. </p>
  26. <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
  27. </template>
  28. <style scoped>
  29. .read-the-docs {
  30. color: #888;
  31. }
  32. </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'
  4. 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 挂载到具有 idapp 的 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. # 选择一个你喜欢的包管理器
  2. # NPM
  3. $ npm install element-plus --save
  4. # Yarn
  5. $ yarn add element-plus
  6. # pnpm
  7. $ pnpm install element-plus

安装element-plus

5.2 如何在项目中使用Element Plus

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

① 首先需要安装unplugin-vue-componentsunplugin-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'
  5. export default defineConfig({
  6. // ...
  7. plugins: [
  8. // ...
  9. AutoImport({
  10. resolvers: [ElementPlusResolver()],
  11. }),
  12. Components({
  13. resolvers: [ElementPlusResolver()],
  14. }),
  15. ],
  16. })

③ 添加全局配置

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

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

5.3 添加一个按钮

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

  1. <script setup lang="ts">
  2. </script>
  3. <template>
  4. <el-button type="primary">使用element-plus的第一个按钮</el-button>
  5. </template>
  6. <style scoped>
  7. </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. // https://vitejs.dev/config/
  6. export default defineConfig({
  7. plugins: [vue()],
  8. // ↓解析配置
  9. resolve: {
  10. // ↓路径别名
  11. alias: {
  12. "@": resolve(__dirname, "./src")
  13. }
  14. }
  15. })

② 修改 tsconfig.json

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

如果运行不了或报错尝试按下面命令安装下 @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. <el-icon :size="size" :color="color">
  5. <edit></edit>
  6. </el-icon>

① 安装icon库

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

安装icons-vue

② 按需引入Icon

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

九、小结

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

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

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

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

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

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

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

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

本站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号