vue-loader）

想要使用Vue.js？没问题!首先在webpack.config.js：

1 2 3 4 5 6 7 8 9

// webpack.config.js //…安可/ /….addEntry(“主要”,“。/资产/ main.js”)+ .enableVueLoader ()；

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

任何.vue您需要的文件将被正确处理。还可以配置vue-loader选项通过传递一个选项回调enableVueLoader ()．看到Encore的index.js文件获取详细的文档。欧宝体育电话

1 2 3 4 5 6 7 8

/ / webpack.config.js/ /……再来一个/ /…….enableVueLoader (（）= >{}, {runtimeCompilerBuild：假});

vue-loader支持热模块替换:只需更新你的代码，看着你的Vue.js应用程序更新没有浏览器刷新!要激活它，请使用dev-server：

1 2 3 4 5

#如果你使用Yarn包管理器＄Yarn encore dev-server#如果你使用NPM包管理器＄运行dev-server

就是这样!换一个你的.vue文件并注意浏览器的更新。但请注意:这确实如此不目前就职于风格的变化.vue文件。查看更新的样式仍然需要刷新页面。

看到使用webpack-dev-server和HMR欲知详情。

JSX与Vue.js的第二个参数.enableVueLoader ()方法:

12 3 4 5 6 7 8 9 10 11 12

// webpack.config.js //…安可/ /….addEntry(“主要”,“。/资产/ main.js”)- .enableVueLoader ()+ .enableVueLoader(() => {}， {+ useJsx: true+})；

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

你的.jsx文件现在将通过转换@vue / babel-preset-jsx．

<时尚>在.jsx文件。作为一种变通方法，您可以导入. css，.scss，等文件手动:

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

/ / App.jsx进口”。/ App.css '出口默认的｛的名字：“应用程序”， render() {返回（<div>.．.div>)}}

请注意

以这种方式导入样式会使它们具有全局性。请参阅下一节，了解如何将它们限定在组件上。

作用域的风格（<风格范围>)在.jsx文件。作为解决方案，您可以使用CSS模块通过为导入路径添加后缀模块?：

12 3 4 5 6 7 8 9 10 11 12 13 14 15

/ / Component.jsx进口风格从”。/ Component.css吗?模块的//后缀为"? "模块”出口默认的｛的名字：“组件”， render() {返回（<div><h1类＝{styles.title}>你好世界h1>div>)}}

1 2 3 4 5

/* Component.css */.title｛颜色:红色}

输出是这样的

Hello World

．

< img src = " . / image.png”>在.jsx文件。作为一种变通方法，您可以使用要求()功能:

1 2 3 4 5 6 7 8 9 10

出口默认的｛的名字：“组件”， render() {返回（<div><imgsrc＝{要求(＂．/image.png”)}/ >div>)}}

分隔符Vue.js选项更改默认变量分隔符。

如果你举个例子分隔符:['${'，'}$']，然后你可以在你的Twig模板中使用以下内容:

1 2

{{twig_variable}}{#渲染一个Twig变量#}${vuejs_variable}${#渲染Vue.js变量#}