https://github.com/q13/ya-spa-vue
A SPA bootstrap for yazuo powered by vue
https://github.com/q13/ya-spa-vue
business framework vue wide-platform ya
Last synced: about 1 year ago
JSON representation
A SPA bootstrap for yazuo powered by vue
- Host: GitHub
- URL: https://github.com/q13/ya-spa-vue
- Owner: q13
- License: mit
- Created: 2017-12-01T07:57:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T07:38:18.000Z (over 4 years ago)
- Last Synced: 2025-04-14T02:28:31.229Z (over 1 year ago)
- Topics: business, framework, vue, wide-platform, ya
- Language: JavaScript
- Homepage:
- Size: 481 KB
- Stars: 7
- Watchers: 1
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A SPA bootstrap for yazuo powered by vue
一套基于vue搭建的项目模板，适应多终端平台（PC/Mobile）。
**关键字：职责分担，最小化关注范围，开箱即用，响应式重于命令式，懒加载加持**
## 安装
### 全局安装yz-cli脚手架
```sh
npm install -g yz-cli
```
### 使用ya命令创建项目（eg. 项目名为demo）
```sh
ya init demo
```
**执行过程如下，优先使用yarn安装：**
### 更新模板文件
```sh
cd demo
ya update
```
## 使用方法
### 项目启动
```sh
cd demo
npm run dev
npm run mock
```
### 开发
使用支持**eslint**的Editor或IDE进行开发，**.eslintrc.json**默认在项目根目录下
**业务类型的项目不要操作除src目录下以外的文件**
#### App
目录位置 **/src/app/**
* **index.js：** App级别的公共逻辑放置位置，构建项目整体结构，粘合页面逻辑（page）和模块逻辑（module）
* **preset.styl：** App预设样式
* **sitmap.js：** 网站地图，配置路由和导航信息
* **store.js：** 配置vuex store
* **style.styl：** App框架样式
* **template.html：** App模板结构
#### Page
目录位置 **/src/pages/**
页面逻辑放置位置，以目录划分页面功能，多目录层级组织方式，文件组织方式如下：
* 逻辑、结构、样式拆分组织（适合业务功能复杂的实现），对应文件命名**index.js、template.html、style.styl**，编写方式参考**demo1**
* 逻辑、结构、样式组织成单文件（适合轻业务逻辑实现），对应文件命名**index.vue**，编写方式参考**demo2**
#### module
目录位置 **/src/modules/**
业务功能模块放置位置，可能在项目范围内被多个页面逻辑多次引用，以目录划分模块功能，多目录扁平化组织方式，便于引用，文件组织方式参考**page**约定。
#### widgets
通用组件库放置位置，不和业务逻辑产生强耦合，可跨项目使用。组件和主题样式组织方式如下图：
**特别要注意的：** 优先采用**ya-ui-vue**对第三方库**element-ui**、**mint-ui**、**antV**的封装。
#### 其它
* **/src/mock/** 放置mock接口文件，参考 [mock官方文档](http://mockjs.com/)
* **/src/deps/** 放置项目依赖文件，包括静态资源文件如图片，svg，iconfont，工具库utils等等
### 进一步
* [文件命名和编码约束](https://github.com/q13/ya-spa-vue/blob/master/doc/common.md)
* [Graph使用方式](https://github.com/q13/ya-spa-vue/blob/master/doc/graph.md)
* [Hook api](https://github.com/q13/ya-spa-vue/blob/master/doc/hook.md)
* [Utils api](https://github.com/q13/ya-spa-vue/blob/master/doc/utils.md)
* [两种路由方案Activity/Fragment](https://github.com/q13/ya-spa-vue/blob/master/doc/router.md)