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 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
随机推荐
- Linux：基础命令三
一.软链接 相当于windows中的快捷方式,为了方便用户在使用时更快找到 ln -s /application/appche2.2.0/ /application/appche 注意: ...
- JS基础回顾_滚动条
// log function getScrollOffset() { if (window.pageXOffset) { return { x: window.pageXOffset, y: win ...
- .NET委托，事件和Lambda表达式
委托 委托是什么? 委托是一种引用类型(其实就是一个类,继承MulticastDelegate特殊的类.),表示对具有特定参数列表和返回类型的方法的引用. 每个委托提供Invoke方法, BeginI ...
- db2错误代码可能的原因
一. SQL5005C运行cmd未用管理员权限打开 SQLCODE-303 数据类型不兼容 SQLCODE-305 查出的数据有NULL未处理直接写入接收变量 二.应该不会有人直接写sql用这个 ...
- spring framework源码之AnnotationConfigApplicationContext
AnnotationConfigApplicationContext 内部使用了AnnotatedBeanDefinitionReader:ClassPathBeanDefinitionScanner ...
- 探讨PostgreSQL实例中数据库之间的关系
疑问 前几天PG学习微信群有人在问"pg_class 存储了对象和命名空间,表空间的对应关系,为什么没有和数据库的关系?我想查数据库下面有多少对象,找不到数据库和对象的关系?" 简 ...
- MiniJpegDecoder使用介绍
承接昨天写的<JPEG软解码实现介绍>,今天介绍其使用方法和一些细节说明. 1.仓库下已经包含了几个jpeg文件,以方便直接校验. 2.使用命令分为两种模式. 一种是直接解码为yuv文件, ...
- SQL Server邮件相关SQL语句出现严重的ASYNC_NETWORK_IO等待事件案例
DPA监控发现一台SQL Server服务器最近两天执行系统存储过程msdb.dbo.sp_MailItemResultSets中的某个SQL时,出现较严重的ASYNC_NETWORK_IO等待. ...
- 基础篇：深入解析JAVA反射机制
目录 反射的概念 获取Class的三种方法 JAVA反射API 反射机制应用的场景 反射和JDK动态代理 欢迎指正文中错误 关注公众号,一起交流 参考文章 反射的概念 java的放射机制:在程序运行时 ...
- Java基础——锁
1.锁 当一个共享资源被多方访问时为了避免发生冲突而施加的一种机制 2.乐观锁和悲观锁 Java中锁在宏观分为乐观锁和悲观锁 乐观锁:是一种乐观思想,认为多读少写,一般情况下数据在修改时不会出现冲突, ...