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 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
随机推荐
- 面经手册 · 第10篇《扫盲java.util.Collections工具包，学习排序、二分、洗牌、旋转算法》
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 算法是数据结构的灵魂! 好的算法搭配上合适的数据结构,可以让代码功能大大的提升效率. ...
- Javaweb中的请求路径的相关总结
重定向和转发相对路径和绝对路径问题 注意:转发和重定向的URLString前有加 / 为绝对路径 反之为相对路径 1.假设通过表单请求指定的Url资源 action="LoginServ ...
- 必考算法之 Top K 问题
大家好,这里是<齐姐聊算法>系列之 Top K 问题. Top K 问题是面试中非常常考的算法题. 8 Leetcode 上这两题大同小异,这里以第一题为例. 题意: 给一组词,统计出现频 ...
- 送命题：讲一讲Mybatis插件的原理及如何实现？
持续原创输出,点击上方蓝字关注我吧 目录 前言 环境配置 什么是插件? 如何自定义插件? 举个栗子 用到哪些注解? 如何注入Mybatis? 测试 插件原理分析 如何生成代理对象? 如何执行? 总结 ...
- JVM运行时数据区--本地方法栈
本地方法栈 1.Java虚拟机栈用于管理Java方法的调用,而本地方法栈用于管理本地方法(一般非Java实现的方法)的调用 2.本地方法栈,也是线程私有的. 3.允许被实现成固定或者是可动态拓展的内存 ...
- 规则引擎在IoT的重要性？
前言 物联网的强大功能主要来自于它使我们能够实时做出更准确的决策的能力,这些在通知.自动化和预测性维护上都有所体现.因此我们需要能对实时数据进行实时响应的工具,答案就是规则引擎.规则引擎可以通过摄取实 ...
- 工具请求接口参数为string类型的JSON字符串时需要加转义字符模拟测试
例如postMan传String类型的json字符串请后台接口时,需要\转义
- Android Handler 分析学习
一.Handler简介 Handler 是 Android 中用于线程间交互的机制.与其相关的概念有 Thread.Looper.Runnable.Message.MessageQueue 等. Go ...
- JAVA并发笔记
重入锁的特性, 避免死锁, 如果有锁的话, 不用重新加锁, 直接增加锁的次数.. Synchronize, ReentrantLock都是重入锁. 读写锁, ReentrantReadWriteLoc ...
- 第一个随笔 Just For Test, Nothing Else
第一个随笔 Just For Test, Nothing Else 注册了第一个博客,希望以后能添加点什么吧