1 创建Vue3项目

1.1 相关链接

视频链接

视频配套文章

gitee代码

1.2 Vue Router

vue官网关于router的部分

// @/router/index.jsimport { createRouter , createWebHashHistory } from "vue-router";
const routes = [
]
const router = createRouter({history: createWebHashHistory(),routes: routes,
})
export default router

// @/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'const app = createApp(App)
app.use(router)//  注册路由
app.mount('#app')

1.3 Element

官网
组件

npm install element-plus -D -S

图标库

npm install @element-plus/icons-vue -D -S

import { createApp } from 'vue'
import App from './App.vue'
// 导入自定义的路由
import router from '@/router/index'
// 导入element组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 导入element图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// element组件的国际化
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'const app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.use(router)
app.use(ElementPlus, {locale: zhCn,
})
app.use(ElementPlus)app.mount('#app')

1.4 scss

Vue3安装scss教程

npm install sass-loader -S
npm install style-loader -S
npm install sass -S

// 文件在工程项目的根路径下 vite.config.js
export default defineConfig({plugins: [vue()],// 这个是配置scsspluginOptions: {'style-resources-loader': {preProcessor: 'scss',patterns: []}},
})

1.5 mitt

Vue3：mitt快速上手

npm install mitt -S -D

// @/utils/mitt.js
import mitt from 'mitt'
export const emitter = mitt()

1.6 axios

npm install axios -S -D

// @/http/index.js
import axios from "axios";const instance = axios.create({baseURL: 'http://localhost:5173/',timeout: 1000,headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);
});export default instance// 发送请求
const data = {key1 : value1,key2 : value2}
instance.post('/api/register', data)
// 将data发送到http://localhost:5173/api/register
// 服务器端就会接收到post请求，携带data数据

1.7 echarts

官网

npm install echarts -S -D

1.8 配置vite.config.js

// 在项目目录的根路径下，vite.config.js 
// 在plugins下增加一下配置server:{port: 8080, // 端口号open: true, // 自动打开浏览器cors: true, // 允许跨域}

2 CSS部分

2.1 样式穿透

使用了element-plus中的Tabs 标签页

在style中添加scoped

1. 代码中class=’demo-tabs‘在编译后在样式的选择器后面添加属性选择器，实现了组件样式的私有化，里面的元素在编译后很明显没有data-v-2b2fc29这个属性

    .el-tabs__item{color: #333;font-size:18px}

2. 使用上面的代码给.el-tabs__item修改属性，发现它没有data属性，需要使用样式穿透
   
   使用了:deep样式穿透后，就能修改该元素的属性了

    :deep(.el-tabs__item){color: #333;font-size:18px}

2.2 :style ：在样式中使用插值语法

<div :style="{backgroundColor:$a.todo?'red':'blue'}"></div>

3. ElementUI

3.1 rules： 数据验证

model和prop的值是由数据的变量决定的

3.2 修改element.style中的样式

通过修改elementUi组件的样式发现，在官网组件的下面，如果提供了样式的属性则通过该属性修改，如果没有提供，通过style修改，如果通过style无法修改，最好就不要动了，组件会有默认的样式，自己在<style>中修改可能只修改了表面，有些会冲突，比较麻烦

加上!important，deep没有用

.el-menu{--el-menu-hover-bg-color:#2d333b !important;
}

3.2.1 组件中的一个样式对应到浏览器中发生很大变化

这是一个导航的组件，在el-menu中没有添加颜色等样式时，对应的浏览器中也什么都没有

当在el-menu中添加了3个样式后，浏览器中增加了5项样式

而在<style>中添加的样式，在组件中的某一部分样式不会起作用，达不到在标签中添加样式的效果，所以如果能在组件中添加的样式就不要在

3.3 分页器

• 分页器的html部分

<template><el-paginationstyle="margin-top: 10px"v-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 30, 40]"layout=" prev, pager, next, jumper,->,total, sizes":total="totalPage"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>
</template>

	 style="margin-top: 10px" // 设置与上面表格部分的间隔v-model:current-page="currentPage" // 当前页页码，发生改变时触发@current-change的回调函数v-model:page-size="pageSize"	// 每页显示条目个数:page-sizes="[10, 20, 30, 40]"	// 每页显示个数选择器的选项设置，发生改变时page-size发生变化，触发@size-change的回调函数layout=" prev, pager, next, jumper,->,total, sizes" // 设置分页器的布局:total="totalPage"	// 总条目数@size-change="handleSizeChange" // 每页显示的条目数有变化时触发该方法@current-change="handleCurrentChange" // 当前页有变化时触发

• 分页器代码部分

<script setup lang="ts">
import { ref } from 'vue'
/**分页器相关 */
const currentPage = ref(1) // 当前页
const pageSize = ref(10) // 每页显示条目个数
const totalPage = ref(0) // 总条数
/*** @function  页码发生改变时调用该方法，默认跳转到第一页* @param {number} current 传入跳转到第几页,默认第一页。如要保持页面不变，传入currentPage.value*/
async function requestPage(current: number = 1) {// 参数的页码数大于总页数时，跳转到最后一页if (current > Math.ceil(totalPage.value / pageSize.value)) {currentPage.value = Math.ceil(totalPage.value / pageSize.value)} else {currentPage.value = current}// 根据当前页和每页显示多少条，请求数据const result = await request()//发送请求if (result.code === 200) {pageSize.value = result.data.sizetotalPage.value = result.data.total}
}
// 加载该组件时，运行该方法
requestPage()
/*** @callback sizeChange 每页显示条目个数发生改变时调用该方法*/
function handleSizeChange() {requestPage(currentPage.value)
}
/*** @callback currentChange 页码发生改变时调用该方法*/
function handleCurrentChange() {requestPage(currentPage.value)
}
</script>

3.4 <el-image>使用本地图片

Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

<el-image :src="url"/>const url = new URL('../images/dataScreen-header-btn-bg-r.png', // 本地图片的路径import.meta.url,
).href

4. 使用svg图标

vue3使用svg图标 多种方式

1. 以阿里巴巴的图标举例

2. 复制图标的svg代码
   

3. 新建个存放svg图标的目录，新建.vue文件
   

4. 在<template>标签内粘贴svg的代码

<template><svg t="1700026328900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4071" width="200" height="200"><path d="M512 128a288.64 288.64 0 0 1 288 288c0 132.48-203.52 384-288 465.28-84.48-78.72-288-332.8-288-465.28A288.64 288.64 0 0 1 512 128m0-64a352 352 0 0 0-352 352c0 192 320 544 352 544s352-349.44 352-544A352 352 0 0 0 512 64z" fill="#2C2C2C" p-id="4072"></path><path d="M512 576a160 160 0 1 1 160-160A160 160 0 0 1 512 576z m0-256a96 96 0 1 0 96 96A96 96 0 0 0 512 320z" fill="#2C2C2C" p-id="4073"></path><path d="M256 896m32 0l448 0q32 0 32 32l0 0q0 32-32 32l-448 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#2C2C2C" p-id="4074"></path></svg>
</template>

5. 在代码中也可以调整颜色和大小
   

6. 使用

<template><-- 假装这里有代码--><navigation-icon class="icon"></navigation-icon><-- 假装这里也有代码-->
</template><--设置样式,调整大小等,这里无法调整颜色-->.icon {width: 24px;height: 24px;margin-right: 8px;}

7. svg做的图标要独占一行,使用布局将它安排到合适的地方

5. 富文本编辑器

wangEditor官网
可以设置的内容太多，详细看官网

1. 安装

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

2. 配合dialog成为弹窗式的编辑器

dialog的Html部分

<template><el-dialogv-model="dialogVisible":title="dialogTips"width="50%":before-close="handleClose">
<!--        editor 部分--><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div>
<!--        editor 部分结束--><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消编辑</el-button><el-button type="primary" @click="uploadEditor">提交</el-button></span></template></el-dialog>
</template>

js代码部分

1. 重点：valueHtml这个数据，它就是编辑区的内容
2. 一般来说在显示editor时，要显示上一次的内容，在编辑完成后，将内容传到某个地方保存
3. 虽然代码比较多，关键的地方是dialog的显示和关闭，valueHtml的读取和保存，这四个地方需要编写，其他都是样式的设置等等不重要的东西

<script setup lang="ts">import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport { Editor, Toolbar } from '@wangeditor/editor-for-vue'import {onBeforeUnmount, onMounted, ref, shallowRef} from "vue";// 从这里开始是dialog的代码import {ElMessage, ElMessageBox} from "element-plus";// dialog可见/不可见const dialogVisible = ref(false)// dialog的titleconst dialogTips = ref('我是dialog的标题')// dialog右上角的'X'const handleClose = (done: () => void) => {ElMessageBox.confirm('你确定要关闭编辑器吗?').then(() => {done()}).catch(() => {// catch error})}// 传递给父组件的stateconst dilogData = ref()// 传递给父组件的方法function dialogVisibleFun() {dialogVisible.value = true // 显示dialog}// 向父组件传递一个方法，这个方法用于父组件调用dialog，也就是dialog显示defineExpose({dialogVisibleFun,dilogData // 这个数据在示例里作用：编辑区显示上次的编辑内容})// dialog代码到这里结束// editor实例，必须用 shallowRefconst editorRef = shallowRef()// 编辑区的内容，属于editor的部分const valueHtml = ref()// 编辑器默认的模式，或'simple'const mode = ref('default')// 编辑区可能要显示上一次的编辑内容，这里给个示例onMounted(() => {setTimeout(() => {// 我这里假装内容dilogData是从父组件传来的，在这里内容也可以从数据库查询valueHtml.value = dilogData}, 1500)})// 工具栏配置，excludeKeys排除某些配置const toolbarConfig = {excludeKeys: []}// 工具栏显示的菜单，写菜单组 key 的值即可，写在下面的就是不再工具栏显示的toolbarConfig.excludeKeys = ['blockquote','bgColor','color','group-more-style','fontFamily','bulletedList','numberedList','lineHeight','todo','emotion','insertLink','group-video','insertTable','codeBlock','divider','fullScreen',// 'group-image',]// 工具栏中的菜单点击后产生什么效果，都可以在这里编辑，这里演示的是上传图片功能const editorConfig = { placeholder: '请输入内容...' ,MENU_CONF : {// 配置上传图片'uploadImage':{server: 'http://127.0.0.1:3007/editor/uploadEditor',maxFileSize: 1 * 1024 * 1024,methods: 'post',fieldName: 'file', //上传文件名metaWithUrl: true, // 参数拼接到 url 上customInsert(res, insertFn) {//insertFn方法一执行，就会给编辑区添加该参数中的内容insertFn(res.data.url)},}}}// 点击确定按钮，向数据库或别的地方提交编辑区的内容，这里也是示例const uploadEditor = ()=> {(async ()=>{if('条件判定，比如服务器返回成功'){// 提交成功则关闭dialogdialogVisible.value = falseElMessage({message: '提交成功',type: 'success',})}else{ElMessage({message: '提交失败，请另存编辑区的内容，以免丢失',type: 'error',})}})()}// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！}</script>

父组件中部分

1. 在html部分添加组件，设置ref属性，有按钮点击显示dialog

<wangEditor ref="wangEditorVue"></wangEditor><el-button class="corporate-name-button" type="primary" plain @click="dialogVisable">编辑</el-button>

2. script部分

const wangEditorVue = ref()
const dialogVisable = ()=>{wangEditorVue.value.dialogVisibleFun()wangEditorVue.value.dilogData = '编辑区显示上一次的内容'
}

6.js部分

6.1 解构数组，成为一个新数组

<script setup>
const a = [{"id": 1,"set_name": "swiper1",
},
{"id": 2,"set_name": "swiper2",
},
{"id": 3,"set_name": "swiper3",
}]
const [first,...intro] = a
console.log(first)
console.log(intro)
</script>

结果：

6.2 Promise

Promise用于表示一个异步操作的最终完成（或失败）及其结果值。

• resolve和reject是两个回调函数，resolve()执行会触发then，reject()执行会触发catch，从而改变Promise到稳定状态，并且两个函数只能执行一个

<script>
new Promise((resolve, reject) =>{setTimeout(() =>{//成功的时候调用resolveresolve('成功data')//失败的时候调用reject//reject('error message')}, 1000)
}).then((data) =>{//处理成功后的逻辑console.log(data);//这个data 是接收的resolve参数--
}).catch((err) =>{console.log(err);
})
</script>　　
// 结果：成功data

<script>
new Promise((resolve, reject) =>{setTimeout(() =>{//成功的时候调用resolve//resolve('成功data')//失败的时候调用rejectreject('error message')}, 1000)
}).then((data) =>{//处理成功后的逻辑console.log(data);//这个data 是接收的resolve参数--
}).catch((err) =>{console.log(err);
})
</script>　　
// 结果：error message

• 在一个promise链中，只要任何一个promise被reject，promise链就被破坏了，reject之后的promise都不会再执行，而是直接调用.catch方法。

与async 、await配合使用

• 使用await调用Promise，假如Promise中有then方法，则会执行then方法，返回值为undefined

<script setup lang="ts">
function doubleAfter2seconds(num: number): Promise<number | void> {return new Promise((resolve, reject) => {setTimeout(() => {resolve(2 * num)}, 0)}).then((result) => {// resolve会执行then方法，result就是resolve传过来的参数（2 * num）console.log('doubleAfter2seconds方法中：' + result)})
}async function testResult() {// 不使用await修饰，得到的函数返回值就是Promise对象let result = doubleAfter2seconds(30)console.log('testResult方法中不使用await修饰:')console.log(result)//使用await修饰，并且Promise中使用then方法，则函数返回值是undefinedlet result1 = await doubleAfter2seconds(30)console.log('使用await修饰后:' + result1)
}
testResult()
</script>

代码执行结果：

• 在Promise中不使用then方法，会返回resolve方法中的参数

<script setup lang="ts">
function doubleAfter2seconds(num: number): Promise<number | void> {return new Promise((resolve, reject) => {setTimeout(() => {resolve(2 * num)}, 0)})
}async function testResult() {// 不使用await修饰，得到的函数返回值就是Promise对象let result = doubleAfter2seconds(30)console.log('testResult方法中不使用await修饰:')console.log(result)//使用await修饰，并且Promise中不使用then方法，则函数返回值就是Promise的resolve中的参数let result1 = await doubleAfter2seconds(30)console.log('使用await修饰后:' + result1)
}
testResult()
</script>

6.2 every()和some()

6.2.1 every()

一个数组中的所有元素 是否都满足给定的条件，只要有一个不满足返回false

const smallList = [0, 1, 2]
const result = smallList.every((item) => {return item == 0
})
console.log('result', result)

const smallList = [0, 1, 2]
const result = smallList.every((item) => {return item != 0
})
console.log('result', result)

以上两端代码result的结果都是false

6.2.2 some()

数组中只要有一个元素满足条件，返回true

const smallList = [0, 1, 2]
const result = smallList.some((item) => {return item != 0
})
console.log('result', result)

const smallList = [0, 1, 2]
const result = smallList.some((item) => {return item == 0
})
console.log('result', result)

上面两段代码中result的结果都是true

6.2.3 与filter()组合使用

给定两个数组

1. 筛选出bigList中有，且smallList中没有的元素
2. 筛选出bigList中有，且smallList中也有的元素，交集

const bigList = [0, 1, 2, 3, 4, 5]
const smallList = [0, 1, 2]

• 使用every()

// 筛选出`bigList`中有，且`smallList`中没有的元素
const list = bigList.filter((item) => {let a = smallList.every((item1) => {return  item1 != item      })return a
})
console.log(list)
// [3, 4, 5]

// 筛选出`bigList`中有，且`smallList`中也有的元素，交集
const list = bigList.filter((item) => {let a = smallList.every((item1) => {return item1 != item})return !a
})
console.log(list)
// [0, 1, 2]

• 使用some()时，此处的判断条件不能使用!=

// 筛选出`bigList`中有，且`smallList`中也有的元素，交集
const list = bigList.filter((item) => {let a = smallList.some((item1) => {return item1 === item})return a
})
console.log(list)
// [0, 1, 2]

// 筛选出`bigList`中有，且`smallList`中没有的元素
const list = bigList.filter((item) => {let a = smallList.some((item1) => {return item1 === item})return !a
})
console.log(list)
// [3, 4, 5]

7 Vue 部分

7.1 <component :is=''>

• 效果：点击图标，交替更换图标

// html部分
<el-icon  @click='changeIcon'><component :is="isFold ? 'Fold' : 'Expand'"></component>
</el-icon>
// js部分import { ref } from 'vue'
const isFold = ref(false)
const changeIcon = () => {isFold = !isFold
}

7.2 给class动态添加属性

<divclass="layout_slider":class="{ Fold: isFold }"
></div>
// 当isFold 位ture时,class中多了Fold属性
<div class="layout_slider Fold"></div>
// 当isFold 位false时,class中没有Fold属性
<div class="layout_slider"></div>

7.3 页面全屏

• 使用dom操作

const fullScreen = () => {// 全屏则返回ture，不是全屏则返回noneconst full = document.fullscreenElementif (full) {document.exitFullscreen()} else {document.documentElement.requestFullscreen()}
}

7.4 进度条

1. 安装进度条插件

pnpm i nprogress

2. 在路由守卫中使用

// 路由鉴权：项目中的路由在什么条件可以访问，什么条件不能访问
import router from '@/router/index.ts'
// 进度条插件,爆红，要在vite-env.d.ts中声明
import nprogress from 'nprogress'
// 进度条样式,在文件node_modules/nprogress/nprogress.css中修改样式
import 'nprogress/nprogress.css'
// 全局守卫：项目当中任意路由切换都会触发的钩子
// 全局前置守卫
router.beforeEach((to, from, next) => {nprogress.start()next()
})
// 全局后置守卫
router.afterEach((to, from) => {nprogress.done()
})

3. 作为全局的进度条，该文件需在main中引入

import './permisstion'