Vue-loader 是什么?
vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成Javascript模块。
vue-loader 提供了一些非常酷炫的特性:
- ES2015默认可用;
- 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于
的 SASS 和用于 的 Jade。 - 把
和 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。 - 对每个组件模拟有作用域的CSS。
- 开发阶段支持组件的热加载。
简单来说,webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。
Webpack 是什么?
如果你熟悉 Webpack 那就跳过这部分吧,但对于那些新手们,请看下这个简单介绍吧:
Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。
列举一个基本例子,设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行,所以需要把它们 捆绑 成
vue-loader 解析文件,提取每个语言块,让他们通过需要的其他 loaders ,最后组装起来,放回 CommonJS 的模块,此模块的 module.exports 就是个 Vue.js 组件对象。 vue-loader 默认用没有用语言编译器,想CSS 预编译和HTML模板编译语言等,如果想用这些功能,需要设置 lang 属性的来实现。例如,你可以在组件的样式中这样用 SASS : 更多细节查看 [使用预编译器]。 语言块
需要注意的是 src 导入要遵循和 CommonJS 的 require() 调用一样的路径解析规则,这就是说你需要用以 ./ 开头的相对路径,并且你可以直接从已安装的 NPM 包内导入资源,例如: 语法高亮显示 开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML 文件一样。 注释 在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、Javascript、Jade 等)。在文件最顶部注释的时候用HTML的注释语法: 。 项目设置 语法高亮 开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML 文件一样。 使用 vue-cli 创建项目的时候推荐使用脚手架工具,可以用 vue-loader 和 vue-cli,命令行如下: ES2015 当 vue-loader 检测到 babel-loader 或者 buble-loader 在项目中存在的时候,将会用它们去处理所有 *.vue 文件的
在这里用的就是 ES2015 精简的语法定义个子组件。{ ComponentA } 是指 { ComponentA: ComponentA } 。Vue会被自动转为 component-a, 所以你就能在模板中引入组件 转译正常的 .js 文件 由于 vue-loader 只能处理 *.vue 文件,你需要在配置文件中告诉 Webpack 用 babel-loader 或者 buble-loader 。这点,可以用项目脚手架工具 vue-cli 。 用 .babelrc 文件来配置 Babel .babelrc 可以控制 babel-loader ,并推荐这种方式来配置 Babel 预设插件。 Scoped CSS 当 转换成: 注意 在同一组件内,你能同时用有作用域和无作用域的样式: PostCSS 任何通过 vue-loader 处理过的 CSS 都再用 PostCSS重写有作用域限制的 CSS 部分。你也能添加自定义的 PostCSS 插件处理,例如, autoprefixer 或 CSSNext。 在 Webpack 1.x 中的用法如下: Webpack 2.x 中的用法: 除了接受插件的数组,postcss 选项也接受: 热加载 “热加载” 不只是当你修改了文件简单地重新加载下页面。当启用了热加载功能,编写完 *.vue 文件后,组件的所有的实例对象被替换,而页面并没有重新加载。仍然保持应用原有的状态。这在你调整模板或修改组件样式的时候,大大改善了开发体验。 当使用项目的脚手架工具 vue-cli ,热加载自动启用。 总结 好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对考高分网的支持。
npm install -g vue-cli
vue init webpack-simple hello-vue
cd hello-vue
npm install
npm run dev # 一切就绪!
// webpack.config.js
module.exports = {
// 其他配置...
vue: {
// 使用用户自定义的 postcss 插件
postcss: [require('postcss-cssnext')()]
}
}
// webpack.config.js
module.exports = {
// 其他配置...
plugins: [
new webpack.LoaderOptionsPlugin({
vue: {
// 使用用户自定义插件
postcss: [require('postcss-cssnext')()]
}
})
]
}
postcss: {
plugins: [...], // list of plugins
options: {
parser: sugarss // use sugarss parser
}
}



