企业网站建设 西宁,网站引导页html模板,网站搭建服务器需要多少钱,个人电脑可以做网站服务器吗现在前端框架越来越像后端了#xff0c;特别是TypeScript这样的语言出现后#xff0c;开发前端的体验跟后端渐渐接近了。当然#xff0c;作为一个后端#xff0c;直接上手前端#xff0c;还是有很多坑要填的。
本次开发#xff0c;前端页面框架直接选择Vue。原因很简单特别是TypeScript这样的语言出现后开发前端的体验跟后端渐渐接近了。当然作为一个后端直接上手前端还是有很多坑要填的。
本次开发前端页面框架直接选择Vue。原因很简单用的人多之前没用过。
一顿搜索各个官网文档看下来采用Vue3 Element UI Plus。作为CSS低手有一个成熟的UI框架可以节省不少事情特别是现在这些框架都是模块化组件化的。跟WebForm时代的控件思想一脉相承降低了使用难度赞
开搞……
首先开始创建项目有两个选择Vue 的 create ElementUI Plus的starter本着学习的态度从vue的create开始吧。
1. 创建vueDemo
npm create vuelatest 然后全部选是。 根据推荐使用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:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
import vueJsx from vitejs/plugin-vue-jsximport 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/resolversimport 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 这三个文件的作用。配置性的内容应该都在这三个文件里了所以有哪里不对多半都是这三个文件的配置不对。
