Vue3+Element Plus前端项目
Vue3+Element Plus前端项目模板
大约在一年前，我已经接触到了这个框架了，
但是当时由于比较忙，直接上手进行了操作，还未能好好学习一下，
直接就对需求进行了上手了，
现在时间闲下来了，因此也写一下关于这块的学习和理解
本文的目标是提供一个Vue3 + Element Plus前端项目的模版，并详细说明模板的构建思路。您可以直接下载模版
GitHub - xiatianliang1024gm/vue-element-template
查看本篇文档前，需要对前端(html/css/javascript/vue)有一个基本的了解
参考 ：
安装VS Code IDE
https://code.visualstudio.com/ 选择适合的平台安装包下载安装
安装配置node.js
node.js是一个服务端的JavaScript运行环境(浏览器也是一种运行环境)，npm（node program manager）是node.js包管理程序 ，类似nuget之于c#，maven之于java，gomod之于golang，pipe之于python。安装node.js时附带安装npm。
https://nodejs.org/en 下载安装包，双击安装，安装完成后，执行如下命令查看版本号，如果正常显示则安装成功(注意具体的版本号取决于下载的版本，可能和图上不一致)，如果不正常检查安装文件夹的bin的路径是否加入到系统PATH环境变量
node --version // 查询node版本
v20.3.1 // 这是结果
打开命令行工具执行下面set registry指令，设置镜像地址，镜像地址由阿里云维护，拉取node.js依赖包速度更快，设置完成后，执行get registry获取配置指令，预期能看到之前set的地址
# 设置成功后再查询
npm config set registry https://registry.npmmirror.com
# 设置成功后再查询
npm config get registry
初始化vue项目
npm create vue@latest // 创建vue项目
交互式选项结束后，执行绿色指令，创建的默认项目启动完成，ctl + 鼠标点击命令行中的网址（http://localhost:5173/）5173 vite启动的默认端口，访问页面，效果如下右图
项目目录结构说明
|
|
文件夹/文件名
|
说明
|
|
.vscode
|
vs code IDE相关配置，例如插件、调试配置等
|
|
|
dist |
npm run build后产物 不需要推送到代码仓库
|
|
|
node_modules |
项目依赖的node 模块 不需要推送到代码仓库 |
|
|
.gitignore |
由npm create vue指令生成的项目，自动生成了.gitignore文件，已经包括上面标注的不需要推送到代码仓库配置 |
|
|
index.html |
项目的入口文件，通过浏览器访问某一个网址时，第一步就是获取web服务中的index.html文件，然后再根据index.html中的信息加载其他html、css、js文件 |
|
|
public |
公共文件 index.html文件中依赖的其他html/css/图片/静态资源等文件放置处，注意和src下的assets文件夹区分 |
|
|
.eslintrc.cjs |
ESLint解决关于js代码质量和代码风格的问题 规则是可更改的，并且可以自行定义和加载规则 |
|
|
.prettierrc.json |
prettier是一款支持各种前端框架、语言、配置文件的格式化工具，它将基于同一的规则对代码进行AST(抽象语法书)分析和重写，保证代码风格一致且符合配置规范，例如缩进、单引号、双引号等 |
|
|
package.json package-lock.json |
package.json是npm用来记录项目基本信息及依赖的的文件 -lock文件用来记录依赖的具体信息，例如完整性校验码、下载地址、间接依赖库的版本 |
|
|
tsconfig.json tsconfig.app.json tsconfig.node.json
|
tsconfig.json: type script语言相关配置 tsconfig.app： app指浏览器端 tsconfig.node.json： node指服务端 |
|
|
vite.config.ts |
vite构建工具的配置，例如服务端代理，Element Plus组件库的解析配置 |
|
|
vitest.config.ts |
vitest单元测试配置 |
|
|
src目录下文件 |
App.vue |
vue项目的根组件，被main.ts引用 |
|
main.ts |
vue项目的执行入口文件，被index.html引用 |
|
|
assets |
在src目录中被引用的图片/静态资源等文件 注意在vue的组件框架下，组件自有的html和css文件维护在组件单独的.vue文件中(组件化) |
|
|
components |
组件--web页面上从展示、交互、功能等维护拆分出来的小的构建，包含数据、展示、交互逻辑等，组件化思路降低耦合，提升复用性也是前段所有框架最基本的原则 组件可以包含其他组件 |
|
|
router |
路由相关 |
|
|
stores |
状态相关 |
|
|
views |
视图相关，一般通过router路由跳转的目标地址都是视图 视图由组件构成，视图不应该包含视图 |
配置自动保存/保存时自动format
配置中搜索「 save 」，Auto Save设置为afterDelay，时间间隔为1000ms(1秒)，避免修改了代码，但忘记save，不生效问题
设置在save保存时自动格式化文件
格式化规则配置依据，都改成Prettier
.prettierrc.json配置说明
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
清理默认的文件 写第一个页面
之所以要将npm create vue 指令生成的默认文件删掉是因为这些文件都是和页面具体相关的，实际开发中的页面和这个欢迎页面完全不一样，留下来，还会引起干扰
将src目中下，assets/components/stores/views文件夹下的文件都删除，只保留App.vue, main.ts, router/index.ts文件
创建最简单的HomeView和route配置
src/views/HomeView.vue
<template>
<h1>Home</h1>
</template>
src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/HomeView.vue')
}
]
})
export default router
删掉main.ts中的css文件导入(此文件是默认初始化项目)
将CSS Tools: Reset CSS public目录下，此文件的目的是干掉浏览器默认的样式配置，避免干扰，在index.html文件引用
npm run dev启动项目，访问http://localhost:5173/，会看到最简单的Home页面
引入Element-Plus组件依赖
npm安装依赖
npm install element-plus --save
npm安装按需自动导入插件
// -D 表示 development环境的依赖，prod环境不依赖
npm install -D unplugin-vue-components unplugin-auto-import
在vite.cofngi.ts中配置按需导入插件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 按需自动导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 按需组定导入插件配置
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
使用Element插件
在Button 按钮 | Element Plus中选择一个btn，打开代码，复制一个el-button的行，添加到HomeView.vue文件中
src/views/HomeView.vue
<template>
<h1>Home</h1>
<el-button type="success">Success</el-button>
</template>
访问http://localhost:5173 按钮正常展示说明成功
引入Element-Plus icon图标
图标的选择有非常多，https://iconify.design/docs/usage/svg/unplugin/统一了各种图标集合，一个框架多种选择，ant-design和element的图标都是其中的一种
https://juejin.cn/post/7169485227188813860
# 安装icon依赖
npm install @element-plus/icons-vue
# 安装icon自动导入插件
npm i -D unplugin-icons
# 下载icon数据包
npm i -D @iconify/json
配置vite.config.ts，假如图标自动导入配置
// 省略了引入部分
export default defineConfig({
plugins: [
vue(),
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()
],
dts: path.resolve(pathSrc, 'components.d.ts')
}),
Icons({
autoInstall: true
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
在Home页面增加icon看看效果，注意图标的写法，直接从element plus上拷贝的代码是House，无法正常显示
IEPHouse => i-ep-house
I: icon默认的前缀
ep: element plus
<template>
<h1>Home</h1>
<el-button type="success">Success</el-button>
<el-icon><IEpHouse /></el-icon>
<el-icon><IEpOdometer /></el-icon>
</template>
到这里Vue3 + Element Plus项目依赖配置已完成，后面再介绍如何布局，设置菜单和路由
浙公网安备 33010602011771号