关于

介绍

基于 Vue 3.0 + Element Plus 的后台前端解决方案，支持：开发调试、构建、代码规范校验等。

技术栈

Vue、Webpack、ES6、Vue Router、Vuex、Sass、PostCSS 等。

命令

# 安装依赖
$ npm install

# 开发调试
$ npm run serve

# 代码校验
$ npm run lint

# 构建
$ npm run build

# 从模板创建文件
$ npm run newfile

规范

项目结构

|- plop-templates                   基本模板
|- public                           网站公共目录
|  |- favicon.ico                   网站图标
|  |- index.html                    HTML 模板
|- src                              源码目录
|  |- assets                        待编译的静态资源
|     |- images                     图片
|        |- components              组件图片
|     |- styles                     样式
|        |- global                  全局样式
|           |- components           组件样式
|              |- iconfont.scss     iconfont
|           |- reset                CSS Reset
|        |- utils                   Sass 工具
|           |- variables            Sass 变量
|  |- components                    公共组件
|  |- composables                   公用 composiable 函数
|  |- models                        数据模型
|  |- router                        路由配置
|     |- routes                     各个视图的路由配置
|  |- store                         状态管理
|     |- modules                    状态管理（指定命名空间）
|        |- auth.js                 auth 状态管理
|  |- utils                         JS 工具
|  |- views                         视图
|     |- home                       首页
|  |- App.vue                       页面入口
|  |- main.js                       程序入口

公共组件规范

公共组件放在 /src/components 下。

|- my-component               my component 组件
|  |- index.vue               my component 的入口
|  |- script.js               my component 的脚本
|  |- style.scss              my component 的样式
|  |- utils                   my component 的 JS 工具
|  |- components              my component 的子组件
|     |- child-component      my component 的子组件 child component

视图规范

视图，也就是页面，放在 /src/views 下。规范和公共组件一致。

链接

文档

• Vue3 中文文档(官方)
• Vue3 中文文档
• Vue3 组合式 API(官方)
• Vue3 组合式 API
• Vue3 组合式 API 高阶指南
• Vue3 资源推荐
• Vue3 迁移指南
• Vue3 API 参考
• Vue3 风格指南

配套工具

• Vue CLI
• Vue Router
• Vuex

视频

• 米修在线 - Vue3 快速上手指南
• 李南江 - Vue3 正式版教程
• 哈默聊前端 - Vue3
• 大地 - Vue3 教程
• Young 村长 - Composition API + 深度解读
• Young 村长 - Vue3 光速上手
• Young 村长 - 项目打包、部署、CI/CD

链接

• 【Vue3 官方教程】🎄 万字笔记 | 同步导学视频
• vue3-study
• Vue-Mastery 学习笔记
• @vue/composition-api - 用于提供组合式 API 的 Vue 2 插件
• @vue/composition-api 速成课
• Vue Class Component v8 - The next Vue Class Component for Vue v3.
• Vue3 实战笔记
• 快速使用 Vue3 最新的 15 个常用 API

交互参考

• Ant Design Pro
• Ant Design Pro Components
• View UI 专业版
• 复盘20+基于React的开源管理后台&插件