。

当然#xff0c;作为一个后端#xff0c;直接上手前端#xff0c;还是有很多坑要填的。

本次开发#xff0c;前端页面框架直接选择Vue。

原因很简单特别是TypeScript这样的语言出现后开发前端的体验跟后端渐渐接近了。

当然作为一个后端直接上手前端还是有很多坑要填的。

本次开发前端页面框架直接选择Vue。

原因很简单用的人多之前没用过。

一顿搜索各个官网文档看下来采用Vue3

Plus。

作为CSS低手有一个成熟的UI框架可以节省不少事情特别是现在这些框架都是模块化组件化的。

跟WebForm时代的控件思想一脉相承降低了使用难度赞

开搞……

Plus的starter本着学习的态度从vue的create开始吧。

创建vueDemo

这里面官方文档上就是一堆引入方法第一次完全没有看懂。

所以采用了最笨最直接的方法就是对比文件。

对比的就是刚刚创建的vueDemo和

package.json

.vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts

--fix

^3.0.2,vue/eslint-config-prettier:

^8.0.0,vue/eslint-config-typescript:

^2.4.1,vue/tsconfig:

element-plus-vite-starter,private:

true,version:

^0.55.7,unplugin-vue-components:

^0.25.2,vite:

dependencies只需要安装element-plus但是devDependencies

则需要其它内容参照Element

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

auto-imports.d.ts

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

npm

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

import

unplugin-vue-components/resolversimport

path

{presetAttributify,presetIcons,presetUno,transformerDirectives,transformerVariantGroup,

from

auto-imports.d.ts),}),Components({resolvers:

[//

自动注册图标组件IconsResolver({enabledCollections:

[ep],}),//

组件ElementPlusResolver({importStyle:

sass,}),],dts:

components.d.ts),}),Icons({autoInstall:

true,}),//

https://github.com/antfu/unocss//

see

[presetUno(),presetAttributify(),presetIcons({scale:

1.2,warn:

[transformerDirectives(),transformerVariantGroup(),]}),],resolve:

{alias:

})要特别说明的是有些文章中ElementPlusResolver

另外对路径~/的解析是在上面代码最后一行。

关于这个我的理解是在页面代码中引用其它文件时对src目录引用的一种快捷方式可以是

~/,

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

npm

src\components\layouts\BaseSide.vue.

Does

又是一顿搜原来这个组件已经独立出来element-plus/icons-vue

这篇文档其中自动导入参考

Plus本身没啥可说的但是在引入过程中明白了package.json

tsconfig.json

这三个文件的作用。

配置性的内容应该都在这三个文件里了所以有哪里不对多半都是这三个文件的配置不对。