使用 Webpack Encore 启用 Vue.js (`vue-loader`)

编辑此页

视频教程

您是否更喜欢视频教程？查看 Vue 视频教程系列。

提示

查看 Symfony UX Vue.js 组件的在线演示，网址为 http://ux.symfony.ac.cn/vue！

想要使用 Vue.js 吗？没问题！首先在 webpack.config.js 中启用它

        1
2
3
4
5
6
7
8
9
        // webpack.config.js
  // ...

  Encore
      // ...
      .addEntry('main', './assets/main.js')

+     .enableVueLoader()
  ;
    

然后重启 Encore。当您这样做时，它会给您一个可以运行的命令来安装任何缺失的依赖项。运行该命令并重启 Encore 后，就完成了！

您需要的任何 .vue 文件都将被正确处理。您还可以通过将选项回调传递给 enableVueLoader() 来配置 vue-loader 选项。有关详细文档，请参阅 Encore 的 index.js 文件。

运行时编译器构建

默认情况下，Encore 使用允许您在运行时编译模板的 Vue “构建版本”。这意味着您可以执行以下任一操作

        1
2
3
4
5
6
7
        new Vue({
    template: '<div>{{ hi }}</div>'
})

new Vue({
    el: '#app', // where <div id="app"> in your DOM contains the Vue template
});
    

如果您不需要此功能（例如，您使用单文件组件），那么您可以告诉 Encore 创建一个遵循内容安全策略的更小的构建版本

        1
2
3
4
5
6
7
8
        // webpack.config.js
// ...

Encore
    // ...

    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
;
    

您还可以通过传递 runtimeCompilerBuild: true 来静默此建议。

热模块替换 (HMR)

vue-loader 支持热模块替换：只需更新您的代码，观看您的 Vue.js 应用更新，无需刷新浏览器！要激活它，请使用 dev-server

        1
        $ npm run dev-server
    

就是这样！更改您的一个 .vue 文件，观看您的浏览器更新。但请注意：这目前不适用于 .vue 文件中的样式更改。查看更新后的样式仍然需要刷新页面。

有关更多详细信息，请参阅使用 webpack-dev-server 和 HMR。

JSX 支持

您可以通过配置 .enableVueLoader() 方法的第二个参数来启用 Vue.js 的 JSX

        1
2
3
4
5
6
7
8
9
10
11
12
        // webpack.config.js
  // ...

  Encore
      // ...
      .addEntry('main', './assets/main.js')

-     .enableVueLoader()
+     .enableVueLoader(() => {}, {
+         useJsx: true
+     })
  ;
    

接下来，运行或重启 Encore。当您这样做时，您将看到一条错误消息，帮助您安装任何缺失的依赖项。运行该命令并重启 Encore 后，就完成了！

您的 .jsx 文件现在将通过 @vue/babel-preset-jsx 进行转换。

使用样式

您不能在 .jsx 文件中使用 <style>。作为一种解决方法，您可以手动导入 .css、.scss 等文件

        1
2
3
4
5
6
7
8
9
10
11
12
13
        // App.jsx
import './App.css'

export default {
    name: 'App',
    render() {
        return (
            <div>
                ...
            </div>
        )
    }
}
    

注意

以这种方式导入样式会使其成为全局样式。请参阅下一节，了解如何将其作用域限定为您的组件。

使用作用域样式

您也不能在 .jsx 文件中使用作用域样式 (<style scoped>)。作为一种解决方法，您可以通过在导入路径后添加 ?module 来使用 CSS Modules

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        // Component.jsx
import styles from './Component.css?module' // suffix with "?module"

export default {
    name: 'Component',
    render() {
        return (
            <div>
                <h1 class={styles.title}>
                    Hello World
                </h1>
            </div>
        )
    }
}
    

        1
2
3
4
5
        /* Component.css */

.title {
    color: red
}
    

输出将类似于 <h1 class="title_a3dKp">Hello World</h1>。

使用图片

您不能在 .jsx 文件中使用 <img src="./image.png">。作为一种解决方法，您可以使用 require() 函数导入它们

        1
2
3
4
5
6
7
8
9
10
        export default {
    name: 'Component',
    render() {
        return (
            <div>
                <img src={require("./image.png")}/>
            </div>
        )
    }
}
    

在 Twig 模板中使用 Vue

Twig 模板可以像任何其他 JavaScript 代码一样实例化 Vue.js 应用。但是，鉴于 Twig 和 Vue.js 都使用相同的分隔符来表示变量，您应该配置 delimiters Vue.js 选项来更改默认的变量分隔符。

例如，如果您设置 delimiters: ['${', '}$']，那么您可以在 Twig 模板中使用以下内容

        1
2
        {{ twig_variable }}   {# renders a Twig variable #}
${ vuejs_variable }$  {# renders a Vue.js variable #}
    

本作品，包括代码示例，均根据 Creative Commons BY-SA 3.0 许可协议获得许可。

版本

使用 Webpack Encore 启用 Vue.js (vue-loader)