# 环境配置

本项目开发环境依赖如下：

yarn 包管理器，推荐最新版本
https://yarnpkg.com/zh-Hans/docs/install#windows-stable (opens new window)

python 2.7.x
https://www.python.org/ftp/python/2.7.15/python-2.7.15.amd64.msi (opens new window)

Git
https://github.com/git-for-windows/git (opens new window)

请以安装包默认配置进行安装。

# 安装项目依赖

项目检出且安装好开发环境依赖后，在项目根目录执行以下指令安装依赖。

yarn install

TIP

由于境外仓库速度较慢，推荐将 npm 仓库切换为国内镜像源，指令如下

yarn config set registry https://registry.npm.taobao.org -g

# 开发工具

使用本框架，推荐使用前端相关开发工具、IDE 进行项目开发，当然这不是必须的。推荐下列主流开发工具:

Visual Studio Code (opens new window)，最具人气的开发软件，不只限于前端
WebStorm (opens new window)，Jetbrains 家族，IntelliJ IDEA 同宗
Sublime (opens new window)，一直流行的编辑器

# 启动调试开发服务

如果你使用的开发工具包含命令行工具，可以直接通过其输入下列指令启动项目：

yarn run dev

你也可以通过 windows 的命令行或 powershell 工具：

# 进入项目目录
cd 项目目录

# 执行启动命令
yarn run dev

1
2
3
4
5

# 名词解释

# 属性

组件的属性是父组件向子组件传递数据的通道。子组件内部通过定义属性实现从父组件获得数据或设置参数。父组件通过子组件的属性向子组件传递数据或配置参数。属性包含属性名和属性值。

属性示例

<action-toolbar :actions="demoActions"></action-toolbar>
<panel title="表具列表"></panel>

1
2

属性示例中的 actions 和 title 就是组件的属性名称，而 demoActions 和 "表具列表" 则是其属性值，它们将被传入各自组件内部。仅需要动态绑定或非文本类型值的属性名称前需要添加 : 冒号，具体请参考 vue 文档的模板语法 (opens new window)章节

# 事件

组件事件是子组件向父组件传递数据的通道。子组件内部抛出事件，父组件通过 @事件名 捕获事件，同时获取携带的数据。

事件示例

<common-table @select="rowSelect" />

export default {
  data () {
    return {
      formData: {}
    }
  },
  methods: {
    rowSelect (val) {
      console.info('row select =>', val)
      this.formData = val
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 插槽

插槽是组件指定位置上预留的槽位，槽位赋予开发者对组件更自由的操控和定制。使用 #槽位名称 将内容放入组件置顶的槽位。需要注意，插槽引用仅能通过 template 标签。

如果是默认插槽，在使用插槽时可以省略插槽引用。

插槽示例

<action-toolbar>
  <template #left>
    <span class="f16">表具详述</span>
  </template>
</action-toolbar>

1
2
3
4
5

插槽高级用法请查看 vue 文档插槽 (opens new window)部分。

创建一个页面 →