xikuang1311

Vue笔记总结

文章目录

一. Vue基础
- 1.1 认识Vue.js
- 1.2 Vue安装方式
- 1.3 Vue的MVVM
二. Vue基础语法
- 2.1 生命周期
- 2.2 模板语法
- - 2.2.1 创建Vue, options可以放什么
  - 2.2.2 语法
  - - 综合
    - v-on
    - v-for遍历数组
    - v-model表单绑定
    - - v-model结合radio类型使用
      - v-model结合checkbox类型使用
      - v-model结合select类型使用
    - 值绑定
    - 修饰符
    - 检测数组更新
  - 计算属性 computed
  - - 计算属性setter和getter
    - computed / methods区别
  - fulters过滤器
三. 组件化开发
- 3.1 组件的基本介绍
- - 3.1.1 注册组件的基本步骤
  - 3.2.2 全局组件 / 局部组件
  - 3.2.3 父组件 / 子组件
  - 3.2.4 语法糖
  - - 组件模板抽离写法 (简单)
    - 组件可以访问VUE实例数据吗?
    - - 组件中的data为什么必须是一个函数?
- 3.2 组件通讯
- - 3.2.1 父子组件的通讯
  - - 父组件通过props向子组件传递数据
    - 子组件通过事件向父组件发送数据
  - 3.2.2 父子组件通讯-双向绑定
  - 3.2.3 父子组件的访问方式
  - - 父组件访问子组件
    - 子组件访问父组件
  - 3.2.4 跨级组件通信之provide/inject
- 3.3 插槽slot
- - 3.3.1 基本使用
  - 3.3.2 具名插槽
  - 3.3.3 作用域插槽
  - - 编译作用域
  - 3.2.4 作用域插槽使用
四. webpack
- 4.1 webpack安装
- 4.2 webpack配置
- - 4.2.1 CSS Less Img ES6转Es5 Vue 处理
- 4.3 认识Plugin
- 4.4 常用插件介绍
- - 4.4.1 添加版权的Plugin
  - 4.4.2 打包html的plugin
  - 4.4.3 JS压缩的plugin
- 4.5 搭建本地服务器
- 4.6 webpack配置分离
五. Vue CLI
- 5.1 Vue CLI的使用
- - 5.1.1 Vue CLI2
  - - Vue build的选择-runtiome+compilter和runtiome-only 区别
    - 目录结构解析
    - CLI错误
  - 5.1.2 Vue CLI3
  - - 目录结构
    - 配置
六. vue-router
- 6.1 前端渲染 + 后端渲染
- - 6.1.1 后端路由阶段
  - 6.1.2 前端路由阶段
  - 6.1.3 综合总结提问
  - - 1. 什么是前端渲染, 什么是后端渲染?
    - 2. 什么是前后端分离
    - 3. 什么是前端路由, 什么是后端路由?
- 6.2 vue-router基本了解
- - 6.2.1 认识vue-router
  - 6.2.2 安装vue-router
  - - 方法一: 创建项目时就选择路由
    - 方法二: 自己安装路由
- 6.3 vue-router的使用
- - 6.3.1 router-link属性补充
  - 6.3.2 路由跳转第二种方法
  - 6.3.3 动态路由
  - 6.3.4 路由打包文件解析
  - 6.3.5 路由懒加载
- 6.4 vue-router嵌套路由
- - 6.4.1 实现嵌套路由步骤
- 6.5 vue-router参数传递
- - 6.5.1 传递参数的方式
  - 6.5.2 通过点击事件带参数
  - 6.5.3 r o u t e 和 route和 route和router的区别
- 6.6 vue-router导航守卫
- 6.7 keep-alive
- 6.8 路径配置问题补充
七. Vuex详解
- 7.1 Vuex是做什么的
- 7.2 Vuex状态管理
- - 7.2.1 创建使用
- 7.3 Vuex核心概念
- - 7.3.1 state单一状态树
  - 7.3.2 Getters
  - 7.3.3 Mutation
  - - Mutation状态更新
    - Mutation传递参数
    - Mutation响应规则
    - Mutation常量类型 – 概念
    - Mutation同步函数
  - 7.3.4 Actions
  - 7.3.5 Module
  - 7.3.6 项目结构
八. 网络封装
- 8.1 网络模块的选择
- 8.2 jsonp
- 8.3 axios使用
- - 8.3.1 axios请求方式
  - 8.3.2 axios发送并请求
  - - 同时发送两个请求
    - 全局配置
    - 常见的配置选项
- 8.4 axios实例
- - axios封装
  - axios拦截器
九.项目实战
十. 补充知识点
- 10.1 ES6
- - 10.1.1 块级作用域
  - 10.1.2 增强写法
- 10.2 JS高阶函数
- - 10.2.1 编程范式: 声明式编程 or 命令式编程
  - 10.2.2 编程范式: 面向对象编程 or 函数式编程
- 10.3 Promise
- - 10.3.1 Promise的基本使用
  - 10.3.2 Promise三种状态
  - 10.3.2 Promise三种状态

一. Vue基础

1.1 认识Vue.js

Vue是一个渐进式的框架

渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
Vue的核心库以及其生态系统
Core + Vue-router + Vuex

Vue特点和Web开发常见高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

1.2 Vue安装方式

方式一. 直接CDN引入
可以选择引入开发环境版本 / 生产环境版本

// 开发环境版本, 包含了帮助的命令行警告

// 生产环境版本, 优化了尺寸和速度

方式二. 下载和引入

// 开发环境
https://vuejs.org/js/vue.js
       
// 生产环境
https://vuejs.org/js/vue.min.js

方式三. NPM安装

通过webpack和CLI的使用

1.3 Vue的MVVM

M： Model 数据模型

数据层
数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据

V: View 视图模板

视觉层
在前端开发中, 通常是DOM层
作用: 是给用户展示各种信息

VM： View-Model 视图模型

视图模型层
是View和Model沟通的桥梁
一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中
另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data

二. Vue基础语法

语法糖: 简写

2.1 生命周期

事物从诞生到消亡的整个过程

2.2 模板语法

2.2.1 创建Vue, options可以放什么

el
data
methods
生命周期函数
…

2.2.2 语法

综合

插值操作 Mustache

Mustache语法 (双大括号)
可以直接写变量
可以写简单的表达式

v-once
后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化

v-html
后面往往跟一个string类型
会将string的html解析出来并渲染

v-text
与Mustache相似, 一般不用, 不灵活

v-pre
用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法

v-cloak
在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签

v-bind
作用: 动态绑定属性
简写: :

条件判断

v-if
v-else-if
v-else

v-show

当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none

v-on

作用: 绑定事件监听
简写: @
写法:

没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
如果传入某个参数, 同时需要event时, 可以通过$event传入时间


         点击次数: {{counter}}

修饰符	作用	实际调用
.stop	阻止事件冒泡	event.stopPropagation()
.prevent	阻止默认事件	event.preventDefault()
{keyCode I keyAlias}	监听某个键盘的键帽	–
.native	监听组件根元素的原生事件	–
.once	只触发一次回调	–

v-for遍历数组

// 遍历过程中, 没有使用索引值
       {{item}}
       
       // 遍历过程中, 获取索引值
       {{index + 1}} - {{item}}
       
       // 遍历对象的时候, 只有一个值, 活得的是value
       
       // 获取对象的key和value 
       {{value}} - {{key}}
       
       // 获取对象的key和value和index 
       {{value}} - {{key}} - {{index}}

官方推荐, 使用v-for的时候, 加上一个 key属性
图1
key的作用是为了高效的更新虚拟DOM
key要具有唯一性, 不然就没意义

{{index + 1}} - {{item}}

v-model表单绑定

实现表单元素和数据的双向绑定


           
           {{message}}
       
       
       cosnt app = new Vue({
           el: '#app',
           data: {
               message: '你好'
           }
       })
       
       // 界面的message数据改了, data里面的message就改变了, 是双向的

可以将v-model用于textarea元素


       输入内容: {{message}}

其他方法实现双向绑定

// v-bind绑定一个value属性
       // v-on指令给当前元素绑定input事件  
       // 下面代码 等同于 使用v-model
       
       
           
           {{message}}
       
       
       cosnt app = new Vue({
           el: '#app',
           data: {
               message: '你好'
           }
       })

v-model结合radio类型使用


           
               男
           
           
               nv
           
           您选择的性别是: {{sex}}
       
       
       cosnt app = new Vue({
           el: '#app',
           data: {
               sex: '男'
           }
       })

v-model结合checkbox类型使用

单选框

// 需求: 是否同意该协议, 同意后下一步
       
       
           
               同意协议
           
           下一步
       
       
       cosnt app = new Vue({
           el: '#app',
           data: {
               isAgree: false
           }
       })
       
       // 点击文字部分也可以选中

多选框


           
               足球
           
           
               篮球
           
           
               羽毛球
           
           您的爱好是: {{hobbies}}
       
       
       cosnt app = new Vue({
           el: '#app',
           data: {
               isAgree: false,
               hobbies: []
           }
       })

v-model结合select类型使用

下拉框单选

v-model绑定的是一个值
当选中option中一个时, 会将它对应的value赋值到mySelect中


       您最喜欢的水果: {{mySelect}}

下拉框多选

v-model绑定的是一个数组
当选择多个值时,会将选中的option对应的value添加到数组mySelect中


       您最喜欢的水果: {{mySelect}}

值绑定

含义: 动态的给value赋值
1 在前面的value中的值, 都是在定义input的时候直接给定的
2 但真实开发中, input的值可能是从网络获取或定义在data中的
3 可以通过v-bind:value动态的给value绑定值


           
               {{item}}
           
           您的爱好是: {{hobbies}}
       
       
       cosnt app = new Vue({
           el: '#app',
           data: {
               hobbies: [],
               nums: ['篮球', '足球', '羽毛球']
           }
       })

修饰符

lazy修饰符

前景: v-model默认是在input事件中实时同步输入框的数据的 (容易同步的过于频繁 )
作用: 可以让数据只有在失去焦点或回车时才会更新

number修饰符

前景: 默认情况下, 在输入框中无论输入字母还是数字, 都会被当做字符串类型进行处理
作用: 当做数字类型进行处理

trim修饰符

前景: 输入的内容首位容易有空格
作用: 可以过滤掉内容左右两边的空格

检测数组更新

Vue是响应式, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新.

Vue中观察数据编译的方法 – 用它们改变数组会触发视觉更新

数组响应式方法	作用
push()	在数组中最后增加元素
pop()	删除数组中最后一个元素
shift()	删除数组中的第一个元素
unshift()	在数组最前面添加元素
splice()	删除 / 插入 / 替换元素
sort()	xx
reverse()	xx

数组未响应	作用
filter()	xxxxxxx
concat()	xxxxxxx
slice()	xxxxxxx

计算属性 computed

使用: 需要将多个数据结合起来进行显示的时候


       
        // 使用拼接的方法 -- 语法太过繁琐
        {{firstName + '' + lastName}}
        {{firstName}} {{lastName}}
        
        // 使用方法
        {{getFullName()}}
        
        // 使用计算属性 -- 看起来最舒服 最好
        {{fullName}}
       
       
       
       const app = new Vue({
           el: '#app',
           data:{
               firstName: 'li',
               lastName: 'er'
           },
           // 计算属性
           computed: {
               fullName: function () {
                   reture this.firstName + '' + this.lastName
               }
           },
           // 方法
           methods: {
               getFullName () {
                   reture this.firstName + '' + this.lastName
               }
           }
       })

计算属性setter和getter


        {{fullName}}
       
       
       
       const app = new Vue({
           el: '#app',
           data:{
               firstName: 'li',
               lastName: 'er'
           },
           // 计算属性
           computed: {
               fullName: {
                   // 一般没有set方法 
                   set: function (value) {
                       
                   },
                   // 只读属性
                   get: function () {
                       reture this.firstName + '' + this.lastName
                   }
               }
           }
       })
       
       上面案例的写法是简写. 完整写法是调用了get();

computed / methods区别

多次使用的时候

methods: 每次都会调用
computed: 计算机会缓存, 不变的情况下只调用一次

fulters过滤器


        
       
       
       
       const app = new Vue({
           el: '#app',
           data:{
               aaa: 'li'
           },
           // 过滤器
           fulters: {
               showA (value) {
               return;
           }
       })

三. 组件化开发

3.1 组件的基本介绍

3.1.1 注册组件的基本步骤

调用Vue.extend()方法 - 创建组件构造器
调用Vue.component()方法 - 注册组件
在Vue实例的作用范围内 - 使用组件


           //使用组件
           
       
       
       //创建组件构造器
       const cpnC = Vue.extend({
           template: '
           
               标题
               模板
           '
       })
       
       //注册组件
       Vue.component('my-cpn', cpmC)
       
       const app = new Vue({
           el: '#app',
           data:{
               message: ''
           }
       })
       
       //

3.2.2 全局组件 / 局部组件

全局组件

楼上的案例

局部组件


           
       
       
       const cpnC = Vue.extend({
           template: '
           
               标题
               模板
           '
       })
       
       const app = new Vue({
           el: '#app',
           data:{
               message: ''
           },
           components: {
               cpn: cpnC
           }
       })

3.2.3 父组件 / 子组件

父子组件的错误用法: 以子标签的形式在Vue实例中使用

因为当子组件注册到父组件的components时, Vue会编译好父组件的模块
该模块的内容已经决定了父组件将要渲染的HTML (相当于父组件中已经有子组件中的内容了)

3.2.4 语法糖

Vue为了简化注册组件的过程, 提供了注册的语法塘, 省去了调用Vue.extend()的步骤. 而是可以直接使用一个对象来代替

// 全局组件
       Vue.component('xxx', {
           template: '
           
               哈哈哈哈
           
           '
       })
       
       // 内部会自动调用Vue.extend()
       
       
       // 局部组件
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈'
           },
           components: {
               'cpn': {
                   template: '
                       
                           哈哈哈哈
                       
                   '
               }
           }
       })

组件模板抽离写法 (简单)

方法一
将模板放到

// 注册一个全局组件  
       
           
       
       
       
       
       
       Vue.component('cpn', {
           template: '#cpn'
       })

方法二
放入标签


           
       
       
       
       
       
       Vue.component('cpn', {
           template: '#cpn'
       })

组件可以访问VUE实例数据吗?

不能访问
组件是一个单独功能模块的封装 - 这个模块有自己的HTML模板, 也应该有属性自己的数据data

Vue.component('cpn', {
           template: '#cpn',
           data() {
               return {
                   title: '哈哈哈'
               }
           }
       })
       
       // data属性必须是一个函数, 返回必须是一个对象

组件中的data为什么必须是一个函数?

https://www.bilibili.com/video/av59594689?p=57

3.2 组件通讯

3.2.1 父子组件的通讯

父组件通过props向子组件传递数据

写法一 (看看就行)
用这种写法, 太别扭了


           
       
       
       
       
       
       const cpn = {
           template: '#cpn',
           // 把数组里的当变量来看了
           props: ['cmovies', 'cmessage'],
           data () {
               return {}
           }
       }
       
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈',
               movies: ['哈喽', '嗨', '哟哟']
           },
           components: {
               cpn
           }
       })

写法二


           // 在使用组件的时候绑定
           // 不支持驼峰命名  cMovies要写成c-movies
           
       
       
       
       
       
       const cpn = {
           template: '#cpn',
           // 把数组里的当变量来看了
           props: {
               // 类型限制 
               // cMovies: Array,
               // cMeesage: String,
               
               // 类型限制 + 提供一些默认值 or  required表示必传值,不然报错
               cMessage: {
                   type: String,
                   default: '哈',
                   required: true
               },  
               cMovies: {
                   type: Array, // 对象or数组类型的时候, 默认值必须是个函数
                   default() {
                       return {}
                   }
               }
           }
           data () {
               return {}
           }
       }
       
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈',
               movies: ['哈喽', '嗨', '哟哟']
           },
           components: {
               cpn
           }
       })

子组件通过事件向父组件发送数据

// 父组件模板
       
           // 2.父组件监听一个事件
           // 不能写驼峰
           
       
       
       // 子组件模板
       
       
       
       // 子组件
       const cpn = {
           template: '#cpn',
           data() {
               return {
                   categories: [
                       {id: 'aaaa', name: '热门推荐'},
                       {id: 'bbbb', name: '手机数码'},
                       {id: 'cccc', name: '家用家电'},
                       {id: 'dddd', name: '电脑办公'},
                   ]
               }
           },
           methods: {
               btnClick(item) {
                   // 要把item传给父组件
                   // 1. 发送一个事件 (自定义事件)
                   // 会把item当成默认的传到父组件去
                   this.$emit('itemclick', item)
               ]
           }
       }
       
       // 父组件
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈'
           },
           components: {
               cpn
           },
           methods: {
               // 3. 父组件监听的事件 
               cpnClick(item) {
                   console.log('成功了', item);
               }
           }
       })

3.2.2 父子组件通讯-双向绑定

https://www.bilibili.com/video/av59594689?p=63

3.2.3 父子组件的访问方式

父组件访问子组件

$children: 拿所有子组件
$refs: 拿指定的子组件

// this.$children是一个数组类型, 它包含所有子组件对象  
       // 通过遍历, 取出所有子组件的message状态  
       
       
           
           
           // 使用$refs的时候, 在想要访问的子组件上添加ref属性
           
           按钮
       
       
       
       
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈'
           },
           methods: {
               btnClick() {
                   cosole.log(this.$children);
                   // $children 的使用方法, 一般用的少, 下标不固定
                   // this.$children[0].showMessage();
                   // this.$children[0].name;
                   
                   //for (let c of this.$children) {
                   //    console.log(c.name); // 我是子组件的name
                   //    c.showMessage(); // showMessage
                   //}
                   
                   // $refs 的使用方法 => 对象类型, 默认是一个空的对象
                   console.log(this.$refs.aaa.name); // 我是子组件的name
               }
           }
           components: {
               cpn: {
                   template: "#cpn",
                   data() {
                       return {
                           name: '我是子组件的name'
                       }
                   },
                   methods: {
                       showMessage() {
                           cosole.log('showMessage');
                       }
                   }
               }
           }
       })

子组件访问父组件

$parent: 上一级父组件
$root: 根组件


           
       
       
       
       
       
       
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈'
           },
       
           components: {
               cpn: {
                   template: "#cpn",
                   data() {
                      return {
                          name: '我是cpn的name'
                      } 
                   },
                   conmponents: {
                       ccpn: {
                           template: '#ccpn',
                           btnClick() {
                               // 1. 访问父组件$parent
                               // 不建议这么写, 一层套一层 复用性太差
                               console.log(this.$parent);  
                               console.log(this.$parent.name);  // 我是cpn的name
                               
                               // 2. 访问根组件 $root
                               console.log(this.$root.meassage);   // 哈哈哈
                           } 
                       }
                   }
               }
           }
       })

3.2.4 跨级组件通信之provide/inject

provide选项允许我们指定我们想要提供给后代组件的数据/方法。

provide: function () {
         return {
           fun: this.fun, //方法
           name: 'Bob', // 数据
         }
       }

然后在任何后代组件里，我们都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性：

//接受方法
       inject: ['fun']
       //接受数据
       inject:['name']

3.3 插槽slot

作用:
组件的插槽是为了让我们封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

3.3.1 基本使用

插槽的基本使用
插槽的默认值 button
如果有多个值同时放入到组件进行替换时, 一起作为替换元素


           // 使用默认值替换
           
           // 插槽替换的元素
           这是替换的内容呀
           // 多个元素
           
               第一个元素
               第二个元素
           
       
       
       
       
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈'
           },
           components: {
               cpn: {
                   template: '#cpn'
               }
           }
       })

3.3.2 具名插槽

在多个插槽的情况下, 替换制定插槽的内容


           
           
           中间标题
       
       
       
       
       const app = new Vue({
           el: '#app',
           data: {
               meassage: '哈哈哈'
           },
           components: {
               cpn: {
                   template: '#cpn'
               }
           }
       })

3.3.3 作用域插槽

编译作用域

父组件模板所有的东西都在父级作用域内编译, 子组件模板的所有东西会在子级作用域内编译


           我是一 // true
       
       
       
       
       const app = new Vue({
           el: '#app',
           data: {
               isShow: true // Vue实例中的属性
           },
           components: {
               cpn: {
                   template: '#cpn',
                   data() {
                       return {
                            isShow: false // 子组件中的属性
                       }
                   }
               }
           }
       })

3.2.4 作用域插槽使用

父组件替换插槽的标签, 但是内容由子组件来提供

需求: 
       1. 子组件中包括一组数据, num: ['1', '2', '3', '4', '5']
       2. 需要在多个界面展示 
          某些界面是以水平方向展示
          某些界面是以列表形式展示
          某些界面直接展示一个数组 
       3. 内容在子组件, 希望父组件告诉我们如何展示, 怎么办?
          利用slot作用域插槽就行了
          
       
            
           
               // 2. 获取子组件中的num
               
            
            
       
       
       
       
       const app = new Vue({
           el: '#app',
           data: {
               message: '哈哈哈'
           },
           components: {
               cpn: {
                   template: '#cpn',
                   data() {
                       return {
                           num: ['1', '2', '3', '4', '5']
                       }
                   }
               }
           }
       })

四. webpack

是一个JS应用的静态模块打包工具

4.1 webpack安装

webpack依赖node环境, node环境为了可以正常执行很多代码, 必须包含各种依赖的包,npm工具是为了管理包

// node官网下载就行了
       
       // 查看node版本  
       npm -v  
       
       // 全局安装webpack  (指定版本)
       nom install [email protected] -g
       
       // 局部安装webpack  
       // --save-dev 是开发时依赖, 项目打包后不需要继续使用
       cd 对应目录
       npm install [email protected] --save-dev
       
       
       // 查看webpack安装版本
       webpack -v
       
// 安装webpack后错误提示 / VUE项目安装同理
       webpack : 无法加载文件  C:\Users\球球\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。        
       + webpack -v
       
       解决方案 
       （1）以管理员身份运行vs code
       
       （2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
       
       （3）在终端执行：set-ExecutionPolicy RemoteSigned
       
       （4）在终端执行：get-ExecutionPolicy，显示RemoteSigned

4.2 webpack配置

https://www.bilibili.com/video/av59594689?p=77

创建: webpack.config.js 文件

// 为了动态获取打包后的路径, path 在node包里面 -- 看下面一段代码 装包
       const path = require('path')
       
       module.exports = {
           entry: './src/main.js', // 要打包的文件
           output: {
               path: path.resolve(__dirnmae, 'dist'), // 打包后的文件  要写绝对路径--动态获取路径
               filename: 'bundle.js'
           }
       }

node装包

// 初始化--生成
       npm init
       
       // 生成的文件可能有中文 / 符号  可以改名 
       meetwebpack 
       
       ... 后面全部回车, 一路通过. OK就行  
       ... 生成 package.json文件
       
       // package.json文件里面也有依赖的文件

package.json文件

"version" -- 版本号  
       
       // 本地安装webpack (之前是全局安装)  -- 开发时依赖  运行时依赖
       npm install [email protected] --save-dev
       
       // 开发时依赖 (本地安装webpack后, 重新打开package.json文件会出现)
       "devDependencies": {  
           "webpack": "^3.6.0"  
       }
       
       // 使用vue之后, 会有 (运行时依赖)
       "dependencise": {
           "webpack": "^3.6.0"  
       }
       
       ---
       
       // 执行脚本的配置
       "scripts": {
           "test": '',    
           "build": "webpack" 
       }
       
       npm run test
       npm run build

4.2.1 CSS Less Img ES6转Es5 Vue 处理

webpack本身来说无法处理css, 图片, 高级ES6转化ES5的能力, 所以需要webpack扩展对应的loader就好了

loader使用过程

步骤一: 通过npm安装需要使用的loader (查官网)
步骤二: 在webpack.config.js中国年的modules关键字下配置

main.js

// 1. 使用commonjs的模块化规范  
       const {add, mul} = require('./js/mathUtils.js')
       
       // 2. 使用ES6的模块化的规范 
       import {name, age} from "./js/info"
       
       // 3. 依赖CSS文件  
       require('./css/normal.css')

具体的直接看视频吧

4.3 认识Plugin

plugin是什么

plugin是插件的意思, 用户对某个现有的架构进行扩展
webpack中的插件就是对webpack现有功能的各种扩展, 比如打包优化, 文件压缩等

loader和plugin区别

loader - 主要用户转换某些类型的模块, 它是一个转换器
plugin - 是插件, 是对webpack本身的扩展, 它是一个扩展器

plugin的使用过程

步骤一: 通过npm安装需要使用的plugin (某些webpack已经内置的插件不需要安装)
步骤二: 在webpack.config.js中的plugins中配置插件

4.4 常用插件介绍

4.4.1 添加版权的Plugin

名字: BannerPlugin (webpack自带)

// 按照下面方法修改webpack.config.js文件
       const path = require('path')
       const webpack = require('webpack')
       
       module.exports = {
           ...
           plugins: [
               new webpack.BannerPlugin('最终版权归coder所有')
           ]
       }
       
       // 重新打包程序, 查看bundle.js文件的头部, 看到如下信息
       /*! 最终版权归coder所有 */

4.4.2 打包html的plugin

我们知道index.html文件是存在项目的根目录下的, 在真实发布项目是, 发布的却是dist文件夹中的内容, 所以需要将index.html文件打包到dist文件夹中.

名字: htmlWebPlugin

自动生成一个index.html文件 (可以指定模板来生成)
将打包的js文件, 自动通过script标签插入到body中

npm install html-webpack-plugin --save-dev
       
// 修改webpack.config.js文件
       const path = require('path')
       const webpack = require('webpack')
       const htlmWwbPlugin = require('html-webpack-plugin')
       
       module.exports = {
           ...
           plugins: [
               new webpack.BannerPlugin('最终版权归coder所有'),
               new htmlWebPlugin({
                   template: 'index.html' // 这里的template表示根据什么模板快来生index.html
               })
           ]
       }

4.4.3 JS压缩的plugin

项目发布之前, 需要对JS等我呢渐进性压缩处理 (代码丑化)

名字: uglifyjs-webpack-plugin
PS: 指定版本1.1.1 和CLI2保持一致

npm install [email protected] --save--dev 
       
// 修改webpack.config.js文件
       const path = require('path')
       const webpack = require('webpack')
       const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
       
       module.exports = {
           ...
           plugins: [
               new webpack.BannerPlugin('最终版权归coder所有'),
               new uglifyJsPlugin()
           ]
       }
       
       // 查看打包的bundle.js文件, 是已经被压缩的文件

4.5 搭建本地服务器

webpack提供一个可选的本地开发服务器(基础node.js搭建), 内部使用express框架, 可以实现让浏览器自动刷新显示我们修改后的结果

它是一个单独的模块, 在webpack中使用需要先安装

npm install --save-dev [email protected]

devserver也是作为webpack中的一个选项, 选项本身可设置如下属性
contentBase: 为哪一个文件夹提供本地服务, 默认是根文件夹. 可填写 ./dist
port: 端口号
inline: 页面实时刷新
historyApiFallback: 在SPA页面中, 依赖HTML5的history模式

// 修改webpack.config.js文件
       module.exports = {
           ...
           devServer: {
               contentBase: './dist',
               inline: true
           }
       }
       
       // package.json文件中再配置一个scripts,  open参数表示直接打开浏览器 
       "scripts": {
           ...
           "dev": "webpack-dev-server --open" 
       }

4.6 webpack配置分离

很多配置开发时需要, 发布时不需要,反之一样, 所以要做分离

在build文件夹中, 建立一个base.config.js文件 --> 公共配置
在build文件夹中, 建立一个dev.config.js文件 --> 开发配置
在build文件夹中, 建立一个prod.config.js文件 --> 发布配置
复制webpack.config.js文件内容 -> 上面三个文件
按照区分 --> 进行文件夹内配置的删除
装一个插件

npm install webpack-merge --save-dev

https://www.bilibili.com/video/av59594689?p=89 (9m)
…

五. Vue CLI

CLI 是(Command-Line Interface) 命令行界面, 俗称脚手架
Vue CLI是官方发布的vue.js项目脚手架, 可以快速搭建vue开发环境以及webpack配置

Vue CLI 使用前提 - 安装node 安装webpack

5.1 Vue CLI的使用

// 安装Vue脚手架 
       npm install -g @vue/cli  
       
       // 上面安装的是Vue CLI3.0版本, 想要按照Vue CLI2的方式初始化项目时需要进行下列的命令 
       // 拉取2.x模板
       // 'vue init' 的运行效果将会跟 '[email protected]' 相同
       npm install -g @vue/cli-init  
       
       // Vue CLI2初始化项目  project -> 项目名称 英文
       vue init webpack project
       
       // Vue CLI3初始化项目 project -> 项目名称 英文
       vue create project

5.1.1 Vue CLI2

// 创建Vue CLI2项目
       vue init webpack vuecli2   
       
       ? Project name vuecli2 --> 项目名字
       ? Project description test vue cli2 --> 项目描述  
       ? Author  huqinxue --> 作者
       ? Vue build --> 详解看下面一段
       ? Install vue-router? (Y/n)  Y
       ? Use ESlint to lint your code? (Y/n) Y
         ? Pick an ESLint preset --> 选择ESlint的规范 Standard  
       ? Set up unit tests (Y/n)  --> 单元测试 
       ? Setup e2e tests with Nightwatch? (Y/n)  --> 端对端测试 
       ? Yes, use NPM
         Yes, use Yarn

Vue build的选择-runtiome+compilter和runtiome-only 区别

https://www.bilibili.com/video/av59594689?p=95
① runtiome+compilter 和 runtiome-only 区别
② render函数的使用

runtiome+compilter 和 runtiome-only 区别只在 main.js文件里面
       
       // runtiome+compilter 流程 
       template -> ast (抽象语法树) -> render -> Virtual dom (虚拟DOM) -> UI
       
       // runtiome-only 流程  (1. 性能更好  2. 代码量更少)
       render -> Virtual dom (虚拟DOM) -> UI 
       
rebder函数的使用 (runtiome-only)
       
       -- 使用方式一: 
       return createElement('标签', '相关数据对象, 可不传', ['内容数组']) 
       
       new Vue({
           el: "#app",
           render: (createElement) => {
               //render函数基本使用
               return createElement('div', {class: 'box'}, ['codewhy']) 
               //嵌套render函数
               return createElement('div', {class: 'box'}, ['codewhy', createElement('h2', ['标题啊'])]) 
           }
       })
       
       -- 使用方式二: 传入一个组件对象  
       const cpn = Vue.component('cpn', {
           template: '我是cpn组件',
           data () {
               return {
                   
               }
           }
       })
       
       new Vue({
           el: "#app",
           render: (createElement) => {
               return createElement(cpn) 
           }
       })

目录结构解析

https://www.bilibili.com/video/av59594689?p=92

// package.json文件  -> 查看命令的写法
       "scripts": {
           "dev": --> build / webpack.dev.conf.js 
           "start":
           "lint": 
           "build":  --> build / build.js + webpack.prod.conf.js 
       }  
       
       // config文件夹  
       都是定义的一些变量  
       
       // node_moudules文件夹  
       依赖的包 
       
       // src文件夹  
       开发的文件夹  
       
       // static文件夹  
       静态资源, 打包后会原封不动的放到build文件夹中
       
       
       // .bobelrc文件
       依赖evn的时候产生的文件
       
       // .editorconfig文件  
       快速的一些习惯, 比如空格是2个字符还是4个字符
       
       // .eslintignore文件
       eslint可以忽略的问题  
       
       ! 看视频吧, 写的..累
       图2

CLI错误

// 安装不成功的时候, 可以清除缓存 (要从管理员权限打开)
       npm clean cache --force

5.1.2 Vue CLI3

3 是基于 webpack 4 打造，2还是 webapck 3
3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

// 创建Vue CLI3项目
       vue create program 
       
       ? Please pick a preset:
       > default (babel, eslint)
       > Manually select features //手动选择功能

default路线

// 用哪个下载依赖
       Pick the package manager to use when installing dependencies: 
         Use Yarn
       > Use NPM
         
       Vue CLI v3.0.0-alpha.5
       ✨  reating project in E:\git\note\my-project. // 创建项目
       �  Initializing git repository... // 初始化git库
       ⚙  Installing CLI plugins. This might take a while... // 安装脚手架插件  
       
       其实这个过程中还会判断你对npm/yarn源的连接速度，询问你是否切换至淘宝镜像
       Your connection to the the default npm registry seems to be slow.
       Use https://registry.npm.taobao.org for faster installation? 
        
       完成之后我们可以看到除node_modules之外的目录结构变成了
       │  package-lock.json
       │  package.json
       ├─public
       │      favicon.ico
       │      index.html
       └─src
           │  App.vue
           │  main.js
           ├─assets
           │      logo.png
           └─components
                   HelloWorld.vue

Manually select features路线

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
       >( ) TypeScript
        ( ) Progressive Web App (PWA) Support
        ( ) Router
        ( ) Vuex
        ( ) CSS Pre-processors
        ( ) Linter / Formatter --> ESLint
        ( ) Unit Testing
        ( ) E2E Testing
       
       PS: 空格选中/反选 回车确认 
        
       看到可以自由组合现在所需的功能了。
       创建的过程中会询问配置文件保存位置是config.js还是package.json，但是其中也是一些简单的配置
       
       // 这些配置文件存放方式  
       ? Where do you prefer placing config for Bable, PostCSS, ESLint, etc,> (Use arrow keys)  
       > In dedicated config files  --> 单独存放到一个文件   
         In package.json
       
       // 刚刚自定义的配置是否需要保存一个模板 (下次会在创建后出现)  
       // 可以删除的, 在.vuerc文件里  
       // 文件后面有rc (run command 运行终端的意思)  
       ? Save this as a preset for future projects? (Y/n)
       ...
       
       // 用哪个下载依赖
       Pick the package manager to use when installing dependencies: 
         Use Yarn
       > Use NPM