Vue.js 和 Webpack

Pagekit吸引希望使用现代技术的开发者，其界面采用Vue.js框架构建。

在浏览示例时，你可能会对Vue.js、Webpack、JavaScript模块以及入门所需的一般文件结构感到困惑。本文旨在为你澄清问题。

术语

Vue.js 是一个用于创建交互式网页界面的 Javascript 框架。它负责保持JavaScript对象（你的模型）和渲染后的模板（你的视图）的同步。Vue.js文档中有一篇很好的入门文章。查看实用入门指南，了解框架中更高级的概念。

Vue 组件是包含明确功能定义的逻辑代码实体，通常包括视图模板和用于定义组件中交互的脚本。在 Pagekit 中，许多你可以添加到系统的实体作为 Vue 组件创建并在 Pagekit 系统中注册。这包括小部件、仪表盘小部件和链接类型。在代码方面，它们通常位于文件中，文件将JavaScript代码与HTML模板结合在一起。这些文件随后可以通过Webpack（见下文）编译成纯文件。不过，你也可以在文件中创建Vue组件，组件使用的模板会在另一个文件中定义，或者以简单的字符串形式呈现。那你就不需要Webpack了。*.vue*.vue*.js*.js

Webpack 是一个模块捆绑器，它将你的开发资源（比如 Vue 组件和普通 Javascript 文件）合并成所谓的捆绑包。这与简单地连接和压缩JavaScript文件不同。简单来说，Webpack 捆绑包只加载当前页面所需的模块。想了解更多Webpack背后的动机，请访问他们的文档。

注释

一个常见的误解是开发 Pagekit 扩展时必须使用 Webpack。事实并非如此。如果你觉得更容易开始，只需创建并包含单个JavaScript文件即可。你以后仍然可以转用基于Webpack的配置。

无 Webpack 的文件结构

如果你想用Vue.js而不设置Webpack，todo扩展里有个示例。

创建JavaScript文件，即。js/todo.js
在模板中加载JavaScript文件。确保它在写脚本之前加载。vue<?php $view->script('todo', 'todo:js/todo.js', 'vue') ?>

为什么要用Webpack？

没有Webpack的话，一个简单的Vue组件示例可以如下，位于一个名为：example.js

new Vue({
  el: '<div>{{ message }}</div>',
  data: {
    message: 'Hello Pagekit!'
  }
})

如果你不想用Webpack，这个方案完全没问题。不过，使用 Webpack 编译模板可以让你的文件组织得很有条理。你可以用可读的方式定义标记，也可以用一个叫做：的 file 来定义你的 JavaScript 代码：*.vueexample.vue

<template>

    <div>
          {{ message }}
    </div>

</template>

<script>
    module.exports = {
        data: {
            message: 'Hello Pagekit!'
          }
      }
</script>

如你所见，你不需要把模板定义成一个笨重的字符串。相反，Webpack 会将可读文件转换，并将其编译成带有模板标记转换为内联字符串的文件。*.vue*.js

Webpack 是一个在终端上运行的工具，然后将文件编译成文件。Pagekit 在根节点上有默认设置。当你运行或进入Pagekit文件夹时，它会遍历子文件夹中的所有主题和扩展。*.vue*.jswebpack.config.jswebpackwebpack --watchpackages

你的包里也需要有自己的包裹，比如。该文件定义了哪些文件被编译以及应编译到哪个输出文件。webpack.config.jspackages/pagekit/example/webpack.config.js*.vue

以下示例假设你的文件位于包的一个子文件夹中，称为，并且应编译到输出文件夹中。*.vuepackages/pagekit/example/app/componentspackages/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。你会在包的文件夹里看到文件出现。例如，被编译成一个名为的捆绑文件。webpackwebpack --watch*.jsapp/bundleexample.vueexample.js

注释

当你通过Git管理代码时，建议你将该文件夹添加到文件中，因为它只包含组件的编译版本。app/bundle.gitignore*.vue

要加载并使用编译后的 Vue 组件，请从视图模板中加载已编译的捆绑包文件，例如从名为的文件中加载。你还需要通过第三个参数要求，这样你的组件只有在Vue脚本文件加载完毕后才加载。views/example.phpvue

<?php $view->script('example', 'hello:app/bundle/example', 'vue') ?>

摘要：Webpack 文件结构

如果是包含Webpack配置的配置，可以看看hello扩展。

在你的扩展中创建Vue组件。示例文件：link.vue。*.vue
为你的扩展设置。webpack 配置定义了扩展中提供哪些 JavaScript 模块，并说明最终的捆绑包应编译在哪个输出文件中。一个webpack.config.js示例webpack.config.js
运行或在你 Pagekit 安装的根目录中。Pagekit 的 webpack 配置设置为遍历所有包并读取它们的 webpack 配置。webpackwebpack --watch
要求从你的视图文件中获取生成的捆绑包。<?php $view->script('settings', 'hello:app/bundle/settings.js', ['vue', 'jquery']) ?>

创建和注册Vue组件

设置好文件结构后，你现在可以自己创建脚本和 Vue 组件。上述默认情况是关于你在自己的视图文件中包含的资产。但在某些情况下，你需要创建一个Vue组件，并希望在Pagekit系统中注册，这样它会显示在Pagekit管理界面的某些部分。你可以对以下元素进行相应作：

仪表盘控件
网站小工具
链接类型
网站树设置，编辑单页时以标签页显示
用于扩展设置的模态弹窗

这基本上分四个步骤完成：

编写一个Vue组件，即。来源示例app/components/link.vue
通过JavaScript注册Vue组件，即。来源示例window.Links.components['hello'] = module.exports;
将 Vue 组件添加到 webpack 捆绑包中，即。来源示例"link": "./app/components/link.vue"
确保组件的捆绑包文件通过PHP加载到后端，来源示例$scripts->register('hello-link', 'hello:app/bundle/link.js', '~panel-link');

注释

以下是使用Webpack时所需的步骤。你也可以不用webpack也能做到同样的效果。直接跳过第三步。你可以在一个普通文件中创建Vue组件，模板作为属性的字面字符串。确保在步骤4中使用那个JavaScript文件的路径。*.jstemplate