Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
Vue-loader 是什么？
vue-loader 是一个加载器，能把如下格式的 Vue 组件转化成JavaScript模块。
vue-loader 提供了一些非常酷炫的特性：
- ES2015默认可用；
- 在每个 Vue 组件内支持其他的 Webpack 加载器，如用于
<style>的 SASS 和用于<template>的 Jade。 - 把
<style>和<template>内引用的静态资源作为模块依赖项对待，并用Webpack 加载器处理。 - 对每个组件模拟有作用域的CSS。
- 开发阶段支持组件的热加载。
简单来说，webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。
Webpack 是什么？
如果你熟悉 Webpack 那就跳过这部分吧，但对于那些新手们，请看下这个简单介绍吧：
Webpack 是一个模块打包工具。在开发中，它把一堆文件中每个都作为一个模块处理，找出它们间的依赖关系，并打包成待发布的静态资源。
列举一个基本例子，设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行，所以需要把它们 捆绑 成 <script> 标记内的单一文件。Webpack 就能按照 require() 调用的依赖关系为我们做到这点。
实际上，Webpack 能做的更多，通过 "loaders" 我们能让 Webpack 按照我们想要的任何方式打包输出。例如：
编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块；
编译之前，可以通过 linter 校验源代码。
编译 Jade 模板成 HTML 并内联 JavaScript 字符串。
编译 SASS 文件成 CSS，然后把生成的CSS插入到
<style>标签内，然后再转译成 JavaScript 代码段。处理在 HTML 或 CSS 文件中引用的图片文件，根据配置路径把它们移动到任意位置，根据 MD5 hash 命名。
如果你学会了Webpack，就会知道它有多么强大，它非常显著地改善你前端开发的效率。它主要的缺点是配置方式有点麻烦，但是有了我这份使用指南，那使用
Webpack + Vue + vue-loader的时候，基本上就扫清了大多数障碍了。
Vue 组件规格
*.vue 文件是用户用 HTML-like 的语法编写的 Vue 组件。每个 *.vue 文件都包括三部分 <template>, <script> 和 <style>:
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
vue-loader 解析文件，提取每个语言块，让他们通过需要的其他 loaders ，最后组装起来，放回 CommonJS 的模块，此模块的 module.exports 就是个 Vue.js 组件对象。
vue-loader 默认用没有用语言编译器，想CSS 预编译和HTML模板编译语言等，如果想用这些功能，需要设置 lang 属性的来实现。例如，你可以在组件的样式中这样用 SASS ：
<style lang="sass">
/* 编写 SASS! */
</style>
更多细节查看 [使用预编译器]。
语言块
<template>
默认语言：
html。每个
*.vue文件几乎都包含一个<template>块。<template>内的内容字符串会被提取出来，用来编译进 Vue 组件内的template选项。
<script>
默认语言：
js（默认ES2015也会通过Babel支持）。每个
*.vue文件几乎都包含一个<script>块。脚本就像在CommonJS的环境中一样被执行（就像通过WebPACK中捆绑一个正常的.js模块）。就是说你可以
require()其他的依赖项。由于默认支持 ES2015 ，你也可以用import和export语法。该脚本必须导出一个 Vue.js 组件选项对象，也支持导出一个用
Vue.extend()创建的扩展构造函数，但首先是导出普通对象。
<style>
默认语言：
css。每个
*.vue文件支持多个<style>标签。默认，会通过
style-loader把内容提取并加载到文档的<head>内的<style>标签内。这也是可以[通过配置 Webpack 使组件内所有样式提取到一个单一的CSS文件]。
Src Imports
如果你喜欢把你的 *.vue 组件拆分成多个文件，那么你可以用 src 属性导入外部文件，代码如下：
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
需要注意的是 src 导入要遵循和 CommonJS 的 require() 调用一样的路径解析规则，这就是说你需要用以 ./ 开头的相对路径，并且你可以直接从已安装的 NPM 包内导入资源，例如：
<!-- 从已安装的 "todomvc-app-css" NPM 包内导入文件 -->
<style src="todomvc-app-css/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 。 如果你还不熟悉这个新语言的话，最好去学一下：
这里是一个引用其他 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 ，热加载自动启用。
Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇的更多相关文章
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- ABP框架搭建项目系列教程基础版完结篇
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 经过前面十二篇的基础教程,现在终于该做个总结了. 回顾 第一篇,我们建议新手朋友们先通过ABP官网的启动模板生成解决方案,因为这样 ...
- Fiddler抓包使用教程-基本功能介绍
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72932886 本文出自[赵彦军的博客] Fiddler 基本页面 会话列表功能介绍 ...
- vue组件（Vue+webpack项目实战系列之三）
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.特别对于大型应用开发来说,尽量组件化,并且先造好轮子库,不要重复去写组件,这会显著提升项目 ...
- vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- 【Python3.6+Django2.0+Xadmin2.0系列教程之三（入门篇-下）】学生信息管理系统
上一篇我们已经初步的构建起了一个学生管理系统的模型,现在接着来继续完善它吧. 1.上传图片/文件等资源 有时候需要添加一些附件,例如,新生刚入学,大家相互之间还不熟悉,希望能通过照片来加深印象,并且方 ...
- HelloDjango 系列教程：第 04 篇：Django 迁移、操作数据库
文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 我们已经编写了博客数据库模型的代码,但那还只是 Python 代码而已,django 还没有把它翻译成数据库语言,因此实际上这 ...
- Eureka系列(一)Eureka功能介绍
Eureka核心功能点 服务注册(register): Client会发送一次Rest请求给Server端来实现注册,Server接受到请求会将服务信息存储起来,并将注册信息给同集群其他Serve ...
随机推荐
- SQL Server2014 SP2新增的数据库克隆功能
SQL Server2014 SP2新增的数据库克隆功能 创建测试库 --创建测试数据库 create database testtest use testtest go --创建表 )) --插入数 ...
- 02.SQLServer性能优化之---牛逼的OSQL----大数据导入
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 上一篇:01.SQLServer性能优化之----强大的文件组----分盘存储 http ...
- MVC Core 网站开发（Ninesky） 1、创建项目
又要开一个新项目了!说来惭愧,以前的东西每次都没写完,不是不想写完,主要是我每次看到新技术出来我都想尝试一下,看到.Net Core 手又痒了,开始学MVC Core. MVC Core最吸引我的有三 ...
- Hive安装配置指北（含Hive Metastore详解）
个人主页: http://www.linbingdong.com 本文介绍Hive安装配置的整个过程,包括MySQL.Hive及Metastore的安装配置,并分析了Metastore三种配置方式的区 ...
- JAVA设计模式之模板模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...
- [Django]用户权限学习系列之设计自有权限管理系统设计思路
若在阅读本片文章遇到权限操作问题,请查看本系列的前两章! http://www.cnblogs.com/CQ-LQJ/p/5609690.html和http://www.cnblogs.com/CQ- ...
- Web 项目杂记（一）
1.Tomcat 多实例部署 在Tomcat下多实例部署后,发现如下问题,采用etc/init.d/tomcat start方式无法启动,而需要采用startup.sh.查找原因发现,是因为多实例部署 ...
- 你从未知道如此强大的ASP.NET MVC DefaultModelBinder
看到很多ASP.NET MVC项目还在从request.querystring或者formContext里面获取数据,这实在是非常落后的做法.也有的项目建了大量的自定义的modelbinder,以为很 ...
- 关于ie6/7下的z-index
z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基 ...
- SQL Server 索引和表体系结构（聚集索引）
聚集索引 概述 关于索引和表体系结构的概念一直都是讨论比较多的话题,其中表的各种存储形式是讨论的重点,在各个网站上面也有很多关于这方面写的不错的文章,我写这篇文章的目的也是为了将所有的知识点尽可能的组 ...