品牌推广网站策划设计,上海市质量工程建设管理协会网站,桂林漓江大瀑布酒店,2022房地产行业现状及前景vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 Element Plus 版本的后台管理前端解决方案#xff0c;是 有来技术团队 继 youlai-mall 全栈开源商城项目的又一开源力作功能清单技术栈清单技术栈 描述官网Vue3 渐进式 JavaScript 框架 https://v3.cn.vuejs.org/Ty…vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 Element Plus 版本的后台管理前端解决方案是 有来技术团队 继 youlai-mall 全栈开源商城项目的又一开源力作功能清单技术栈清单技术栈 描述官网Vue3 渐进式 JavaScript 框架 https://v3.cn.vuejs.org/TypeScript微软新推出的一种语言是 JavaScript 的超集https://www.tslang.cn/Vite4 前端开发与构建工具https://cn.vitejs.dev/Element Plus基于 Vue 3面向设计师和开发者的组件库https://element-plus.gitee.io/zh-CN/Pinia新一代状态管理工具 https://pinia.vuejs.org/Vue RouterVue.js 的官方路由 https://router.vuejs.org/zh/wangEditorTypescript 开发的 Web 富文本编辑器 https://www.wangeditor.com/Echarts 一个基于 JavaScript 的开源可视化图表库https://echarts.apache.org/zh/环境准备运行环境nodeNode下载地址: http://nodejs.cn/download/开发工具vscode下载地址https://code.visualstudio.com/Download必装插件Volar项目初始化创建项目npm create vitelatest 项目名称创建完成之后cd进入我们的项目然后执行npm i整合element-plus本地安装element-plus和图标组件npm install element-plus
npm install element-plus/icons-vue全局注册// main.ts
import ElementPlus from element-plus
import element-plus/theme-chalk/index.csscreateApp(App).use(ElementPlus).mount(#app) Element Plus全局组件类型声明// tsconfig.json
{
compilerOptions: {
// ...
types: [element-plus/global]
}
}页面使用element-plus组件和图标!-- src/App.vue --
templatediv styletext-align: center;margin-top: 10pxel-button :iconSearch circle/el-buttonel-button typeprimary :iconEdit circle/el-buttonel-button typesuccess :iconCheck circle/el-buttonel-button typeinfo :iconMessage circle/el-buttonel-button typewarning :iconStar circle/el-buttonel-button typedanger :iconDelete circle/el-button
/div
/template
script langts setup
import {Search, Edit,Check,Message,Star, Delete} from element-plus/iconsvue
/script3.路径别名设置vite配置// vite.config.ts
import {defineConfig} from vite
import vue from vitejs/plugin-vue
import path from path
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
: path.resolve(./src) // 相对路径别名配置使用 代替 src
}
}
})安装types/nodeimport path from path 编译器报错TS2307: Cannot find module path or its corresponding type declarations.本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错npm install types/node --save-devtypeScript编译配置同样还是 import path from path 编译报错: TS1259: Module path can only be default imported using the allowSyntheticDefaultImports flag因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式还有路径别名的配置// tsconfig.json
{
compilerOptions: {
baseUrl: ./, // 解析非相对模块的基地址默认是当前目录
paths: { //路径映射相对于baseUrl
/*: [src/*]
},
allowSyntheticDefaultImports: true // 允许默认导入
}
}别名使用举例// App.vue
import HelloWorld from /src/components/HelloWorld.vue
↓
import HelloWorld from /components/HelloWorld.vue4.配置环境变量项目根目录分别添加 开发、生产和模拟环境配置开发环境配置.env.development# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_APP_TITLE vue3-element-admin
VITE_APP_PORT 3000
VITE_APP_BASE_API /dev-api生产环境配置.env.productionVITE_APP_TITLE vue3-element-admin
VITE_APP_PORT 3000
VITE_APP_BASE_API /prod-api环境变量智能提示// 环境变量类型声明
interface ImportMetaEnv {
VITE_APP_TITLE: string,
VITE_APP_PORT: string,
VITE_APP_BASE_API: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}5.浏览器跨域配置1. 跨域原理浏览器同源策略: 协议、域名和端口都相同是同源浏览器会限制非同源请求读取响应结果。解决浏览器跨域限制大体分为后端和前端两个方向后端开启 CORS 资源共享前端使用反向代理欺骗浏览器误认为是同源请求2. 前端反向代理解决跨域Vite 配置反向代理解决跨域因为需要读取环境变量故写法和上文的出入较大这里贴出完整的vite.config.ts 配置。// vite.config.ts
import {UserConfig, ConfigEnv, loadEnv} from vite
import vue from vitejs/plugin-vue
import path from path
export default ({command, mode}: ConfigEnv): UserConfig {
// 获取 .env 环境配置文件
const env loadEnv(mode, process.cwd())
return (
{
plugins: [
vue()
],
// 本地反向代理解决浏览器跨域限制
server: {
host: localhost,
port: Number(env.VITE_APP_PORT),
open: true, // 启动是否自动打开浏览器
proxy: {
[env.VITE_APP_BASE_API]: {
target: https://api.youlai.tech, // 有来商城线上接口地址
changeOrigin: true,
rewrite: path path.replace(new RegExp(^
env.VITE_APP_BASE_API), )
}
}
},
resolve: {
alias: {
: path.resolve(./src) // 相对路径别名配置使用 代替 src
}
}
}
)
}6.svg图标Element Plus 图标库往往满足不了实际开发需求可以引用和使用第三方例如 iconfont 的图标通过整合 vite-plugin-svg-icons 插件使用第三方图标库1.安装 vite-plugin-svg-iconsnpm i fast-glob3.2.11 -D
npm i vite-plugin-svg-icons2.0.1 -D 2.创建图标文件夹项目创建 src/assets/icons 文件夹存放 iconfont 下载的 SVG 图标 3.main.ts 引入注册脚本// main.ts
import virtual:svg-icons-register;4. vite.config.ts 插件配置// vite.config.ts
import {UserConfig, ConfigEnv, loadEnv} from vite
import vue from vitejs/plugin-vue
import { createSvgIconsPlugin } from vite-plugin-svg-icons;
export default ({command, mode}: ConfigEnv): UserConfig {
// 获取 .env 环境配置文件
const env loadEnv(mode, process.cwd())
return (
{
plugins: [
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), src/assets/icons)],
// 指定symbolId格式
symbolId: icon-[dir]-[name],
})
]
}
)
} 5.TypeScript支持// tsconfig.json
{
compilerOptions: {
types: [vite-plugin-svg-icons/client]
}
}6. 组件封装!-- src/components/SvgIcon/index.vue --
template
svg aria-hiddentrue classsvg-icon
use :xlink:hrefsymbolId :fillcolor /
/svg
/template
script setup langts
import { computed } from vue;
const propsdefineProps({
prefix: {
type: String,
default: icon,
},
iconClass: {
type: String,
required: true,
},
color: {
type: String,
default:
}
})
const symbolId computed(() #${props.prefix}-${props.iconClass});
/script
style scoped
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
overflow: hidden;
fill: currentColor;
}
/style7.Pinia状态管理Pinia 是 Vue.js 的轻量级状态管理库Vuex 的替代方案尤雨溪于2021.11.24 在 Twitter 上宣布Pinia 正式成为 vuejs 官方的状态库意味着 Pinia 就是 Vuex51. 安装Pinianpm install pinia2. Pinia全局注册import { createPinia } from pinia
const appcreateApp(App)
createPinia(app)
app.use(ElementPlus).component(SvgIcon,SvgIcon).mount(#app)3. Pinia模块封装import { defineStore } from pinia;
export const useUserStoredefineStore({id:app-user,state:()({userInfo:null,token:undefined,roleList:[],setTimeout:false,lastUpdateTime:0})
})4. 使用Pinia//App.vue
script setup langts
import {useUserStore} from ./store/modules/user
/scripttemplatediv
div{{ useUserStore.$id }}/div/div/template
配置eslintprettier下载yarn add -D eslint
npx eslint --inityarn add -D eslint-plugin-vuelatest typescript-eslint/eslint-pluginlatest
typescript-eslint/parserlatest [根据个人电脑的反馈来安装]
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D配置// .eslintrc.json
{
env: {
browser: true,
es2021: true,
node: true
},
extends: [
plugin:vue/vue3-recommended,
plugin:typescript-eslint/recommended,
plugin:prettier/recommended
],
overrides: [],
parser: vue-eslint-parser,
parserOptions: {
ecmaVersion: latest,
sourceType: module,
parser: typescript-eslint/parser
},
plugins: [vue, typescript-eslint],
rules: {}
}
// .prettierrc
{
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
vueIndentScriptAndStyle: true,
singleQuote: true,
quoteProps: as-needed,
bracketSpacing: true,
trailingComma: es5,
jsxBracketSameLine: true,
jsxSingleQuote: false,
arrowParens: always,
insertPragma: false,
requirePragma: false,
proseWrap: never,
htmlWhitespaceSensitivity: ignore,
endOfLine: auto,
rangeStart: 0
}安装node-sass的话可能会报错原因是我们版本冲突的问题这个问题暂时无解我的项目中无法使用node-sass可以不使用node-sass可以使用css或者less
