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 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
随机推荐
- 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
- python中绑定码云仓库
1.File——Settings——Version Control——Git——输入git安装路径下bin下的git.exe路径——点击后面的Test测试一下,弹出版本点击ok即可 2.点击工具栏中的 ...
- mysqli报错注入常见函数
以下均摘自<代码审计:企业级Web代码安全架构>一书 1.floor() select * from test where id=1 and (select 1 from (select ...
- hadoop文件系统上的小文件合并-Hadoop Archives
1. 什么是Hadoop archives Hadoop archives是特殊的档案格式.一个Hadoop archive对应一个文件系统目录. Hadoop archive的扩展名是.har.Ha ...
- Linux实战（4）：Centos7升级python
记一笔升级python后产生的问题,并给予解决方案.莫慌看下文: 升级python3 我是直接 yum安装的,当然安装方法有很多,不喜欢此安装方式的可选用其他方式,我再此就不一一解释了.安装方式可不同 ...
- openstack核心组件——neutron网络服务（8）
云计算openstack核心组件——neutron网络服务(8) 一.neutron 介绍: Neutron 概述 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云 ...
- HashTable学习
HashTable虽然加上了线程安全,但是源码走向和思想比hashMap还是要简单直白很多,hashmap还得再看,因为很多关键点没有get,下午&明天自己去debug一遍再继续看看博客 脑子 ...
- 用友yonsuite产品二开之简单的yonsql查询小工具
和以往的用友产品不同,yonsuite产品开发了低代码平台,满足客户的个性化开发需求.嗯~,一句话不知当讲不当讲,那就讲:所谓低代码平台就是开发不想用实施不会用系列.让我一个开发感受到了憋屈.
- 容器云平台No.1~基于Docker及Kubernetes构建的容器云平台
开篇 最近整理笔记,不知不觉发现关于kubernetes相关的笔记已经达99篇了,索性一起总结了.算是对这两年做容器云平台的一个总结,本文是开篇,先介绍下所有用到的组件.首先来看下架构图(实在画的太丑 ...
- [阅读笔记]Attention Is All You Need - Transformer结构
Transformer 本文介绍了Transformer结构, 是一种encoder-decoder, 用来处理序列问题, 常用在NLP相关问题中. 与传统的专门处理序列问题的encoder-deco ...