• 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

    1. {
    2.   "name": "vuedemo",
    3.   "version": "0.0.0",
    4.   "private": true,
    5.   "scripts": {
    6.     "dev": "vite",
    7.     "build": "run-p type-check \"build-only {@}\" --",
    8.     "preview": "vite preview",
    9.     "test:unit": "vitest",
    10.     "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
    11.     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
    12.     "build-only": "vite build",
    13.     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    14.     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    15.     "format": "prettier --write src/"
    16.   },
    17.   "dependencies": {
    18.     "pinia": "^2.1.7",
    19.     "vue": "^3.3.4",
    20.     "vue-router": "^4.2.5"
    21.   },
    22.   "devDependencies": {
    23.     "@rushstack/eslint-patch": "^1.3.3",
    24.     "@tsconfig/node18": "^18.2.2",
    25.     "@types/jsdom": "^21.1.3",
    26.     "@types/node": "^18.18.5",
    27.     "@vitejs/plugin-vue": "^4.4.0",
    28.     "@vitejs/plugin-vue-jsx": "^3.0.2",
    29.     "@vue/eslint-config-prettier": "^8.0.0",
    30.     "@vue/eslint-config-typescript": "^12.0.0",
    31.     "@vue/test-utils": "^2.4.1",
    32.     "@vue/tsconfig": "^0.4.0",
    33.     "cypress": "^13.3.1",
    34.     "eslint": "^8.49.0",
    35.     "eslint-plugin-cypress": "^2.15.1",
    36.     "eslint-plugin-vue": "^9.17.0",
    37.     "jsdom": "^22.1.0",
    38.     "npm-run-all2": "^6.1.1",
    39.     "prettier": "^3.0.3",
    40.     "start-server-and-test": "^2.0.1",
    41.     "typescript": "~5.2.0",
    42.     "vite": "^4.4.11",
    43.     "vitest": "^0.34.6",
    44.     "vue-tsc": "^1.8.19"
    45.   }
    46. }

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

    1. {
    2.   "name": "element-plus-vite-starter",
    3.   "private": true,
    4.   "version": "0.1.0",
    5.   "scripts": {
    6.     "dev": "vite",
    7.     "build": "vite build",
    8.     "generate": "vite-ssg build",
    9.     "preview": "vite preview",
    10.     "typecheck": "vue-tsc --noEmit"
    11.   },
    12.   "dependencies": {    
    13.     "element-plus": "^2.3.12",
    14.     "vue": "^3.3.4"
    15.   },
    16.   "devDependencies": {
    17.     "@iconify-json/ep": "^1.1.12",
    18.     "@types/node": "^20.6.0",
    19.     "@vitejs/plugin-vue": "^4.3.4",
    20.     "sass": "^1.66.1",
    21.     "typescript": "^5.2.2",
    22.     "unocss": "^0.55.7",
    23.     "unplugin-vue-components": "^0.25.2",
    24.     "vite": "^4.4.9",
    25.     "vite-ssg": "^0.23.1",
    26.     "vue-tsc": "^1.8.11"
    27.   },
    28.   "license": "MIT"
    29. }

    通过对比可以发现， 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，这里注意反复修改过好几次，最后定稿如下：

    1. import { fileURLToPath, URL } from 'node:url'
    2.  
    3. import { defineConfig } from 'vite'
    4. import vue from '@vitejs/plugin-vue'
    5. import vueJsx from '@vitejs/plugin-vue-jsx'
    6.  
    7. import Icons from 'unplugin-icons/vite'
    8. import IconsResolver from 'unplugin-icons/resolver'
    9. import AutoImport from 'unplugin-auto-import/vite'
    10. import Components from 'unplugin-vue-components/vite'
    11. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    12.  
    13. import path from 'path'
    14. const pathSrc = path.resolve(__dirname, 'src')
    15.  
    16. import Unocss from 'unocss/vite'
    17. import {
    18.   presetAttributify,
    19.   presetIcons,
    20.   presetUno,
    21.   transformerDirectives,
    22.   transformerVariantGroup,
    23. } from 'unocss'
    24.  
    25. // https://vitejs.dev/config/
    26. export default defineConfig({
    27.   css: {
    28.     preprocessorOptions: {
    29.       scss: {
    30.         additionalData: `@use "~/styles/element/index.scss" as *;`,
    31.       },
    32.     },
    33.   },
    34.   plugins: [
    35.     vue(),
    36.     vueJsx(),
    37.     AutoImport({
    38.       // Auto import functions from Vue, e.g. ref, reactive, toRef...
    39.       // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
    40.       imports: ['vue'],
    41.  
    42.       // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
    43.       // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
    44.       resolvers: [
    45.         ElementPlusResolver(),
    46.  
    47.         // Auto import icon components
    48.         // 自动导入图标组件
    49.         IconsResolver({
    50.           prefix: 'Icon',
    51.         }),
    52.       ],
    53.  
    54.       dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    55.     }),
    56.  
    57.  
    58.     Components({
    59.       resolvers: [
    60.         // Auto register icon components
    61.         // 自动注册图标组件
    62.         IconsResolver({
    63.           enabledCollections: ['ep'],
    64.         }),
    65.         // Auto register Element Plus components
    66.         // 自动导入 Element Plus 组件
    67.         ElementPlusResolver({
    68.           importStyle: 'sass',
    69.         }),
    70.       ],
    71.  
    72.       dts: path.resolve(pathSrc, 'components.d.ts'),
    73.     }),
    74.  
    75.  
    76.     Icons({
    77.       autoInstall: true,
    78.     }),
    79.  
    80.      // https://github.com/antfu/unocss
    81.     // see unocss.config.ts for config
    82.     Unocss({
    83.       presets: [
    84.         presetUno(),
    85.         presetAttributify(),
    86.         presetIcons({
    87.           scale: 1.2,
    88.           warn: true,
    89.         }),
    90.       ],
    91.       transformers: [
    92.         transformerDirectives(),
    93.         transformerVariantGroup(),
    94.       ]
    95.     }),
    96.   ],
    97.   resolve: {
    98.     alias: {
    99.       '@': fileURLToPath(new URL('./src', import.meta.url)),
    100.       '~/': `${pathSrc}/`,
    101.     }
    102.   }
    103. })

    要特别说明的是，有些文章中，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 这三个文件的作用。配置性的内容应该都在这三个文件里了，所以有哪里不对，多半都是这三个文件的配置不对。

  • 相关阅读:
    Harbor webhook从原理到构建
    C# OpenCvSharp 利用Lab空间把春天的场景改为秋天
    10kV变电所运维平台的现代化智能构建方案
    【openwrt学习笔记】Dying Gasp功能和pstore功能的配置（高通 ipq95xx）
    【数据挖掘】关联规则挖掘
    问题排查利器：Linux 原生跟踪工具 Ftrace 必知必会
    如何在springboot项目中引入knife4j接口文档
    Java项目（三）-- SSM开发社交网站（9）--后台图书管理功能
    Windows-Docker-Hyperf项目环境搭建过程记录
    【NumPy】数组的维度变换在DL|ML数据集处理时的妙用
  • 原文地址：https://blog.csdn.net/lee_leefox/article/details/133996660