Vue + Webpack + Vue-loader学习教程之功能介绍篇

<template>
 <div class="example">{{ msg }}</div>
</template>
<script>
export default {
 data () {
 return {
 msg: 'Hello world!'
 }
 }
}
</script>
<style>
.example {
 color: red;
}
</style>

<style lang="sass">
 /* 编写 SASS! */
</style>

<template src="/UploadFiles/2021-04-02/template.html">

需要注意的是 src 导入要遵循和 CommonJS 的 require() 调用一样的路径解析规则，这就是说你需要用以 ./ 开头的相对路径，并且你可以直接从已安装的 NPM 包内导入资源，例如：


<!-- 从已安装的 "todomvc-app-css" NPM 包内导入文件 -->
<style src="/UploadFiles/2021-04-02/index.css">

语法高亮显示
开发中的第一件事，你可能想让 *.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 文件的 <script> 部分，所以我们就可以在 Vue 组件中用 ES2015 。 如果你还不熟悉这个新语言的话，最好去学一下：

  
Babel - Learn ES2015
  
ES6 Features
  
Exploring ES6 (book)

  

这里是一个引用其他 Vue 组件的典型模式，


<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
 components: {
 ComponentA,
 ComponentB
 }
}
</script>


在这里用的就是 ES2015 精简的语法定义个子组件。{ ComponentA } 是指 { ComponentA: ComponentA } 。Vue会被自动转为 component-a， 所以你就能在模板中引入组件 <component-a> 。
转译正常的 .js 文件
由于 vue-loader 只能处理 *.vue 文件，你需要在配置文件中告诉 Webpack 用 babel-loader 或者 buble-loader 。这点，可以用项目脚手架工具 vue-cli 。
用 .babelrc 文件来配置 Babel
.babelrc 可以控制 babel-loader ，并推荐这种方式来配置 Babel 预设插件。
Scoped CSS


当 <style> 标签有 scoped 属性的时候，它的 CSS 就只能作用于当前的组件。这就像样式被封装在 Shadow DOM 内。这是用 PostCSS 转译实现的。如下：


<style scoped>
.example {
 color: red;
}
</style>

<template>
 <div class="example">hi</div>
</template>


转换成：


<style>
.example[_v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" _v-f3f3eg9>hi</div>
</template>


注意
在同一组件内，你能同时用有作用域和无作用域的样式：




<style>
 /* global styles */
</style>

<style scoped>
 /* local styles */
</style>



  
父组件的有作用域的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 ，热加载自动启用。
总结
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。