# Vue.js 和 Webpack
使得 Pagekit 吸引开发者的一个重要的方面就是，Pagekit 的界面是用 Vue.js 框架构建的。
在浏览例子时,你可能会困惑于Vue.js、Webpack、javascript 模块以及用于起步的一般文件结构的理念。本文旨在为你厘清这些东西。
## 术语
**Vue.js** 是一个创建交互式 web 界面的 javascript 框架。它负责将 javascript 对象（model）和呈现的模板（view）二者同步。在 Vue.js 文档中可以找到详尽的介绍文章。阅读此框架的[起步指南](http://vuejs.org/guide/) 和更多的[高级概念](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/) 。
**Vue 组件** 是代码的逻辑实体，它包含定义良好的功能，并且通常包括一个视图模板+一个用来定义组件内部交互的脚本。在 Pagekit 中，可以添加到系统的许多实体都是以 Vue 组件的形式创建并注册到 Pagekit 系统的。包括小工具、仪表盘小工具和链接类型等。在代码级上，它们都在 `*.vue` 文件中结合了 javascript 代码和 HTML 模板。可以使用 Webpack 将 `*.vue` 文件编译成为纯`*.js`文件。你还可以在 `*.js` 文件中创建 Vue 组件，组件使用的模板在不同的文件定义，或者只是一个简单的字符串，这种情况下就不必使用 Webpack了。
**Webpack** 是一款模块打包工具，它会获取你的开发资源（比如 Vue 组件和原生 javascript 文件）并将它们结合到所谓的包（bundle）。这不同于简单地链接和压缩 javascript文件。简言之，在当前页面被加载时模块才会用到相关的 webpack 包（with webpack bundles only the modules required on the current page are loaded）。了解更多，查阅[Webpack 背后的动机](http://webpack.github.io/docs/motivation.html)。
**Note** 一个常见的误解是，在开发 Pagekit 扩展时必须使用 Webpack。并非如此。如果简单地创建和引入单个 javascript 文件对你来说更容易起步。你可以选择稍后在迁移到 Webpack.
## 不使用 Webpack 时的文件结构
如果你打算在没有 Webpack 的情况下使用 Vue.js，这里有一个例子 [todo extension](https://github.com/pagekit/example-todo).
1. 创建 JavaScript 文件, i.e. `js/todo.js`.
2. 在模板中加载 JavaScript 文件。确保 `vue` 在你的脚本之前加载。`<?php $view->script('todo', 'todo:js/todo.js', 'vue') ?>`
## 为何使用 Webpack ?
没有 Webpack，位于名为 `example.js` 文件中的关于一个简单的 Vue 组件的例子大概是这样：
```
new Vue({
el: '<div>{{ message }}</div>',
data: {
message: 'Hello Pagekit!'
}
})
```
如果你不喜欢使用 Webpack，这个解决方案非常好。使用 Webpack 来编译 `*.vue` 模板可以为你的文件形成更好的组织结构。可以在 `example.vue` 文件中以可读的方式定义标签和 javascript 代码。
```
<template>
<div>
{{ message }}
</div>
</template>
<script>
module.exports = {
data: {
message: 'Hello Pagekit!'
}
}
</script>
```
如你所见，不必再用笨拙的字符串来定义模板了。Webpack 将可读的 `*.vue` 转换并编译成为 `*.js` 文件，模板标签则转换成为行内字符串。
Webpack 是在终端运行的工具，可以将 `*.vue` 文件编译成为 `*.js` 文件。Pagekit 的根目录有一个默认的 `webpack.config.js`。在 Pagekit 根目录运行 `webpack` 或 `webpack --watch`，它会在 `packages` 子目录中遍历所有主题和扩展。
你的包（package）还需要它自己的 `webpack.config.js`，例如 `packages/pagekit/example/webpack.config.js`。此文件定义哪些 `*.vue` 文件应当被编译成什么输出文件。
下面的例子假设你的 `*.vue` 文件位于 `packages/pagekit/example/app/components` 包的子目录，并且它们应当在编译后输出到 `packages/pagekit/example/app/bundle`目录。
```
module.exports = [
{
entry: {
"example" : "./app/components/example.vue",
"example-2": "./app/components/example-2.vue",
"example-3": "./app/components/example-3.vue"
},
output: {
filename: "./app/bundle/[name].js"
},
module: {
loaders: [
{ test: /\.vue$/, loader: "vue" }
]
}
}
];
```
现在打开终端，前往 Pagekit 根目录并运行 `webpack` 或 `webpack --watch` 使用你刚刚添加的配置来运行 Webpack。你会在包的 `app/bundle` 目录中看到 `*.js` 文件。例如 `example.vue` 会被编译成名为`example.js` 的包（bundle）文件。
**Note** 在使用 Git 管理代码时，建议添加 `app/bundle` 目录到 `.gitignore` 文件中，因为它只包含 `*.vue` 组件被编译后的版本。
要加载和使用已编译的 Vue 组件，从视图模板中加载已编译的包文件，例如来自 `views/example.php` 的文件。你还需要将 `vue` 作为第三个参数，这样你的组件只会在 Vue 本身的脚本文件被加载后再进行加载。
```
<?php $view->script('example', 'hello:app/bundle/example', 'vue') ?>
```
## 摘要：Webpack 下的文件结构
对于包含 webpack 配置文件的设置，查看 [hello extension](https://github.com/pagekit/extension-hello)。
1. 在你的扩展中创建 Vue 组件。例如 `*.vue` 文件： [link.vue](https://github.com/pagekit/extension-hello/blob/master/app/components/link.vue).
2. 为你的扩展程序创建 `webpack.config.js`。Webpack 配置定义了你的扩展提供的哪些 javascript 模块应当被编译成为什么样的最终文件。一个例子： [webpack.config.js](https://github.com/pagekit/extension-hello/blob/master/webpack.config.js)
3. 在 Pagekit 的根目录中运行 `webpack` 或 `webpack --watch`。Pagekit 的 webpack 会遍历所有的包，并读取它们的 webpack 配置。
4. 在视图文件中引入生成的包 `<?php $view->script('settings', 'hello:app/bundle/settings.js', ['vue', 'jquery']) ?>`
## 创建和注册 Vue 组件
使用目前的文件结构设置，你现在可以创建自己的脚本和 Vue 组件。默认情况下，上面提到资源都包含在你自己的视图文件中。然而在某些情况下，你创建了一个 Vue 组件，并希望将它注册到 Pagekit 系统，使之可以显示在 Pagekit 管理界面的相应位置。你可以如此处理以下这些元素：
* 仪表盘小工具
* 网站小工具
* 链接类型
* 站点树设置，在编辑单个页面时以选项卡的形式显示
* 针对扩展设置的模态弹出
这基本上发生在四个步骤:
1. 编写一个 Vue 组件，i.e. `app/components/link.vue`. [Source example](https://github.com/pagekit/extension-hello/blob/master/app/components/link.vue)
2. 通过 javascript 注册这个 Vue 组件， i.e. `window.Links.components['hello'] = module.exports;`. [Source example](https://github.com/pagekit/extension-hello/blob/master/app/components/link.vue#L39)
3. 将这个 Vue 组件添加到 webpack 包中，i.e. `"link": "./app/components/link.vue"`. [Source example](https://github.com/pagekit/extension-hello/blob/master/webpack.config.js#L6)
4. 确保组件的包文件在后台已经通过 PHP 被加载了， i.e. `$scripts->register('hello-link', 'hello:app/bundle/link.js', '~panel-link');` [Source example](https://github.com/pagekit/extension-hello/blob/master/index.php)
**Note** 这些就是使用 Webpack 的必要步骤。没有 Webpack 同样也能实现。只需跳过第三步。你可以在一个原生的 `*.js` 文件中创建 Vue 组件以及以文本字符串作为 `template`属性的值的模板。记得在第四步使用该 javascript 文件的路径。
