创建一个Vue3+TS+vite项目 1、首先使用npm init vite@latest安装2、安装vue-router，npm install vue-router --save，src目录下创建router文件夹router文件夹内创建index.ts，配置如下import {createRouter, createWebHashHistory} from 'vue-router' const routes = [{ path: '/', name: 'Home', component: () => import('../views/home/index.vue'), meta: {title: '首页'} }]; const router = createRouter({ history: createWebHashHistory(), routes }); export default router 3、安装vuex，npm install vuex --save，src目录下创建store文件夹router文件夹内创建index.ts，配置如下import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { } }) 4、main.ts中引入router如下import { createApp } from 'vue' import App from './App.vue' import router from './router' // 引入router import store from './store' // 引入vuex createApp(App).use(router).use(store).mount('#app') // 链式引入router和vuex 5、其他配置一、如需使用scss 1、npm i sass-loader 2、npm i node-sass 二、如需使用安装postcss-px-to-viewport，将px单位转换为视口单位的 (vw, vh, vmin, vmax) 插件. 1、npm install postcss-px-to-viewport --save-dev 2、相应配置参数如下 { unitToConvert: "px", // 默认值`px`，需要转换的单位 viewportWidth: 375, // 视窗的宽度,对应设计稿宽度 viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数 propList: ["*"], // 转化为vw的属性列表 viewportUnit: "vw", // 指定需要转换成视窗单位 fontViewportUnit: "vw", // 字体使用的视窗单位 selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 mediaQuery: false, // 允许在媒体查询中转换`px` minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位 replace: true, // 是否直接更换属性值而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件 landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1134 // 横屏时使用的视窗宽度 } 三、安装element-plus及引入配置 npm i elem main.ts追加以下配置 import ElementPlus from 'element-plus' import zhCn from 'element-plus/es/locale/lang/zh-cn' import 'element-plus/theme-chalk/index.css' createApp(App).use(store).use(router).use(ElementPlus, { locale: zhCn }).mount('#app')6、注意事项一、vite引入scss报错 [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it? 使用npm安装sass npm install sass --save-dev 二、element-plus的汉化问题 如果main.js引入的汉化无效的情况下，需要去往app.vue配置汉化，如下配置 <template> <test-vue /> <!-- 设置汉化 --> <el-config-provider :locale="locale"> <router-view/> </el-config-provider> </template> <script lang="ts"> import { ElConfigProvider } from 'element-plus' import zhCn from 'element-plus/lib/locale/lang/zh-cn' export default { components: { [ElConfigProvider.name]: ElConfigProvider }, setup () { return { locale: zhCn } } } </script>

Vue2通过directive自定义指令实现按钮级别的权限控制 　　需求：不做路由的权限，只是要实现按钮级别的权限控制，具体实现方法，利用vue的directive自定义指令，在用户登录的时候获取当前用户的权限，处理好后端给的数据后，通过Vuex存起来。登录后，用户没有权限就删除相关节点，有权限就不处理，做到按钮级别的权限控制。具体代码如下！{mtitle title="新建auth.js"/}/* * @Author: lzx * @Date: 2021-10-18 09:01:36 * @LastEditors: lzx * @LastEditTime: 2021-12-10 15:35:28 * @Description: Fuck Bug * @FilePath: \xsy-auth\src\util\auth.js */ import Vue from 'vue' // 使用自定义指令v-auth做按钮权限控制 Vue.directive('auth', { inserted (el, bindings, vnode) { const isSuperAdmin = sessionStorage.getItem('isSuperAdmin') // 这里校验，如果是系统默认的超级管理员就绕过权限校验 if (isSuperAdmin === '1') { } else { // 获取值 const authValue = bindings.value // 获取值的状态 const openOfClose = vnode.context.$store.state.auth.target[authValue] // 为true就显示，否则删除元素 !openOfClose && el.parentNode.removeChild(el) } } }){mtitle title="Vuex的配置"/}import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 当前用户权限 auth: {} }, // 获取user getters: { getUser (state) { } }, // 唯一可以修改state mutations: { updataAuth (state, auth) { state.auth = auth } }, // 异步执行mutations方法 actions: { asyncupdataAuth (context, auth) { context.commit('updataAuth', auth) } }, modules: { } }){mtitle title="main.js全局引入auth.js"/}// 全局引入自定义指令的按钮权限控制 import './util/auth'{mtitle title="登录的处理"/}登录成功->获取权限列表->处理数据->存入Vuex // 对象合并 数组转对象 const target = {} authArr.forEach(auth => { const source = JSON.parse(`{"${auth.mark}":${auth.url}}`) // 利用JSON.parse将对象,格式直接造出来 Object.assign(target, source) }) this.$store.dispatch('asyncupdataAuth', { target }){mtitle title="页面的使用"/}<el-button v-auth="'delete'"> <i class="iconfont icon-btn_shanchu"></i> 删除 </el-button>

Vue3+ts使用外挂配置Api public文件夹下创建个config.js文件window.$baseURL = { // 后台url devBaseURL: 'http://192.168.4.67:17000/sign/', prodBaseURL: '/sign/' }使用const config = (window as any).$baseURL baseURL: process.env.NODE_ENV === 'production' ? config.prodBaseURL : process.env.VUE_APP_API,注意：ts报错解决（src下创建文件window.g.d.ts）declare interface Window { $baseURL: any }

Vue前端模拟生成验证码并且效验功能 　遇到个登陆功能需要输入验证码，后端没接口，但是为了防止机器人恶意登陆还是要写个验证码效验的，活就跑到前端来了，利用随机数写的一个4位验证码。{mtitle title="js核心代码如下"/}//定义code用于存放验证码 var code = '' // 设置长度，这里看需求，我这里设置为4 var codeLength = 4 // 设置随机字符 // 这里可以写成字母，这样就可以随机生成字母验证码了 var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9) // 循环codeLength 我设置的4就是循环4次 for (var i = 0; i < codeLength; i++) { // 设置随机数范围,这设置为0 ~ 36 var index = Math.floor(Math.random() * 9) // 字符串拼接 将每次随机的字符 进行拼接 code += random[index] } // 将拼接好的字符串赋值给展示的code this.code = code　效验功能就不写了，就是获取用户输入的验证码，和生成的验证码做对比，对就OK不对就告诉用户：吊毛你输入的验证码有误！{mtitle title="这里CSS对样式改进"/}/* 让验证码变形，看起来更加像一点*/ letter-spacing: 15px; transform:skew(45deg); transform: scale(1.,0.5);

前端生成6位或多位随机字符串 /** * 生成6位随机字符串 * @returns */ const randomCode = () => { let character = '' let len = 6; // 选择的生成的位数 let code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASFGHJKLZXCVBNM' let maxPos = code.length; for (let i = 0; i < len; i++) { character += code.charAt(Math.floor(Math.random() * maxPos)) } return character }