Commit 8836cbdf authored by lipengcheng 's avatar lipengcheng

docs: 更新文档

parent 4ebf41b7
......@@ -6,7 +6,20 @@
> node 8.11.0+ (推荐12.18.3)
> npm 6.14.6
来画工具宝
基于vue-cli3完善的脚手架项目,增加一些基础通用配置。
包含配置如下:
- [x] 按需引入了lodash
- [x] moment二次封装进行汉化,并且配置为过滤器、实例方式调用
- [x] 生产环境打包去掉console
- [x] 模块化vuex,并通过`require.context`自动化配置
- [x] 通过`require.context`自动化vue-router配置
- [x] 配置layout布局组件
- [x] 配置`/global`全局组件
- [x] 配置`common`公共组件
- [x] 配置全局自定义过滤器
- [x] 配置全局自定义指令
- [x] 配置`utils`方法并通过实例调用
- [x] 配置错误页面
## 运行
......@@ -51,32 +64,65 @@ npm run prettier
### 目录结构
├── CHANGELOG.md // 更新日志
├── CHANGELOG.md // 更新日志
├── README.md
├── babel.config.js
├── config
├── config // 配置文件目录
│ └── baseUrl.js
├── package.json
├── public
├── public // 静态资源目录(不会被webpack打包)
│ ├── favicon.ico
│ ├── img
│ │ └── icons
│ ├── index.html
│ └── robots.txt
├── src // 源码目录
│ ├── App.vue // 入口文件
│ ├── assets
├── src
│ ├── App.vue // 入口文件
│ ├── assets // 静态资源目录(样式、图片等),会被webpack打包
│ │ ├── logo.png
│ │ └── style
│ ├── components // **组件目录**
│ │ ├── global // 全局组件
│ │ ├── common // 公共组件
│ │ ├── header
│ │ ├── layout
│ │ ├── rightPanel
│ │ └── sideNav
│ ├── directives // 自定义指令
│ │ ├── follower.js
│ │ ├── index.js // 指令配置导出文件
│ │ └── placeholder.js
│ ├── filters // 自定义过滤器
│ │ └── index.js // 过滤器导出文件
│ ├── main.js
│ ├── plugins // 第三方库二次封装
│ │ └── moment.js
│ ├── registerServiceWorker.js
│ ├── router
│ │ ├── home.router.js // 具体路由文件
│ │ ├── index.js // 路由配置及导出文件
│ │ ├── page1.router.js
│ │ └── page2.router.js
│ ├── store
│ └── views // 页面组件目录
│ │ ├── global.js // 全局vuex
│ │ ├── index.js // vuex配置及导出页面
│ │ └── modules // 模块化vuex
│ ├── utils
│ │ └── index.js
│ └── views // 页面/路由组件
│ ├── 404.vue
│ ├── home.vue
│ ├── page1.vue
│ └── page2.vue
├── vue.config.js
└── yarn.lock
注意:
1. 页面级组件(通俗理解为与路由对应的组件)统一放在`views`目录下。
1. 页面组件(通俗理解为与路由对应的组件,也可称路由组件)统一放在`views`目录下。
2. 页面组件内的小组件、功能组件统一放在`components`目录下。例如,页面组件`pageA.vue`中拆分出了`pageheader.vue`组件,那么在`components`目录下新建一个**与页面同名的`pageA`目录**`pageA`的相关组件放进去即可。
3. 注意区分`global`目录与`common`目录的不同:
`global`:全局组件,可能需要在多处引入使用
`common`:公共组件,全局生效,但在app.vue中引入即可,无需多次引入使用
### layout布局使用
......
......@@ -13,6 +13,10 @@ requireContext
return
}
const file = requireContext(path)
if (path.includes('/modules/') && !file.default.namespaced) {
console.error(`模块化${path}必须添加namespaced属性`)
return
}
modules[moduleName] = file.default || file
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment