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 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
随机推荐
- Python中的type(),isinstance,()dir(),的区别
1.type() type(),获取一个变量的类型,返回值为:<class '类名'>,属于class类型2.isinstance() isinstance(),判断一个对象是否属于某种数 ...
- JS中条件判断语句
用pycharm敲代码时,在.js文件中敲,敲完之后复制代码到浏览器的console中去回车执行 1.if( ){} 2.switch(a){} 3.for循环 循环列表 循环字典 循环字符串 另外 ...
- 整理的网上的MySQL优化文章总结
MySQL优化 Linux优化 IO优化 调整Linux默认的IO调度算法. IO调度器的总体目标是希望让磁头能够总是往一个方向移动,移动到底了再往反方向走,这恰恰就是现实生活中的电梯模型,所以IO调 ...
- 万字详解 TDengine 2.0 数据复制模块设计
导读:TDengine分布式集群功能已经开源,集群功能中最重要的一个模块是数据复制(replication),现将该模块的设计分享出来,供大家参考.欢迎大家对着设计文档和GitHub上的源代码一起看 ...
- 给你的MyBatis-Plus装上批量插入的翅膀
努力和选择,哪个更重要?关注微信公众号[天开易想]这是一位懂互联网研发和架构的户外.篮球老铁 前言 各位好,我是易哥(thinkYi). 大家有用过MyBatis-Plus(简称MP)的都知道它是一个 ...
- System Verilog随笔（1）
测试文件该怎么写? 首先看一个简单代码案例: `timescale 1ns/10ps //1 module test; //2 intput wire[15:0] a; output reg[15 ...
- Azure 内容审查器之文本审查
内容审查器 Azure 内容审查器也是一项认知服务.它支持对文本.图形.视频进行内容审核.可以过滤出某些不健康的内容,关键词.使你的网站内容符合当地的法律法规,提供更好的用户体验. 文本内容审核 其中 ...
- （转载）CPU基础知识
本文转载自网络. 如有侵权,请联系处理! 简介 中央处理器(CPU,Central Processing Unit)是一块超大规模的集成电路,是一台计算机的运算核心(Core)和控制核心( Con ...
- LeetCode刷题总结-DFS、BFS和回溯法篇
本文总结LeetCode上有关深度优先搜索(DFS).广度优先搜索(BFS)和回溯法的算法题,推荐刷题总数为13道.具体考点分析如下图: 一.深度优先搜索 1.字符匹配问题 题号:301. 删除无效的 ...
- 引用类型之Array(一)
Array类型 除了Object之外,Array类型在ECMAScript中也很常用.ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.ECMAScript数组的每一项可以保存任何类 ...