Vue.js实战第十章笔记

10.1前端工程化与webpack
Virtual Dom并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行D
通常，前端自动化（半自动化）工程主要解决以下问题：

· JavaScript、CSS代码的合并和压缩。
· CSS预处理：Less、Sass、Stylus的编译。
· 生成雪碧图（CSS Sprite）。
· ES6转ES5.
· 模块化。

前端工程化工具webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码。在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。
举一个简单的例子，平时加载CSS大多通过标签引入CSS文件，而在webpack里，直接在一个.js文件中导入，例如：

import 'src/styles/index.css'

webpack的主要适用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载的js组成，它的html结构可能会非常简单，比如：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta chartset="UTF-8"><title>webpack app</title><link rel="stylesheet" href="dist/main.css">
</head>
<body><div id="app"></div><script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

ES6中有两个语法export和import，export和import是用来导出和导入模块的。一个模块就是一个js文件，它拥有独立的作用域，里面定义的变量外部是无法获取的。

//config.js
var Config = {version: '1.0.0'
};
export {Config};

或

//config.js
export var Config = {version: '1.0.0'
};

其他类型（比如函数、数组、常量等）也可以导出，例如导出一个函数：

//add.js
export function add(a,b){return a + b;
};

模块导出后，在需要使用模块的文件使用import再导入，就可以在这个文件内使用这些模块了。例如：

//main.js
import { config } from './config,js';
import { add } from './add.js';
console.log(Config);  //{ version: '1.0.0' }
console.log(add(1,1));  //2

以上几个示例中，导入的模块名称都是在export的文件中设置的，也就是说用户必须预先知道这个名称叫什么。而有时候，用户不想去了解名称是什么，只是把模块的功能拿来使用，或者想自定义名称，这是使用export default来输出默认的模块。例如：


//config.js
export default {version: '1.0.0'
};//add.js
export default function(a,b) {return a + b;
};//main.js
import conf from './config.js'
import Add from './add.js'
console.log(conf );  //{ version: '1.0.0' }
console.log(Add(1,1));  //2

如果使用npm安装了一些库，在webpack中可以直接导入

import Vue from 'vue';//导入vue库
import $ from 'jquery';//导入Jquery库

10.2webpack基础配置
10.2.1安装webpack与webpack-dev
安装前确保安装了node.js和npm。使用npm初始化配置。

npm init  //初始化配置
npm install webpack –save-dev   //本地局部安装webpack
npm install webpack-dev-server  –save-dev   //本地局部安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动服务器、热更新、借口代理等。

10.2.2 就是一个js文件而已
归根到底，webpack就是一个.js配置文件。webpack配置中最重要也是必选的两项就是入口（Entry）和出口（Output）。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，出口则用来配置编译后的文件储存位置和文件名。

var path = require('path');
var config = {entry: {//入口配置main: './main'},output: {//打包输出目录path: path.join(_dirname, './dist'),publicPath: '/dist/',filename: 'main.js'}
};
module.exports = config;

10.2.3 逐步完善配置文件
在 webpack 的世界里，每个文件都是一个模块，比如css、 .js、 .html、 .jpg、 .less 等。对于不同的模块，需要用不同的加载器（Loaders）来处理，而加载器就是 webpack 最重要的功能。通过安装不同的加载器可以对各种后缀名的文件进行处理，比如现在要写一些 css 样式，就要用到 style-loader 和 css-loader。下面就通过NPM 来安装它们：

npm install css-loader --save-dev
npm install style-loader --save-dev

安装完成后，在 webpack.config.js 文件里配置 Loader，增加对.css 文件的处理：

var config={// ...module:[rules:[{test:/\.css$/,use: ['style-loader','css-loader']}]]
}

10.3 单文件组件与vue-loader
Vue.js是一个渐进式的js框架，在使用wewbpack构建Vue项目时，可以使用一种新的构建模式：.vue单文件组件。就是一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对.vue格式的文件进行处理。一个.vue文件一般包含3部分，即、

Vue.js实战第十章笔记相关推荐

《Vue.js实战》读书笔记
嗯,加油啦!!都是书里的东西,整理了一下,以后复习的时候看. 电子档资源见评论摘些最近看书的句子: 迪安却不一样,他为了面包和性爱在社会上使劲打拼. 我不知道自己究竟是谁了,我远离家乡,旅途劳顿,疲 ...
[Vue.js] 一篇超级长的笔记，给《Vue.js 实战》划个重点
本文前言本笔记建立在书籍<Vue.js实战 / 梁灏编著>的基础上,旨在帮助有 Vue.js 基础的朋友快速回忆 Vue.js 的细碎内容.初学者建议阅读<Vue.js实战> ...
08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）
1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
3.Vue.js 实战调查问卷WebApp项目
问卷调查demo已上传,欢迎大家指正,欢迎大家下载:https://download.csdn.net/download/lzb348110175/11085995 如果您没积分的话,可以私信/评论, ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
js 查错_7年前端开发经验的我，写了本Vue.js实战开发，开源高清PDF下载
Vue作为目前发展最迅速的前端框架越来越多的受到前端T程师青睐,Vue社区也是Web前端最活跃的社区之一. 更多的公司在转为Vue框架,但针对Vue优秀权威.实战的图书相对欠缺,梁灏著<Vue. ...
vue --- vue.js实战基础篇课后练习
练习1:在输入框聚焦时,增加对键盘上下键按键的支持,相当于加1和减1 练习2:增加一个控制步伐的prop-step,比如设置为10,点击加号按钮,一次增加10 思路: // 考虑到子模板的复用性,即在 ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
《Vue.js实战》第七章.组件
7.1 组件作用: 提高代码复用性,使项目易于维护 7.1 组件的使用 7.1.1 组件注册-全局注册全局注册后,任何vue的实例都可以使用该组件. Vue.component('my-compon ...

Vue.js实战第十章笔记

Vue.js实战第十章笔记相关推荐

最新文章

热门文章