Vue.js 学习笔记之五：编译 vue 组件
正如上一篇笔记中所说，直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践。主要原因有两个，首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器，这样做可能会导致某些用户无法使用应用程序。其次，即使将来所有的 Web 浏览器都完全支持了 ES6 标准规范，直接在 JavaScript 原生的字符串对象中编写 HTML 模版的做法也会让我们的编程工具无法对其进行高亮显示与语法检查，这不仅会让编程体验大打折扣，也会增加编码的出错概率。为了解决这个问题，Vue 社区专门定义了一种编写 Vue 组件的文件格式，例如对于component_2中的sayHello.js模块文件，我们可以将其重写为一个名为sayHello.vue的 Vue 组件文件，具体内容如 下：
<template>
<div class="box">
<h1>你好， {{ you }}！</h1>
<input type="text" v-model="you" />
</div>
</template>
<script>
const sayHello = {
name: 'sayHello',
props : ['who'],
data : function() {
return {
you: this.who
}
}
};
export default sayHello;
</script>
<style scoped>
.box {
height: 150px;
width: 250px;
background-color: #ccc;
}
</style>
如你所见，这个专用文件实际上是一个 XML 格式的文件，它主要由三个标签组成：首先是<template>标签，用于定义组件的 HTML 模版，其作用就相当于之前在sayHello.js中定义的tpl字符串对象，区别在于该标签中的内容会被自动关联到组件对象的template模版属性上。接下来是<script>标签，用于定义组件对象本身，这部分代码与之前sayHello.js文件中的内容基本相同，只是无需再手动定义组件的template值了。最后是<style>标签，用于定义组件的 CSS 样式，当然了，这部分是可以省略的，如果没有样式可以定义就不必写。
在了解了专用于定义 vue 组件的文件格式之后，我们接下来要面对的一个问题是，JavaScript 解释器本身并不认识这种格式的文件，所以接下来的工作是要用 babel 和 webpack 这些工具将其编译成普通的 JavaScript 代码文件，现在就通过第三个实验记录一下这部分的工作，其主要步骤如下：
在
code/00_test目录中再创建一个名为component_3的实验目录，并在该目录下执行npm init -y命令将其初始化成一个 Node.js 项目。在
component_3实验目录执行npm install --save vue命令将 Vue.js 框架安装到该实验项目中。在
component_3实验目录执行npm install --save-dev <组件名>命令分别安装以下组件：- webpack、webpack-cli： 用于构建项目的专用工具。
- babel、babel-core、babel-loader：用于将文件内容转译成普通的 JavaScript 代码。
- html-webpack-plugin：用于处理 HTML 文档的 webpack 插件。
- vue-loader、vue-template-compiler：用于处理 vue 组件文件格式的 webpack 插件。
- css-loader、vue-style-loader：用于处理 CSS 样式的 webpack 插件。
请注意，以上组件的版本必须与当前使用的 Node.js 运行环境的版本相匹配，否则在后续工作中会遇到各种意想不到的麻烦。
在
component_3实验目录下创建一个名为src的目录，用于存放将要被编译的源代码。将之前创建的
sayHello.vue保存在src原代码目录中，并在该目录下创建以下文件：index.htm文件：<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>学习 vue 组件实验（3）：以专用文件格式注册组件</title>
</head>
<body>
<div id="app">
<say-hello :who="who"></say-hello>
</div>
</body>
</html>
main.js文件：import Vue from 'vue';
import sayHello from './sayHello.vue'; new Vue({
el: '#app',
components: {
'say-hello': sayHello
},
data: {
who:'vue'
}
});
在
component_3实验目录下创建一个名为webpack.config.js的 webpack 配置文件，并在其中输入如下代码：const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = {
entry: {
main: path.join(__dirname,'src/main.js')
},
output: {
path: path.resolve(__dirname,'./public/'),
filename:'js/[name]-bundle.js'
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.htm')
})
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}; module.exports = config;
在
component_3实验目录下将package.json文件中的script项修改如下："scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rm -rf ./public/* && node_modules/.bin/webpack"
}在
component_3实验目录下创建一个名为public的目录，用于存放编译结果。在
component_3实验目录下执行npm run build命令，就可以在public目录下看到编译结果了。用浏览器访问
public目录下的index.html文件，就可以看到最后的结果了，如下图所示：
当然了，webpack 的配置工作是一个非常复杂和繁琐的过程，你在这里看到的只是沧海一粟，更复杂的内容请参考 webpack 的官方文档。
Vue.js 学习笔记之五：编译 vue 组件的更多相关文章
- Vue.js 学习笔记之四：Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue.js 学习笔记 第7章 组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...
- Vue.js学习笔记 第八篇 组件
全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue.js 学习笔记 第1章 初识Vue.js
本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.j ...
- Vue.js 学习笔记之六：构建更复杂的组件
在掌握了如何构建与编译 Vue 组件的基础知识之后,接下来就可以试着来构建一些更具有实际用处的复杂组件了.为了赋予组件更具实用性的后面,首先要做的就是让这些组件具备监听用户自定义事件的能力,并且允许用 ...
- Vue.js 学习笔记之七：使用现有组件
5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
随机推荐
- 矩阵LU分解的MATLAB与C++实现
一:矩阵LU分解 矩阵的LU分解目的是将一个非奇异矩阵\(A\)分解成\(A=LU\)的形式,其中\(L\)是一个主对角线为\(1\)的下三角矩阵:\(U\)是一个上三角矩阵. 比如\(A= \beg ...
- 从IL角度彻底理解回调_委托_指针
从IL角度彻底理解回调_委托_指针 目录 从IL角度彻底理解回调_委托_指针 1.创作此文的背景 1.1.委托能帮助代码更好地封装 1.2.委托能随时随地更方便地运行其他类中的方法 1.3.委托非常适 ...
- LG P2389 电脑班的裁员
Description ZZY有独特的裁员技巧:每个同学都有一个考试得分$a_i(-1000 \leq a_i \leq 1000)$,在$n$个同学$(n \leq 500)$中选出不大于$k$段$ ...
- 串（string）
题目描述 给定一个由小写字母组成的字符串s,每次你可以删去它的一个非回文子串, 求删成空串的最小次数. 输入输出格式 输入格式: 第一行一个整数 t 表示数据组数. 每组数据第一行一个整数 n表示字符 ...
- RXJAVA源码之多线程
在不指定线程的情况下, RxJava 遵循的是线程不变的原则,即:在哪个线程调用 subscribe(),就在哪个线程生产事件:在哪个线程生产事件,就在哪个线程消费事件.如果需要切换线程,就需要用到 ...
- JVM学习目录
JVM学习目录 JVM的整体结构 1.类加载子系统 类加载子系统 2.运行时数据区 运行时数据区总览 堆.栈.方法区的详细图解 2.1.程序计数器 程序计数器 2.2.本地方法栈 本地方法栈 2.3. ...
- 使用AOP和Validator技术对项目接口中的参数进行非空等校验
javax.validation.Validator基础知识补充: validator用来校验注解的生效,如: @NotBlank(message = "地址名不能为空") pri ...
- Python-列表推导式、生成器、字典推导式
列表推导式 [] + for + if 算子.循环.条件, 对相同的数据进行处理, 算子也可以是函数 number = [i for i in range(1, 101) if i % 2 == 0] ...
- windbg分析dump-解决mscorwks不匹配
目录 前言 什么是mscorwks 什么是SOS 什么是mscordacwks 上述错误是什么意思? 什么时候会出现该错误 如何修复错误 符号文件目录规则 相关资料 前言 在使用.net的生产环境时, ...
- 计算(calc)
计算(calc) [题目描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有"(",")",& ...