使Vue。js (`vue-loader`)

警告:你浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 4.3,不再维护。

读这个页面的更新版本Symf欧宝娱乐app下载地址ony 6.2(当前的稳定版本)。

热模块替换(HMR)
JSX支持

vue-loader)

想要使用Vue.js吗?没问题!首次启用它webpack.config.js:

              1 2 3 4 5 6 7 8 9
              / / webpack.config。js / /……安可/ /….addEntry(“主要”,“。/资产/ main.js”)+ .enableVueLoader ();
             

然后重启安可。当您这样做时,它会给你一个命令您可以运行安装任何缺少的依赖关系。运行这个命令后,重新再来一次,你已经完成了!

任何.vue文件,您需要将正确处理。您还可以配置vue-loader选项通过一个选择回调enableVueLoader ()。看到安可的指数。js文件的详细文档。欧宝体育电话

vue-loader支持热模块替换:更新你的代码,注意你的Vue。js应用更新没有一个浏览器刷新!要激活它,可以使用dev-server与——热选择:

               1
               美元纱安可dev-server——热
              

就是这样!改变你的.vue看你的浏览器更新文件。但注意:这个不目前工作风格的变化.vue文件。看到风格仍然需要刷新页面更新。

看到使用webpack-dev-server和HMR为更多的细节。

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

               1 2 3 4 5 6 7 8 9 10 11 12
               / / webpack.config。js / /……安可/ /….addEntry(“主要”,“。/资产/ main.js”)- .enableVueLoader ()+ .enableVueLoader (() = > {}, {+ useJsx:真+});
              

接下来,运行或重启安可。当你做时,你将看到一条错误消息帮助你安装任何缺失的依赖关系。运行这个命令后,重新再来一次,你已经完成了!

你的.jsx文件将通过@vue / babel-preset-jsx。

<时尚>在.jsx文件。作为一个解决方案,你可以导入. css,.scss等文件手动:

                1 2 3 4 5 6 7 8 9 10 11 12 13 14
                / / App.jsx进口”。/ App.css '出口默认的{的名字:“应用程序”呈现(){返回(<div>…< /div>)}}
               

请注意

这种方式使他们全球进口样式。请参阅下一部分范围到组件。

作用域的风格(<风格范围>)在.jsx文件。作为一个解决方案,你可以使用CSS模块通过向进口路径模块?:

                1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
                / / Component.jsx进口风格从“模块。/ Component.css ?”/ /后缀“模块吗?”出口默认的{的名字:“组件”呈现(){返回(<div><h1类={styles.title}>你好，世界< /h1>< /div>)}}
               

                1 2 3 4 5
                / *组件。css * /.title{颜色:红}
               

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

< img src = " . / image.png " >在.jsx文件。作为一个解决方案,你可以导入它们要求()功能:

                1 2 3 4 5 6 7 8 9 10
                出口默认的{的名字:“组件”呈现(){返回(<div><imgsrc={要求(”。/image.png”)}/ >< /div>)}}
               

这项工作,包括代码示例,许可下 Creative Commons冲锋队3.0许可证。

使Vue。js (`vue-loader`)

vue-loader)

< img src = " . / image.png " >在`.jsx`文件。作为一个解决方案,你可以导入它们`要求()`功能:

1 2 3 4 5 6 7 8 9 10

`出口默认的{的名字:“组件”呈现(){返回(<div><imgsrc={要求(”。/image.png”)}/ >< /div>)}}`

部署在

使Vue。js (vue-loader)

使Vue。js (`vue-loader`)