Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
M
mould-vuecli3
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lhfe
mould-vuecli3
Commits
8836cbdf
Commit
8836cbdf
authored
Aug 31, 2020
by
lipengcheng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
docs: 更新文档
parent
4ebf41b7
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
59 additions
and
9 deletions
+59
-9
README.md
README.md
+55
-9
index.js
src/store/index.js
+4
-0
No files found.
README.md
View file @
8836cbdf
...
...
@@ -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布局使用
...
...
src/store/index.js
View file @
8836cbdf
...
...
@@ -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
})
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment