这篇文章主要介绍Vue + Webpack + Vue-loader有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
常州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
Vue-loader 是什么?
vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块。
vue-loader 提供了一些非常酷炫的特性:
ES2015默认可用;
在每个 Vue 组件内支持其他的 Webpack 加载器,如用于
vue-loader 解析文件,提取每个语言块,让他们通过需要的其他 loaders ,最后组装起来,放回 CommonJS 的模块,此模块的 module.exports 就是个 Vue.js 组件对象。
vue-loader 默认用没有用语言编译器,想CSS 预编译和HTML模板编译语言等,如果想用这些功能,需要设置 lang 属性的来实现。例如,你可以在组件的样式中这样用 SASS :
更多细节查看 [使用预编译器]。
语言块
默认语言:html 。
每个 *.vue 文件几乎都包含一个 块。
内的内容字符串会被提取出来,用来编译进 Vue 组件内的 template 选项。
默认语言:js(默认ES2015也会通过Babel支持)。
每个 *.vue 文件几乎都包含一个
需要注意的是 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,命令行如下:
npm install -g vue-cli vue init webpack-simple hello-vue cd hello-vue npm install npm run dev # 一切就绪!
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
当
转换成:
hi
注意
在同一组件内,你能同时用有作用域和无作用域的样式:
父组件的有作用域的CSS和子组件的有作用域的CSS将同时影响子组件。
有作用域的样式对其他部分没有影响。
有作用域限定的样式不排除类的需要. 由于浏览器渲染方式支持多种不同的CSS选择器,加了作用域的 p { color: red } 会慢好多倍 (即,和属性选择器组合时候的时候)。如果你用类或者id选择器,比如 .example { color: red } ,你就能消除性能损失。这里有个练习场 ,你可以比较测试下其中的差异。
在递归组件中小心后代选择器! 对于 CSS 规则的选择器 .a .b,如果匹配 .a 的元素内包含一个递归子组件,那么子组件中所有包含 .b 的元素都会被匹配到。
PostCSS
任何通过 vue-loader 处理过的 CSS 都再用 PostCSS重写有作用域限制的 CSS 部分。你也能添加自定义的 PostCSS 插件处理,例如, autoprefixer 或 CSSNext。
在 Webpack 1.x 中的用法如下:
// webpack.config.js module.exports = { // 其他配置... vue: { // 使用用户自定义的 postcss 插件 postcss: [require('postcss-cssnext')()] } }
Webpack 2.x 中的用法:
// webpack.config.js module.exports = { // 其他配置... plugins: [ new webpack.LoaderOptionsPlugin({ vue: { // 使用用户自定义插件 postcss: [require('postcss-cssnext')()] } }) ] }
除了接受插件的数组,postcss 选项也接受:
返回值是插件数组的方法;
包含被传递到PostCSS处理器选项的对象。当你的项目依赖于自定义解析器或编译器的时候,这就会很有用。
postcss: { plugins: [...], // list of plugins options: { parser: sugarss // use sugarss parser } }
热加载
“热加载” 不只是当你修改了文件简单地重新加载下页面。当启用了热加载功能,编写完 *.vue 文件后,组件的所有的实例对象被替换,而页面并没有重新加载。仍然保持应用原有的状态。这在你调整模板或修改组件样式的时候,大大改善了开发体验。
当使用项目的脚手架工具 vue-cli ,热加载自动启用。
以上是“Vue + Webpack + Vue-loader有什么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!