Home

Awesome

关于

介绍

基于 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 下。规范和公共组件一致。

链接

文档

配套工具

视频

链接

交互参考