Day 1 Vue 页面框架

现在前端框架越来越像后端了,特别是TypeScript这样的语言出现后,开发前端的体验跟后端渐渐接近了。当然,作为一个后端,直接上手前端,还是有很多坑要填的。

本次开发,前端页面框架直接选择Vue。原因很简单,用的人多,之前没用过。

一顿搜索,各个官网文档看下来,采用Vue3 + Element UI Plus。作为CSS低手,有一个成熟的UI框架可以节省不少事情,特别是现在这些框架都是模块化,组件化的。跟WebForm时代的控件思想一脉相承,降低了使用难度,赞!

开搞……

首先开始创建项目,有两个选择,Vue 的 create, ElementUI Plus的starter,本着学习的态度,从vue的create开始吧。

1. 创建vueDemo

npm create vue@latest

, 然后全部选是。

根据推荐,使用VS Code进行开发,打开后,命令行依次执行上图绿色命令。

页面出来了:

到此为止,都是so easy。

2. 引入Element UI Plus

这里面官方文档上就是一堆引入方法,第一次完全没有看懂。所以采用了最笨最直接的方法,就是对比文件。对比的就是刚刚创建的vueDemo和 starter。

Vue脚手架下的 package.json

{"name": "vuedemo","version": "0.0.0","private": true,"scripts": {"dev": "vite","build": "run-p type-check \"build-only {@}\" --","preview": "vite preview","test:unit": "vitest","test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'","test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'","build-only": "vite build","type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format": "prettier --write src/"},"dependencies": {"pinia": "^2.1.7","vue": "^3.3.4","vue-router": "^4.2.5"},"devDependencies": {"@rushstack/eslint-patch": "^1.3.3","@tsconfig/node18": "^18.2.2","@types/jsdom": "^21.1.3","@types/node": "^18.18.5","@vitejs/plugin-vue": "^4.4.0","@vitejs/plugin-vue-jsx": "^3.0.2","@vue/eslint-config-prettier": "^8.0.0","@vue/eslint-config-typescript": "^12.0.0","@vue/test-utils": "^2.4.1","@vue/tsconfig": "^0.4.0","cypress": "^13.3.1","eslint": "^8.49.0","eslint-plugin-cypress": "^2.15.1","eslint-plugin-vue": "^9.17.0","jsdom": "^22.1.0","npm-run-all2": "^6.1.1","prettier": "^3.0.3","start-server-and-test": "^2.0.1","typescript": "~5.2.0","vite": "^4.4.11","vitest": "^0.34.6","vue-tsc": "^1.8.19"}
}

Element-plus-vite-starter 下的package.json

{"name": "element-plus-vite-starter","private": true,"version": "0.1.0","scripts": {"dev": "vite","build": "vite build","generate": "vite-ssg build","preview": "vite preview","typecheck": "vue-tsc --noEmit"},"dependencies": {    "element-plus": "^2.3.12","vue": "^3.3.4"},"devDependencies": {"@iconify-json/ep": "^1.1.12","@types/node": "^20.6.0","@vitejs/plugin-vue": "^4.3.4","sass": "^1.66.1","typescript": "^5.2.2","unocss": "^0.55.7","unplugin-vue-components": "^0.25.2","vite": "^4.4.9","vite-ssg": "^0.23.1","vue-tsc": "^1.8.11"},"license": "MIT"
}

通过对比可以发现, dependencies只需要安装element-plus,但是devDependencies 则需要其它内容,参照Element UI Plus文档 按需导入

安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

因为之前脚手架默认使用了Vite,则修改Vite配置文件vite.config.ts

修改后,会发现目录下多了 auto-imports.d.ts 和 components.d.ts 两个文件

可以看到,这两个文件内容都是自动生成的。

3. 调整页面代码

下图左侧是vueDemo的main.ts,右侧是Element Plus Vite Starter 的 main.ts。

可以看到不同的地方集中在css上,这里使用了unocss,安装为开发依赖项。

npm install -D unocss

同时,修改vite.config.ts,这里注意反复修改过好几次,最后定稿如下:

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')import Unocss from 'unocss/vite'
import {presetAttributify,presetIcons,presetUno,transformerDirectives,transformerVariantGroup,
} from 'unocss'// https://vitejs.dev/config/
export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@use "~/styles/element/index.scss" as *;`,},},},plugins: [vue(),vueJsx(),AutoImport({// Auto import functions from Vue, e.g. ref, reactive, toRef...// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等imports: ['vue'],// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)// 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式)resolvers: [ElementPlusResolver(),// Auto import icon components// 自动导入图标组件IconsResolver({prefix: 'Icon',}),],dts: path.resolve(pathSrc, 'auto-imports.d.ts'),}),Components({resolvers: [// Auto register icon components// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],}),// Auto register Element Plus components// 自动导入 Element Plus 组件ElementPlusResolver({importStyle: 'sass',}),],dts: path.resolve(pathSrc, 'components.d.ts'),}),Icons({autoInstall: true,}),// https://github.com/antfu/unocss// see unocss.config.ts for configUnocss({presets: [presetUno(),presetAttributify(),presetIcons({scale: 1.2,warn: true,}),],transformers: [transformerDirectives(),transformerVariantGroup(),]}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),'~/': `${pathSrc}/`,}}
})

要特别说明的是,有些文章中,ElementPlusResolver 没有任何参数,因为之前已经引入了Sass,会导致页面样式错乱。

另外,对路径`~/`的解析,是在上面代码最后一行。关于这个我的理解是在页面代码中引用其它文件时对src目录引用的一种快捷方式,可以是 ~/, 也可以是其它符号。

4. 复制页面布局

修改App.vue文件,复制BaseSide.vue等组件,按starter的样子搞一下,还有styles目录,assets下的logo.svg等等。

另外,

最后就是执行

npm run dev

呃,报错 Failed to resolve import "@element-plus/icons-vue" from "src\components\layouts\BaseSide.vue". Does the file exist?

又是一顿搜,原来这个组件已经独立出来,@element-plus/icons-vue 需要单独安装,没啥说的,继续安装。 参考 这篇文档,其中自动导入参考 这个示例

终于排除了种种困难,页面效果如下:

这篇文章只是简单的从vue脚手架中,引入了ElementUI Plus,本身没啥可说的,但是在引入过程中,明白了package.json , tsconfig.json, vite.config.ts 这三个文件的作用。配置性的内容应该都在这三个文件里了,所以有哪里不对,多半都是这三个文件的配置不对。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出排序算法之归并排序

目录 1. 归并排序的原理 1.1 二路归并排序执行流程 2. 代码分析 2.1 代码设计 3. 性能分析 4. 非递归版本 1. 归并排序的原理 “归并”一词的中文含义就是合并、并入的意思,而在数据结构中的定义是将两个或者两个以上的有序表组合成一个新的有序表。 归并排序…

Python-pptx教程之一从零开始生成PPT文件

简介 python-pptx是一个用于创建、读取和更新PowerPoint(.pptx)文件的python库。 典型的用途是根据动态内容(如数据库查询、分析数据等),将这些内容自动化生成PowerPoint演示文稿,将数据可视化&#xff0c…

【IDEA配置】IDEA配置

参考视频:【idea必知必会】优化设置 告别卡顿 1. 显示内存 右击底下空白区域,出现memory indicator内存指示器,点击勾选即可显示。有的是在Settings->Appearance->Window Options里,如图所示: 2. 内存设置 …

虚拟世界游戏定制开发:创造独一无二的虚拟体验

在游戏开发领域,虚拟世界游戏定制开发是一项引人注目的任务,旨在满足客户独特的需求和愿景,创造一个完全个性化的虚拟世界游戏。这种类型的游戏开发需要专业的技能、深刻的游戏开发知识和密切的与客户合作,以确保游戏满足客户的期…

CI2454 2.4g无线MCU芯片应用

Ci2454集成MCU芯片 | Ci2454是一款集成无线收发器和 8 位 RISC(精简指令集)MCU 的SOC芯片。 #Ci2454芯片 集成MCU芯片# 中国芯片# 无线收发器特性: 工作在 2.4GHz ISM 频段 调制方式:GFSK/FSK 数据速率:2Mbps/1Mbps…

数据库基础(一)【MySQL】

文章目录 安装 MySQL修改密码连接和退出数据库服务器使用 systemctl 管理服务器进程配置数据库从文件角度看待数据库查看连接情况 安装 MySQL 这是在 Linux 中安装 MySQL 的教程:Linux 下 MySQL 安装。本系列测试用的 MySQL 版本是 5.7,机器是 centOS7.…

LabVIEW中将枚举与条件结构一起使用

LabVIEW中将枚举与条件结构一起使用 枚举是一个具有相应数值的字符串标签型列表。在LabVIEW(U8 , U16-默认值和U32)中以无符号整数形式应用。 例如,可以有一个枚举保存四个季节,在这种情况下,每个字符串都…

Go之流程控制大全: 细节、示例与最佳实践

引言 在计算机编程中,流程控制是核心的组成部分,它决定了程序应该如何根据给定的情况执行或决策。以下是Go语言所支持的流程控制结构的简要概览: 流程控制类型代码if-else条件分支if condition { } else { }for循环for initialization; con…

GoLong的学习之路(一)语法之变量与常量

目录 GoLang变量批量声明变量的初始化类型推导短变量声明匿名变量 常量iota(特殊)(需要重点记忆) GoLang go的诞生为了解决在21世纪多核和网络化环境越来越复杂的变成问题而发明的Go语言。 go语言是从Ken Thomepson发明的B语言和…

分享个包含各省、市、区的编码数据的在线静态资源脚本

在翻《SpringBootVue3》——十三尼克陈作者的大型前后端分离项目实战里面&#xff0c;在看到地址管理的部分时&#xff0c;发现了该作者记录有一个静态的地址资源脚本 这里做个记录&#xff0c;打点 一、引入js <script src"https://s.yezgea02.com/1641120061385/td…

2024王道考研计算机组成原理——指令系统

零、本章概要 指令寻址&#xff1a;解决的是PC"1"的问题 数据寻址&#xff1a;使用寄存器/内存/结合 基址寻址&#xff1a;用于多道程序的并发执行 直接寻址&#xff1a;call 0x12345678 变址寻址&#xff1a;esi edi用于循环&#xff0c;因为使用直接寻址需要一堆…

超市商品管理系统 JAVA语言设计实现

目录 一、系统介绍 二、系统下载 三、系统截图 一、系统介绍 基于VueSpringBootMySQL的超市商品管理系统&#xff0c;超市区域模块、超市货架模块、商品类型模块、商品档案模块&#xff0c;分为用户网页端和管理后台&#xff0c;基于角色的访问控制&#xff0c;可将权限精确…

【Java】<泛型>,在编译阶段约束操作的数据结构,并进行检查。

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ JAVA泛型 泛型介绍&#xff1a; ①泛型&#…

HTML+CSS+JS+Django 实现前后端分离的科学计算器、利率计算器(附全部代码在gitcode链接)

&#x1f9ee;前后端分离计算器 &#x1f4da;git仓库链接和代码规范链接&#x1f4bc;PSP表格&#x1f387;成品展示&#x1f3c6;&#x1f3c6;科学计算器&#xff1a;1. 默认界面与页面切换2. 四则运算、取余、括号3. 清零Clear 回退Back4. 错误提示 Error5. 读取历史记录Hi…

2023年中职组“网络安全”赛项云南省竞赛任务书

2023年中职组“网络安全”赛项 云南省竞赛任务书 一、竞赛时间 总计&#xff1a;360分钟 竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A模块 A-1 登录安全加固 180分钟 200分 A-2 本地安全策略配置 A-3 流量完整性保护 A-4 事件监控 A-5 服务加固…

VSCode 自动格式化

1.打开应用商店&#xff0c;搜索 prettier code formatter &#xff0c;选择第一个&#xff0c;点击安装。 2.安装完成后&#xff0c;点击文件&#xff0c;选择首选项&#xff0c;选择设置。 3.在搜索框内输入 save &#xff0c;勾选在保存时格式化文件。 4.随便打开一个文件&a…

Access denied for user ‘root‘@‘localhost‘ (using password:YES) 解决方案(禅道相关)

如果是忘记Mysql密码或更改权限后访问不了的问题请直接跳转以下链接&#xff1a; MySQL登录时出现Access denied for user ‘root‘‘localhost‘ (using password: YES)无法打开的解决方法 关于这个问题&#xff0c;网上查到的解决方法基本都是因为忘记Mysql密码或者用户权限问…

【Java 进阶篇】Java XML解析:从入门到精通

XML&#xff08;可扩展标记语言&#xff09;是一种常用的数据格式&#xff0c;用于存储和交换数据。在Java中&#xff0c;XML解析是一项重要的任务&#xff0c;它允许您从XML文档中提取和操作数据。本篇博客将从基础开始&#xff0c;详细介绍如何在Java中解析XML文档&#xff0…

前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(二)

阳光总在风雨后&#xff0c;请相信有彩虹。 案例 - 图书管理 bootstrap弹框 需求&#xff0c;点击添加按钮&#xff0c;没有离开当前页面&#xff0c;在当前页面弹出弹框&#xff08;弹窗&#xff09; 先学着实现一个简单的弹框&#xff0c;如下图右下角 bootstrap有两种方式…

20231024后端研发面经整理

1.如何在单链表O(1)删除节点&#xff1f; 狸猫换太子 2.redis中的key如何找到对应的内存位置&#xff1f; 哈希碰撞的话用链表存 3.线性探测哈希法的插入&#xff0c;查找和删除 插入&#xff1a;一个个挨着后面找&#xff0c;知道有空位 查找&#xff1a;一个个挨着后面找…