关于
介绍
基于 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 风格指南
配套工具
视频
- 米修在线 - 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