来源： vue开发看这篇文章就够了 – 个人文章 – SegmentFault 思否
介绍
库和框架的区别
Library
库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
Framework
框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
- 框架规定了自己的编程方式，是一套完整的解决方案
- 使用框架的时候，由框架控制一切，我们只需要按照规则写代码
主要区别
- You call Library, Framework calls you
- 核心点：谁起到主导作用（控制反转）
- 框架中控制整个流程的是框架
- 使用库，由开发人员决定如何调用库中提供的方法（辅助）
- 好莱坞原则：Don’t call us, we’ll call you.
- 框架的侵入性很高（从头到尾）
MVVM的介绍
MVC
- M: Model 数据模型（专门用来操作数据，数据的CRUD）
- V：View 视图（对于前端来说，就是页面）
- C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）
MVVM组成
- MVVM ===> M / V / VM
- M：model数据模型
- V：view视图
- VM：ViewModel 视图模型
优势对比
- MVC模式，将应用程序划分为三大部分，实现了职责分离
- 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM
- MVVM通过
数据双向绑定让数据自动地双向同步
- V（修改数据） -> M
- M（修改数据） -> V
- 数据是核心
- Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM
Vue中的MVVM
虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例
学习Vue要转化思想
- 不要在想着怎么操作DOM，而是想着如何操作数据！！！
起步 – Hello Vue
<div id="app">{{ msg }}</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
</script>
Vue实例
- 注意 1：先在data中声明数据，再使用数据
- 注意 2：可以通过
vm.$data 访问到data中的所有属性，或者 vm.msg
var vm = new Vue({
data: {
msg: '大家好，...'
}
})
vm.$data.msg === vm.msg
数据绑定
- 最常用的方式：
Mustache(插值语法)，也就是 {{}} 语法
- 解释：
{{}}从数据对象data中获取数据
- 说明：数据对象的属性值发生了改变，插值处的内容都会更新
- 说明：
{{}}中只能出现JavaScript表达式 而不能解析js语句
- 注意：Mustache 语法不能作用在 HTML 元素的属性上
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>
<h1 title="{{ err }}"></h1>
双向数据绑定 Vue two way data binding
var obj = {}
Object.defineProperty(obj, 'msg', {
set: function (newVal, oldVal) { },
get: function ( newVal, oldVal ) {}
})
Vue双向绑定的极简实现
<input type="text" id="txt" />
<span id="sp"></span>
<script>
var txt = document.getElementById('txt'),
sp = document.getElementById('sp'),
obj = {}
Object.defineProperty(obj, 'msg', {
set: function (newVal) {
txt.value = newVal
sp.innerText = newVal
}
})
txt.addEventListener('keyup', function (event) {
obj.msg = event.target.value
})
</script>
动态添加数据的注意点
- 注意：只有
data中的数据才是响应式的，动态添加进来的数据默认为非响应式
- 可以通过以下方式实现动态添加数据的响应式
- 1
Vue.set(object, key, value) – 适用于添加单个属性
- 2
Object.assign() – 适用于添加多个属性
var vm = new Vue({
data: {
stu: {
name: 'jack',
age: 19
}
}
})
Vue.set(vm.stu, 'gender', 'male')
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
异步DOM更新
- 说明：Vue 异步执行 DOM 更新，监视所有数据改变，一次性更新DOM
- 优势：可以去除重复数据，对于避免不必要的计算和 避免重复 DOM 操作上，非常重要
- 如果需要那到更新后dom中的数据 则需要通过
Vue.nextTick(callback)：在DOM更新后，执行某个操作（属于DOM操作）
- 实例调用
vm.$nextTick(function () {})
methods: {
fn() {
this.msg = 'change'
this.$nextTick(function () {
console.log('$nextTick中打印：', this.$el.children[0].innerText);
})
console.log('直接打印：', this.$el.children[0].innerText);
}
}
指令
- 解释：指令 (Directives) 是带有
v- 前缀的特殊属性
- 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
v-text
<h1 v-text="msg"></h1>
v-html
<h1 v-html="msg"></h1>
v-bind
- 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
- 语法：
v-bind:title="msg"
- 简写：
:title="msg"
<a v-bind:href="url"></a>
<a :href="url"></a>
v-on
- 作用：绑定事件
- 语法：
v-on:click="say" or v-on:click="say('参数', $event)"
- 简写：
@click="say"
- 说明：绑定的事件定义在
methods
<a v-on:click="doSomething"></a>
<a @click="doSomething"></a>
事件修饰符
.stop 阻止冒泡，调用 event.stopPropagation().prevent 阻止默认行为，调用 event.preventDefault().capture 添加事件侦听器时使用事件捕获模式.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件.once 事件只触发一次
v-model
- 作用：在表单元素上创建双向数据绑定
- 说明：监听用户的输入事件以更新数据
- 案例：计算器
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-for
<div v-for="item in items">
{{ item.text }}
</div>
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>
key属性
- 推荐：使用
v-for 的时候提供 key 属性，以获得性能提升。
- 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
- vue key
- vue key属性的说明
<div v-for="item in items" :key="item.id">
</div>
样式处理 -class和style
- 使用方式：
v-bind:class="expression" or :class="expression"
- 表达式的类型：字符串、数组、对象（重点）
- 语法：
<div v-bind:class="{ active: true }"></div> ===> 解析后
<div class="active"></div>
<div :class="['active', 'text-danger']"></div> ===>解析后
<div class="active text-danger"></div>
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
<div class="active text-danger"></div>
--- style ---
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<div v-bind:style="[baseStyles, overridingStyles]"></div>
v-if 和 v-show
- 条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素v-show：根据表达式之真假值，切换元素的 display CSS 属性
<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>
提升性能：v-pre
- 说明：vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
提升性能：v-once
- 说明：vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<span v-once>This will never change: {{msg}}</span>
过滤器 filter
- 作用：文本数据格式化
- 过滤器可以用在两个地方：
{{}}和 v-bind 表达式
- 两种过滤器：1 全局过滤器 2 局部过滤器
全局过滤器
- 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
- 注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
- 显示的内容由过滤器的返回值决定
Vue.filter('filterName', function (value) {
})
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
<script>
Vue.filter('date', function(value, format) {
})
</script>
局部过滤器
- 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用
{
data: {},
filters: {
filterName: function(value, format) {}
}
}
按键值修饰符
- 说明：在监听键盘事件时，Vue 允许为
v-on 在监听键盘事件时添加关键修饰符
- 键盘事件 – 键值修饰符
- 其他：修饰键（.ctrl等）、鼠标按键修饰符（.left等）
@keyup.13="submit"
@keyup.enter="add"
---
Vue.config.keyCodes.f2 = 113
@keyup.enter.f2="add"
监视数据变化 – watch
- 概述：
watch是一个对象，键是需要观察的表达式，值是对应回调函数
- 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作
- VUE $watch
new Vue({
data: { a: 1, b: { age: 10 } },
watch: {
a: function(val, oldVal) {
console.log('当前值为：' + val, '旧值为：' + oldVal)
},
b: {
handler: function (val, oldVal) { },
deep: true
},
'user.age': function (val, oldVal) {
},
}
})
计算属性
- 说明：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会重新求值
- 注意：Mustache语法（{{}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护
- 注意：
computed中的属性不能与data中的属性同名，否则会报错
- Vue computed属性原理
var vm = new Vue({
el: '#app',
data: {
firstname: 'jack',
lastname: 'rose'
},
computed: {
fullname() {
return this.firstname + '.' + this.lastname
}
}
})
实例生命周期
- 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
- 实例生命周期也叫做：组件生命周期
生命周期介绍
生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！
- 注意：Vue在执行过程中会自动调用
生命周期钩子函数，我们只需要提供这些钩子函数即可
- 注意：钩子函数的名称都是Vue中规定好的！
钩子函数 – beforeCreate()
- 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
- 注意：此时，无法获取 data中的数据、methods中的方法
钩子函数 – created()
钩子函数 – beforeMounted()
钩子函数 – mounted()
- 说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
钩子函数 – beforeUpdated()
- 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
- 注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的
钩子函数 – updated()
- 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
钩子函数 – beforeDestroy()
- 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
- 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
钩子函数 – destroyed()
- 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
axios
- Promise based HTTP client for the browser and node.js
- 以Promise为基础的HTTP客户端，适用于：浏览器和node.js
- 封装ajax，用来发送请求，异步获取数据
- 安装：
npm i -S axios
- axios
created: function () {
axios.get(url)
.then(function(resp) {})
}
---
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios
---
methods: {
getData() {
this.$axios.get('url')
.then(res => {})
.catch(err => {})
}
}
---
axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)
Get 请求
const url = 'http://vue.studyit.io/api/getnewslist'
axios.get('/user?id=89')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.get('/user', {
params: {
id: 12345
}
})
Post 请求
- 不同环境中处理 POST请求
- 默认情况下，axios 会将JS对象序列化为JSON对象。为了使用
application/x-www-form-urlencoded 格式发送请求，我们可以这样：
import qs from 'qs'
qs.stringify({ 'bar': 123 }) ===> "bar=123"
axios.post('/foo', qs.stringify({ 'bar': 123 }))
axios.post('/foo', 'bar=123&age=19')
const url = 'http://vue.studyit.io/api/postcomment/17'
axios.post(url, 'content=点个赞不过份')
axios.post('/user', qs.stringify({
firstName: 'Fred',
lastName: 'Flintstone'
}))
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
全局配置
axios.defaults.baseURL = 'http://vue.studyit.io'
拦截器
- 拦截器会拦截发送的每一个请求，请求发送之前执行
request中的函数，请求发送完成之后执行response中的函数
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});
自定义指令
- 作用：进行DOM操作
- 使用场景：对纯 DOM 元素进行底层操作，比如：文本框获得焦点
- vue 自定义指令用法实例
- 两种指令：1 全局指令 2 局部指令
全局自定义指令
Vue.directive('directiveName', {
bind( el，binding, vnode ) {
},
inserted ( el，binding, vnode ) {},
update(el，binding, vnode,oldVnode) {},
componentUpdated ( el，binding, vnode,oldVnode ) {},
unbind ( el ) {
}
})
Vue.directive('自定义指令名', function( el, binding ) {})
Vue.directive('color', function(el, binding) {
el.style.color = binging.value
})
<p v-color="'red'"></p>
局部自定义指令
var vm = new Vue({
el : "#app",
directives: {
directiveName: { }
}
})
组件
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树
全局组件
- 说明：全局组件在所有的vue实例中都可以使用
- 注意：先注册组件，再初始化根实例
Vue.component('my-component', {
template: '<p>A custom component!</p>',
data() {
return {
msg: '注意：组件的data必须是一个函数！！！'
}
}
})
<div id="example">
<my-component></my-component>
</div>
<div id="example">
<p>A custom component!</p>
</div>
// 3 template属性的值可以是：
- 1 模板字符串
- 2 模板id template: '#tpl'
<script type="text/x-template" id="tpl">
<p>A custom component!</p>
</script>
extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
Vue.component('my-component', Vue.extend({ }))
Vue.component('my-component', { })
var Home = Vue.extend({
template: '',
data() {}
})
Vue.component('home', Home)
局部组件
- 说明：局部组件，是在某一个具体的vue实例中定义的，只能在这个vue实例中使用
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
components: {
'my-component': {
template: ``,
data () { return { } },
props : []
}
}
})
is特性
在某些特定的标签中只能存在指定表恰 如ul > li 如果要浏览器正常解析则需要使用is
<ul id="app">
<my-li></my-li>
正常识别
<li is="my-li"></li>
</ul>
<script>
var vm = new Vue({
el: "#app",
components : {
myLi : {
template : `<li>内容</li>`
}
}
})
</script>
组件通讯
父组件到子组件
- 方式：通过子组件
props属性来传递数据 props是一个数组
- 注意：属性的值必须在组件中通过
props属性显示指定，否则，不会生效
- 说明：传递过来的
props属性的用法与data属性的用法相同
<div id="app">
<hello v-bind:msg="info"></hello>
<hello my-msg="abc"></hello>
</div>
<script>
new Vue({
el: "#app",
data : {
info : 15
},
components: {
hello: {
props: ['msg', 'myMsg'],
template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
}
}
})
</script>
子组件到父组件
方式：父组件给子组件传递一个函数，由子组件调用这个函数
- 说明：借助vue中的自定义事件（v-on:cunstomFn=”fn”）
步骤:
- 1、在父组件中定义方法 parentFn
- 2、在子组件 组件引入标签 中绑定自定义事件 v-on:自定义事件名=”父组件中的方法” ==> @pfn=”parentFn”
- 3、子组件中通过
$emit()触发自定义事件事件 this.$emit(pfn,参数列表。。。)
<hello @pfn="parentFn"></hello>
<script>
Vue.component('hello', {
template: '<button @click="fn">按钮</button>',
methods: {
fn() {
this.$emit('pfn', '这是子组件传递给父组件的数据')
}
}
})
new Vue({
methods: {
parentFn(data) {
console.log('父组件：', data)
}
}
})
</script>
非父子组件通讯
在简单的场景下，可以使用一个空的 Vue 实例作为事件总线
var bus = new Vue()
bus.$on('id-selected', function (id) {
})
bus.$emit('id-selected', 1)
<com-a></com-a>
<com-b></com-b>
<script>
var bus = new Vue()
var vm = new Vue({
el: '#app',
components: {
comB: {
template: '<p>组件A告诉我：{{msg}}</p>',
data() {
return {
msg: ''
}
},
created() {
bus.$on('tellComB', (msg) => {
this.msg = msg
})
}
},
comA: {
template: '<button @click="emitFn">告诉B</button>',
methods: {
emitFn() {
bus.$emit('tellComB', '土豆土豆我是南瓜')
}
}
}
}
})
</script>
内容分发
- 通过<slot></slot> 标签指定内容展示区域
案例：
<div id="app">
<hello>
<p slot="插槽名称">我是额外的内容</p>
</hello>
</div>
new vue({
el : "#app",
components : {
hello : {
template : `
<div>
<p>我是子组件中的内容</p>
<slot name="名称"></slot>
</div>
`
}
}
})
获取组件（或元素） – refs
- 说明：
vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
- 使用：在 HTML元素 中，添加
ref属性，然后在JS中通过vm.$refs.属性来获取
- 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods
<div id="app">
<div ref="dv"></div>
<my res="my"></my>
</div>
<script>
new Vue({
el : "#app",
mounted() {
this.$refs.dv
this.$refs.my
},
components : {
my : {
template: `<a>sss</a>`
}
}
})
</script>
SPA -单页应用程序
SPA： Single Page Application
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。
- 单页面应用程序：
- 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
- 传统多页面应用程序：
- 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
- 1 减少了请求体积，加快页面响应速度，降低了对服务器的压力
- 2 更好的用户体验，让用户在web app感受native app的流畅
实现思路和技术点
- 1 ajax
- 2 锚点的使用（window.location.hash #）
- 3 hashchange 事件 window.addEventListener(“hashchange”,function () {})
- 4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
- 5 原本用作页面内部进行跳转，定位并展示相应的内容
路由
- 路由即：浏览器中的哈希值（# hash）与展示视图内容（template）之间的对应规则
- vue中的路由是：hash 和 component的对应关系在 Web app 中，通过一个页面来展示和管理整个应用的功能。
SPA往往是功能复杂的应用，为了有效管理所有视图内容，前端路由 应运而生！
简单来说，路由就是一套映射规则（一对一的对应规则），由开发人员制定规则。
当URL中的哈希值（# hash）发生改变后，路由会根据制定好的规则，展示对应的视图内容
基本使用
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
const Home = Vue.component('home', {
template: '<h1>这是 Home 组件</h1>'
})
const Login = Vue.component('login', {
template: '<h1>这是 Login 组件</h1>'
})
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/login', component: Login }
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
重定向
{ path: '/', redirect: '/home' }
路由其他配置
- 路由导航高亮
- 说明：当前匹配的导航链接，会自动添加router-link-exact-active router-link-active类
- 配置：linkActiveClass
- 匹配路由模式
new Router({
routers:[],
mode: "hash",
linkActiveClass : "now"
})
路由参数
- 说明：我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，此时，可以通过路由参数来处理
- 语法：/user/:id
- 使用：当匹配到一个路由时，参数值会被设置到 this.$route.params
- 其他：可以通过 $route.query 获取到 URL 中的查询参数 等
// 方式一
<router-link to="/user/1001">如果你需要在模版中使用路由参数 可以这样 {{$router.params.id}}</router-link>
// 方式二
<router-link :to="{path:'/user',query:{name:'jack',age:18}}">用户 Rose</router-link>
<script>
var router = new Router({
routers : [
{ path: '/user/:id', component: User },
{ path: "user" , component: User}
]
})
const User = {
template: `<div>User {{ $route.params.id }}</div>`
}
</script>
嵌套路由 – 子路由
- 路由是可以嵌套的，即：路由中又包含子路由
- 规则：父组件中包含 router-view，在路由规则中使用 children 配置
const User = Vue.component('user', {
template: `
<div class="user">
<h2>User Center</h2>
<router-link to="/user/profile">个人资料</router-link>
<router-link to="/user/posts">岗位</router-link>
<!-- 子路由展示在此处 -->
<router-view></router-view>
</div>
`
})
const UserProfile = {
template: '<h3>个人资料：张三</h3>'
}
const UserPosts = {
template: '<h3>岗位：FE</h3>'
}
var router =new Router({
routers : [
{ path: '/user', component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})
前端模块化
为什么需要模块化
- 1 最开始的js就是为了实现客户端验证以及一些简单的效果
- 2 后来，js得到重视，应用越来越广泛，前端开发的复杂度越来越高
- 3 旧版本的js中没有提供与模块（module）相关的内容
模块的概念
- 在js中，一个模块就是实现特定功能的文件（js文件）
- 遵循模块的机制，想要什么功能就加载什么模块
- 模块化开发需要遵循规范
模块化解决的问题
- 1 命名冲突
- 2 文件依赖（加载文件）
- 3 模块的复用
- 4 统一规范和开发方式
JS实现模块化的规范
- AMD 浏览器端
- CommonJS nodejs
- 加载模块：require()
- 导出模块：module.exports = {} / exports = {}
- ES6 中的 import / export
- CMD 浏览器端
- UMD 通用模块化规范，可以兼容 AMD、CommonJS、浏览器中没有模块化规范 等这些语法
AMD 的使用
Asynchronous Module Definition：异步模块定义，浏览器端模块开发的规范 代表：require.js 特点：模块被异步加载，模块加载不影响后面语句的运行
1、定义模块
define({})
define(function() {
return {}
})
define(['js/a'], function() {})
2、加载模块
require(['a', 'js/b'], function(a, b) {
})
3、路径查找配置
- requirejs 默认使用 baseUrl+paths 的路径解析方式
- 可以使用以下方式避开此设置：
require.config({
baseUrl: './js'
})
require(['a'])
require.config({
baseUrl: './js',
paths: {
template: 'assets/artTemplate/template-native',
jquery: 'assets/jquery/jquery.min'
}
})
require(['jquery', 'template'])
4、非模块化和依赖项支持
- 1 添加模块的依赖模块，保证加载顺序（deps）
- 2 将非模块化模块，转化为模块化（exports）
require.config({
baseUrl: './js',
paths: {
noModule: 'assets/demo/noModule'
},
shim: {
noModule: {
deps: [],
exports: 'sayHi'
}
}
});
define('moduleA', function() {})
require.config({
paths: {
moduleA: 'assets/demo/moduleA'
}
})
5、路径加载规则
- 路径配置的优先级：
- 1 通过 config 配置规则查找
- 2 通过 data-main 指定的路径查找
- 3 以引入 requirejs 的页面所在路径为准查找
<script src="js/require.js" data-main="js/main"></script>
Webpack
1 webpack 将带有依赖项的各个模块打包处理后，变成了独立的浏览器能够识别的文件
2 webpack 合并以及解析带有依赖项的模块
概述
webpack 是一个现代 JavaScript 应用程序的模块打包器(特点 module、 bundler)
webpack 是一个模块化方案（预编译）
webpack获取具有依赖关系的模块，并生成表示这些模块的静态资源
- 四个核心概念：入口(entry)、输出(output)、加载器loader、插件(plugins)
对比
模块化方案: webpack 和 requirejs（通过编写代码的方式将前端的功能，划分成独立的模块）
browserify 是与 webpack 相似的模块化打包工具
webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)
requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )
webpack起源
- webpack解决了现存模块打包器的两个痛点：
- 1 Code Spliting – 代码分离 按需加载
- 2 静态资源的模块化处理方案
webpack与模块
- 前端模块系统的演进
- 在webpack看来：所有的静态资源都是模块
- webpack 模块能够识别以下等形式的模块之间的依赖：
- JS的模块化规范：
- ES2015
import export
- CommonJS
require() module.exports
- AMD
define 和 require
- 非JS等静态资源：
- css/sass/less 文件中的
@import
- 图片连接，比如：样式
url(...) 或 HTML <img src=...>
- 字体 等
webpack文档和资源
安装webpack
- 全局安装：
npm i -g webpack
- 目的：在任何目录中通过CLI使用
webpack 这个命令
- 项目安装：
npm i -D webpack
webpack的基本使用
- 安装：
npm i -D webpack
- webpack的两种使用方式：1 命令行 2 配置文件（
webpack.config.js）
命令行方式演示 – 案例：隔行变色
- 1 使用
npm init -y 初始package.json，使用npm来管理项目中的包
- 2 新建
index.html和index.js，实现隔行变色功能
- 3 运行
webpack src/js/index.js dist/bundle.js进行打包构建，语法是：webpack 入口文件 输出文件
- 4 注意：需要在页面中引入 输出文件 的路径（此步骤可通过配置webpack去掉）
import $ from 'jquery'
const $lis = $('#ulList').find('li')
$lis.filter(':odd').css('background-color', '#def')
$lis.filter(':even').css('background-color', 'skyblue')
webpack-dev-server 配置
一、package.json配置方式
- 安装：
npm i -D webpack-dev-server
- 作用：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率
- 注意：无法直接在终端中执行
webpack-dev-server，需要通过 package.json 的 scripts 实现
- 使用方式：
npm run dev
// 参数解释 注意参数是无序的 有值的参数空格隔开
// --open 自动打开浏览器
// --contentBase ./ 指定浏览器 默认打开的页面路径中的 index.html 文件
// --open 自动打开浏览器
// --port 8080 端口号
// --hot 热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载
"scripts": {
"dev": "webpack-dev-server --open --contentBase ./ --port 8080 --hot"
}
二、webpack.config.js 配置方式(推荐)
var path = require('path')
module.exports = {
entry: path.join(__dirname, 'src/js/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
}
const webpack = require('webpack')
devServer: {
contentBase: path.join(__dirname, './'),
open: true,
port: 8888,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
- html-webpack-plugin 插件
- 安装：
npm i -D html-webpack-plugin
- 作用：根据模板，自动生成html页面
- 优势：页面存储在内存中，自动引入
bundle.js、css等文件
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
filename: 'index.html'
})
]
Loaders（加载器）
webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.
- webpack只能处理JavaScript资源
- webpack通过loaders处理非JavaScript静态资源
1、 CSS打包
- 安装：
npm i -D style-loader css-loader
- 注意：use中模块的顺序不能颠倒，加载顺序：从右向左加载
import './css/app.css'
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
]
}
2、 使用webpack打包sass文件
- 安装：
npm i -D sass-loader node-sass
- 注意：
sass-loader 依赖于 node-sass 模块
module:{
rules:[
{test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
]
}
3、 图片和字体打包
- 安装：
npm i -D url-loader file-loader
file-loader：加载并重命名文件（图片、字体 等）url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中
module: {
rules:[
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
]
}
图片打包细节
limit参数的作用：（单位为：字节(byte)）
- 当图片文件大小（字节）
小于指定的limit时，图片被转化为base64编码格式
- 当图片文件大小（字节）
大于等于指定的limit时，图片被重命名以url路径形式加载（此时，需要file-loader来加载图片）
- 图片文件重命名，保证相同文件不会被加载多次。例如：一张图片（a.jpg）拷贝一个副本（b.jpg），同时引入这两张图片，重命名后只会加载一次，因为这两张图片就是同一张
- 文件重命名以后，会通过MD5加密的方式，来计算这个文件的名称
module: {
rules: [
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
字体文件打包说明
- 处理方式与图片相同，可以使用：
file-loader或url-loader
babel
基本使用（两步）
module: {
rules: [
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}
- 第二步：在项目根目录中新建
.babelrc配置文件
/* 创建 .babelrc 文件*/
// 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置
{
"presets": ["env"]
}
babel的说明
- babel的作用：
- 1 语法转换：将新的ES语法转化为浏览器能识别的语法（babel-preset-*）
- 2 polyfill浏览器兼容：让低版本浏览器兼容最新版ES的API
babel-preset-*
Babel通过语法转换器，能够支持最新版本的JavaScript语法
babel-preset-* 用来指定我们书写的是什么版本的JS代码
- 作用：将新的ES语法转化为浏览器能识别的ES5代码
- ES6语法提案的批准流程
- ES2015 也就是 ES6, 下一个版本是ES7, 从 ES6 到 ES7之间经历了 5 个阶段
- babel-preset-es2015 转换es6的语法
- babel-preset-stage-0 转换比es6更新的语法
Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）
Stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".
babel-polyfill 和 transform-runtime
- 作用：实现浏览器对不支持API的兼容（兼容旧环境、填补）
- 在低版本浏览器中使用高级的ES6或ES7的方法或函数，比如：
'abc'.padStart(10)
- 方式一 polyfill
- 方式二 transform-runtime
- 方式一：
npm i -S babel-polyfill
- 方式二：
npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime
- 注意：babel-runtime包中的代码会被打包到你的代码中（-S）
区别：
polyfill 所有兼容性问题，都可以通过polyfill解决（包括：实例方法）、污染全局环境
runtime 除了实例方法以外，其他兼容新问题都能解决、不污染全局环境
polyfill：如果想要支持全局对象（比如：`Promise`）、静态方法（比如：`Object.assign`）或者**实例方法**（比如：`String.prototype.padStart`）等，那么就需要使用`babel-polyfill`
babel-runtime ：提供了兼容旧环境的函数，使用的时候，需要我们自己手动引入
比如： const Promise = require('babel-runtime/core-js/promise')
存在的问题：
1 手动引入太繁琐
2 多个文件引入同一个helper（定义），造成代码重复，增加代码体积
babel-plugin-transform-runtime：
1 自动引入helper（比如，上面引入的 Promise）
2 babel-runtime提供helper定义，引入这个helper即可使用，避免重复
3 依赖于 babel-runtime 插件
transform-runtime插件的使用：
直接在 .bablerc 文件中，添加一个 plugins 的配置项即可！！！
"plugins": [
"transform-runtime"
]
require("babel-polyfill")
var s = 'abc'.padStart(4)
console.log(s)
module.exports = {
entry: ['babel-polyfill', './js/main.js']
}
总结
babel-core babel核心包
babel-loader 用来解析js文件
babel-preset-* 新ES语法的解析和转换
transform-runtime / babel-polyfill 兼容旧浏览器，到达支持新API目的
// 判断浏览器是否兼容 padStart 这个 API
if (!String.prototype.padStart) {
// 如果不兼容, 就自己模拟 padStart的功能实现一份
String.prototype.padStart = function padStart(targetLength,padString) {
}
}
vue单文件组件
- vue-loader
- single-file components(单文件组件)
- 后缀名：
.vue，该文件需要被预编译后才能在浏览器中使用
- 注意：单文件组件依赖于两个包 vue-loader / vue-template-compiler
- 安装：
npm i -D vue-loader vue-template-compiler
<template>
<div>
<h1>VUE 单文件组件示例 -- App.vue</h1>
<p>这是 模板内容</p>
</div>
</template>
<script>
export default {}
</script>
<style>
h1 {
color: red;
}
</style>
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
使用单文件组件
import Vue from 'vue'
import App from './App.vue'
const vm = new Vue({
el: '#app',
render: c => c(App)
})
单文件组件使用步骤
- 1 安装：
npm i -D vue-loader vue-template-compiler
- 2 在
webpack.config.js 中配置 .vue 文件的loader
{ test: /\.vue$/, use: 'vue-loader' }
- 3 创建
App.vue 单文件组件，注意：App可以是任意名称
- 4 在
main.js 入口文件中，导入 vue 和 App.vue组件，通过 render 将组件与实例挂到一起
单文件组件+路由
import Vue from 'vue'
import App from './App.vue'
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/login', component: Login }
]
})
const vm = new Vue({
el: '#app',
render: c => c(App),
router
})
Mint-UI
快速开始
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
MUI
- MUI
- MUI 也是移动端的UI库
- 使用：从github下载包，找到dist文件夹，只需要导入样式即可
import './lib/mui/css/mui.min.css'
ElementUI
{
"presets": [
["es2015", { "modules": false }], "stage-0"
],
"plugins": [
["component", [
{
"libraryName": "mint-ui",
"style": true
},
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]
]
}
Webpack 发布项目
- webpack 打包的各种坑
webpack 命令能够生成dist目录到磁盘中，最终，把打包后的代码，部署服务器中去webpack-dev-server 仅是在内存中生成的文件，并没有写到磁盘中，所以，只能在开发期间使用
创建项目发布配置文件
- 开发期间配置文件：
webpack.config.js
- 项目发布配置文件：
webpack.prod.js （文件名称非固定 production 生产环境）
- 命令：
webpack --config webpack.prod.js 指定配置文件名称运行webpack
- 参数：
--display-error-details 用于显示webpack打包的错误信息
/* package.json */
"scripts": {
"build": "webpack --config webpack.prod.js"
}
1 在项目根目录中创建 webpack.prod.js 文件
2 在 package.json 中, 配置一个 scripts
3 在 终端中 通过 npm run build 对项目进行打包
打包处理过程
1 删除掉 devServer 相关的配置项
2 将图片和字体文件输出到指定的文件夹中
3 自动删除dist目录
4 分离第三方包（将使用的vue等第三方包抽离到 vender.js 中）
5 压缩混淆JS 以及 指定生成环境
6 抽取和压缩CSS文件
7 压缩HTML页面
8 配合vue的异步组件，实现按需加载功能
处理图片路径
- 注意：如果
limit小于比图片大，那么图片将被转化为base64编码格式
- name参数介绍
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[hash:7].[ext]'
}
}
},
自动删除dist目录
- 安装：
npm i -D clean-webpack-plugin
- 作用: 每次打包之前, 删除上一次打包的dist目录
const cleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
new cleanWebpackPlugin(['./dist'])
]
分离第三方包
- 目的：将公共的第三方包，抽离为一个单独的包文件，这样防止重复打包！
- 例如：main.js、router、vuex中都引入了vue，不分离的话，vue会被打包3次
- 抽离后, vue文件只会被打包一次, 用到的地方仅仅是引用
entry: {
app: path.join(__dirname, './src/js/main.js'),
vendor: ['vue', 'vue-router', 'axios']
},
output: {
filename: 'js/[name].[chunkhash].js',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
]
压缩混淆JS
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
]
抽取和压缩CSS文件
压缩和抽离CSS报错的说明：
Error processing file: css/style.css
postcss-svgo: Error in parsing SVG: Unquoted attribute value
原因：压缩和抽离CSS的插件中只允许 SVG 使用双引号
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
output: {
publicPath: '/',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader']
})
},
]
},
plugins: [
new ExtractTextPlugin("css/style.css"),
new OptimizeCssAssetsPlugin()
]
压缩HTML页面
new htmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
minify: {
collapseWhitespace: true,
removeComments: true,
removeAttributeQuotes: true
}
}),
vue配合webpack实现路由按需加载
步骤
const NewsList = r => require.ensure([], () => r(require('../components/news/newslist.vue')), 'news')
const NewsInfo = () => import( '../components/news/newsinfo.vue')
output: {
chunkFilename: 'js/[name].[chunkhash].js',
},
Mikel
