# vue-struct

**Repository Path**: mill1983/vue-struct

## Basic Information

- **Project Name**: vue-struct
- **Description**: vue的一个工程骨架
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-29
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用手册

### 目录结构
```
generator       # 常用组件的生成器
static			# 静态资源
src 			# 源码路径
config 			# webpack的配置
build 			# webpack的配置
node_modules 	# npm依赖包
index.html 		# 最后生成的主页面
package.json 	# npm配置文件
test.html 		# 将html转jade的零时存放
test.jade 		# 生成的jade文件

```


### src 目录
```
util     		# 工具方法比如ajax的封装
components 		# 自定义组件
router 			# 路由配置
assets 			# 静态资源
filters			# 所有过滤器存放
config 			# 配置文件，建议任何东西都不要写死，比如按钮的文本，都放在配置文件中
stores			# 所有数据状态存储，配合vuex使用
less			# less脚本，文件夹下面的所有文件都会导入
main.js 		# 入口文件
loadUtil.js 	# 加载的工具类列表
App.vue 		# 主页路由控制在这里设置，负责整站的布局，导航等公共部件可以放这里
```

### [传统组件的封装](./src/components/ButtonCounter.js)
对于传统组件，我们总是忍不住会使用jQuery或者原生js来进行Dom操作。现在已知Dom操作的优先级很高，所以必须将Dom操作的范围进行限制。

- 采用JSX语法封装组件
- 自定义指令的方式操作DOM

这里仅说明JSX组件
- 标准vue组件使用`template`属性定义组件内容
- JSX组件使用`render`定义组件内容