# vue-cli4.x-vue3-ts **Repository Path**: pan-gitee/vue-cli4.x-vue3-ts ## Basic Information - **Project Name**: vue-cli4.x-vue3-ts - **Description**: vue-cli4.5.9+vue@3.x+typeScript 搭建前端开发框架 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 5 - **Created**: 2022-06-07 - **Last Updated**: 2022-06-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vue3-cli4-ts vue-cli4.5.9+vue@3.x+typeScript+mockjs 搭建前端开发框架 ## 简介 vue3 发布之后，性能增强，速度vue2的倍数，打包体积都在减小（treeshaking），composition api 增加了项目可读性。 该项目是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。 ### Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run dev ``` ### Compiles and hot-reloads for mock ``` npm run dev:mock ``` ### Compiles and minifies for production ``` npm run build ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). ### 参考学习地址 ``` 1、https://www.jb51.net/article/198629.htm https://cloud.tencent.com/developer/article/1783870 2、三阶段--day07--前端VUE.js+Axios+后端MP+SSM--实现前端页面表单操作数据库:https://blog.csdn.net/weixin_58580280/article/details/119253753 3、权限管理：https://www.cnblogs.com/lisalisalisa/p/14329580.html 4、权限管理实操学习地址：https://www.cnblogs.com/xifengxiaoma/p/9649895.html 5、权限管理实操学习地址：https://blog.csdn.net/booy123/article/details/106910844/?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4.no_search_link&spm=1001.2101.3001.4242.3 6、权限管理实操学习地址：https://blog.csdn.net/qq_44042316/article/details/106528251 7、20211122：https://segmentfault.com/a/1190000040631051 ``` ### 项目主要依赖包版本 * vue@3.0.0 ----> vue@3.0.11 ----> "vue": "^3.2.11", + vue-router ^4.0.0-0 ----> "vue-router": "^4.0.8", + vuex ^4.0.0-0 ### 项目采用技术: * vue3 + composition api * typescript 4.1.5 * less * echarts5 ### vue next 系列: + element-plus + vue-router + vuex 4 + vue-vue-i18n-next ## 功能 ```text - 用户管理 - 登录（视频背景） - 注销 ``` ## 开发注意事项 ``` 1、项目中的px单位都会自动转化为rem; 2、字体大小都必须不能转化rem，字体大小在 css、less、scss文件中的单位都必须大写；如：font-size: 16PX; 或 font-size: 16Px; 3、对于1px也不能转化为rem单位； 4、border 的宽度也不能转化为rem单位； 5、在vue文件中，为了规避px单位转化为rem，需要在样式后面添加 “ /*no*/ ” 注释，这是告诉px2rem对此句样式，不转化rem ; 6、在使用iconfont图标时，请照 “el-icon- iconfont icondaoru” 使用，其中“el-icon-” 为样式需要，“iconfont” 为iconfont图标前缀; 7、在提交表单时，如果媒体类型为'application/json'，那么就需要在http中传入，也就是后端需要接收json格式。否则，默认为'application/x-www-form-urlencoded',此时就需要使用Qs.stringify转化后，后端才能接受到参数。 8、vue文件必须首字母大写，不能采用index.vue这样的名称命名，因为可能存在引入文件报错。采用大写字母方式可以杜绝文件引入报错。 ``` ### 实现前后端分离的登陆验证token思路 ``` 1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码 2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token 3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面 4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面 5、每次调后端接口，都要在请求头中加token 6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401 7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面 ``` ### 权限管理实现思路 ``` 1、基础权限管理需要4张表：用户信息表、角色表、菜单表、角色菜单表； 2、实现权限管理的方案有两种： * 前端记录所有的权限。用户登录后，后端返回用户角色，前端根据角色自行分配页面； * 前端仅记录页面，后端记录权限。用户登陆后，后端返回用户权限列表，前端根据该列表生成可访问页面。【本项目采用】 3、 ``` ### 目录结构 ``` admin-tmpl ├─ .env.dev.build # 开发环境 ├─ .env.dev.serve # 开发本地本地 ├─ .env.prod.build # 生产环境 ├─ .env.prod.serve # 生产环境本地 ├─ .env.test.build # 测试环境 ├─ .env.test.serve # 测试环境本地 ├─ .eslintrc.js # eslint ├─ README.md ├─ dist # 打包dist ├─ mock # mock服务 ├─ public # 静态资源 ├─ src # 源码 │ ├─ @types # ts 声明 │ ├─ apis # 接口请求 │ ├─ assets # webpack打包的资源 │ ├─ components # 公共组件 │ ├─ config # 全部配置 │ ├─ constant # 常量 │ ├─ directives # 全局指令 │ ├─ layout # 全局Layout │ ├─ locales # 国际化 │ ├─ model # 全部model存放 │ ├─ plugins # 插件 │ ├─ router # 路由 │ ├─ store # 全局store管理 │ ├─ styles # 全局样式 │ ├─ utils # 全局公共方法 │ └─ views # 所有业务页面 ├─ tsconfig.json # ts 编译配置 └─ vue.config.js # vue-cli 配置 ```