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文件的详细文档。欧宝官网下载app

1 2 3 4 5 6 7 8

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

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

/ / App.jsx进口”。/ App.css '出口默认的{的名字:“应用程序”呈现(){返回(<div>…< /div>)}}

请注意

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

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

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

/ / 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>)}}

分隔符Vue.jsoption to change the default variable delimiters.< /p>

如果你设置为例分隔符:['{','}'美元],然后你在树枝可以使用以下模板:

1 2

{{twig_variable}}{#呈现树枝变量#}$ {vuejs_variable} ${#呈现Vue。js变量#}