什么是Vue.js

Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架，（React除了开发网站，还可以开发手机App，Vue语法也是可以用于手机App开发的，需要借助于Weex）
Vue.js是前端的主流框架之一，和Angualr.js、React.js一起，并称为前端三大主流框架
Vue.js是一套构建用户界面的框架，**只关注视图层++，它不仅易上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层，蛀牙工作就是和界面打交道。

为什么学习流行框架

企业为了提高开发效率，在企业中，时间就是效率，效率就是金钱。
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过跨年提供的指令，前端程序员只需要关心数据的业务逻辑，不在关心DOM是如何渲染的】）
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时候去关注业务逻辑。
增强就业竞争力

框架和库的区别

框架：是一套完整的解决方案：对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目
库（插件）：提供某一个小功能，对项目的侵入性较小。如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

Node（后端）中的MVC与前端中的MVVM之间的区别

MVC是后端的分层开发概念。M指Model，主要处理数据；V是视图层，（前端页面）；C是业务逻辑层（路由、用户登录注销）
MVVM是前端视图层的概念，主要关注于视图层分离。也就是说：MVVM把前端的视图层，分为了三部分Model，View，VM ViewModel
为什么有了MVC还要有MVVM

Vue.js基本代码和MVVM之间的对应关系

Vue之 `基本代码结构` 和`插值表达式`、`v-cloak`

Vue指令之`v-tex`和`v-html`

Vue指令之`v-bind`的三种用法

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ',这是追加的内容'"

Vue指令之`v-on`和`跑马灯效果`

跑马灯效果

HTML结构：
```
 
     
     
     {{ msg }}
 
```

2.Vue实例

    //在vm实例中，如果要获取data里的数据或调用methods中的方法，
    //必须通过 this.数据属性名 或 this.方法名来进行访问，this代表vm实例对象
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '快乐的一只小青蛙~',
            intervalId: null //在data上定义定时器的Id，开一个定时器就重新定义一遍
        },
        methods: {
            run() {
                
                // 判断定时器是否为null，是否在静止状态点击的“快乐”按钮，不是则返回，是则执行下列代码
                if(this.intervalId != null) return;

                //es6语法，不需要先获取this再重新赋值
                //嵌套函数内部的this与外部的this保持一致
                this.intervalId = setInterval( () => {
                    // 获取头部的第一个字符
                    var start = this.msg.substring(0,1)
                    // 获取到后面的所有字符
                    var end = this.msg.substring(1)
                    // 重新拼接得到新的字符串，并赋值给 this.msg
                    this.msg = end + start

                    //vm实例会监听自己内部data中所有数据的改变，只要数据已发生编发，就会自动把最新的数据，
                    //从data上同步到页面中去，因此程序员只要关心数据的变化，不需要关心重新渲染
                }, 400)
                
            },
            stop() {
                clearInterval(this.intervalId)
                // 每当清除了定时器之后，需要把定时器重新赋值给null
                this.intervalId = null
            }
        }
    })

    //分析
    //1. 给“快乐”按钮，绑定一个点击事件
    //2. 在按钮的事件处理函数中，写相关的业务逻辑：拿到msg字符串，然后低哦用字符串的
    //substring来进行字符串的截取操作，把第一个字符截取出来放到最后一个位置即可
    //3. 为了实现点击下按钮，自动截取的功能，需要把步骤2中国的代码，放到一个定时器中去。

Vue指令之`v-on`的缩写和`事件修饰符`

事件修饰符：

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次

Vue指令之`v-model`和`双向数据绑定`

简易计算器案例

HTML代码结构

vue实例

     var vm = new Vue({
     el: "#app",
     data: {
         n1: 0,
         n2: 0,
         result: 0,
         opt: '+'
     },
     methods: {
         calc () {
             //1.算数方法
             // switch(this.opt){
             //     case '+':
             //         this.result = parseInt(this.n1) + parseInt(this.n2)
             //         break;
             //     case '-':
             //         this.result = parseInt(this.n1) - parseInt(this.n2)
             //         break;
             //     case '*':
             //         this.result = parseInt(this.n1) * parseInt(this.n2)
             //         break;
             //     case '/':
             //      this.result = parseInt(this.n1) / parseInt(this.n2)
             //         break;
             // }
             
             //2.投机取巧，正式开发中，尽量少用
             var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
             this.result = eval(codeStr)
         }
     }
 });

在Vue中使用样式

使用class样式

1.数组

这是一个熟悉的H1

2.数组中使用三元表达式

这是一个熟悉的H1

3.数组中嵌套对象

这是一个熟悉的H1

使用内联样式

1.直接在元素上通过 :style的形式，书写样式对象

这是一个熟悉的H1

2.将样式对象，定义到data中，并直接引用到:style中

在data上定义样式：

data: {
   h1StyleObj: {color: 'red', 'font-size': '40px', 'font-weight': '200'}
}

在元素中，通过属性绑定的形式，将样式对象引用到元素中

这是一个熟悉的H1

3.在：style中通过数组，引用多个data上的样式对象

在data上定义样式：

data: {
   h1StyleObj1: { color: 'red', 'font-size': '40px', 'font-wight': '200'},
   h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通过属性绑定的形式，将杨思对象应用到元素中:

这是一个熟悉的H1

Vue指令之`v-for`和`key`属性

1.迭代数组

    
        索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}

2.迭代对象中的属性

    
    这是第 {{i}} 个p标签

2.2.0+版本里，当在组件中使用 v-for 时，key现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给Vue 一个提示，以便它能跟踪每个节点的身份，从而复用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

Vue指令之`v-if`和`v-show`

一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗，因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好

Vue.js-Day2

品牌管理案例

添加新品牌

删除品牌

根据条件筛选品牌

1.x版本中的filterBy指令，在2.x中已经被废除：

[filterBy - 指令]



    {{item.id}}

    {{item.name}}

    {{item.ctime))

    

        删除

在2.x版本中：

Vue调试工具`vue-devtools`的安装步骤和使用

https://chrome.google.com/webstore/search/devtools?hl=zh-CN

过滤器

概念：Vue.js允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：sustache 插值和 v-bind 表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示；

私有过滤器

HTML元素

    {{item.ctime | dataforms('yyyy-mmm-dd')}}

私有filters定义方式：

 //定义一个私有的过滤器
 var vm2 = new Vue({
     el: '#app2',
     data: { 
         dt: new Date()
     },
     methods: { },
     //带 s ，对象， 定义私有过滤器， 过滤器有两个条件: [过滤器名称 和 处理函数]
     //过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器的名称一样，则优先调用私有的
     filters: { 
         dataFormat: function(dateStr, pattern = '') {
     //根据给定的时间字符串，得到特定的时间
     var dt = new Date(dateStr)

     // yyyy - mm - dd
     var y = dt.getFullYear()
     //padStart（maxLength, fillString=''）字符填充方法，最大长度为2，不够则在前面填充0
     //padEnd(maxLength, fillString='')同理，不同的是在后面添加
     var m = (dt.getMonth() + 1 ).toString().padStart(2,'0')
     var d = dt.getDate().toString().padStart(2,'0')

     //先转成小写
     if(pattern.toLowerCase() === 'yyyy-mm-dd') {
         return `${y}-${m}-${d}`
     }else {
         var hh = dt.getHours().toString().padStart(2,'0')
         var mm = dt.getMinutes().toString().padStart(2,'0')
         var ss = dt.getSeconds().toString().padStart(2,'0')

         return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~`
     }
 }
     }
 })

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillSting='')来填充字符串；

全局过滤器

    //定义一个全局的过滤器, 进行时间格式化，被所有的vm实例共用
    Vue.filter('dataFormat',function (dateStr, pattern="") {
        //根据给定的时间字符串，得到特定的时间
        var dt = new Date(dateStr)

        // yyyy - mm - dd, 获取年月日
        var y = dt.getFullYear()
        var m = dt.getMonth() + 1 
        var d = dt.getDate()

        // return y + '-' + m +'-' +d //用以下形式代替：
        //return `${y}-${m}-${d}`

        //先转成小写
        //如果 传递进来的字符串类型 ，转为小写后，等于yyyy-mm-dd，那么就返回 年-月-日
        //否则，就返回 年-月-日 时：分：秒
        if(pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
        }else {
            //获取时分秒
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
    })

注意：当有局部和全局两个名称相同的过滤器的时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

键盘修饰符以及自定义键盘修饰符

1. 1.x中自定义键盘修饰符【了解即可】

Vue.directive('on').keyCodes.f2 = 113;

2.x自定义键盘修饰符 https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81

1.1 通过Vue.config.keyCodes.名称 = 按键值来自定义按键修饰符的别名：

`Vue.config.keyCodes.f2 = 113;`

1.2 使用自定义的按键修饰符

``

2.可以直接调用按键值(f2的按键值为113)

``

3.使用系统内置的按键可以不用定义

``

自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html

自定义全局和局部的自定义指令：

全局

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
    // 聚焦元素
    el.focus()
    }
    })

局部

    directives: {
        focus: {
        // 指令的定义
        inserted: function (el) {
         el.focus()
        }
        }
    }

钩子函数

https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0

    // 使用 Vue.derective() 自定义全局指令
    // 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀，
    // 但是： 在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
    //参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus',{
        bind:function(el) {//每当指令绑定到元素上的时候，就立即执行 bind 函数，只执行一次
            /// 注意： 在每个函数中，第一个参数永远是 el ，表示被绑定了指令的元素，这个 el 参数，是一个原生的JS对象
            // 在元素刚绑定了指令的时候，还没有插入到 DOM 中去，这时候，调用 focus 方法没有作用
            // 因为，一个元素，只有插入DOM之后，才能获取焦点
            //el.focus()
        },
        inserted: function(el) {// inserted 表示元素插入到 DOM 中的时候，会执行  inserted 函数，只执行一次
            el.focus()
            // 和 JS 行为有关的操作，最好在 inserted 中去执行，防止 JS 行为不生效
        },
        updated: function() {// 当 VNode 更新的时候，会执行 updated 函数，可能被触发多次

        }
    })

钩子函数的参数

https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0

el：指令所绑定的元素
binding

name：指令的名字，不包含v-前缀
value：指令的绑定值：例如：v-my-directive="1 + 1" 中，绑定值为 2。
expression：字符串形式的表达式，例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

html：

自定义指令：

    //自定义设置字体颜色的指令
    Vue.directive('color',{
        // 样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有一个内联样式
        // 将来元素肯定会显示到页面上，这时候浏览器的渲染引擎必然会解析样式，应用给这个元素
        bind:function(el,binding) {
            // el.style.color = 'red'
            // 和 样式 相关的操作，一般都可以在 bind 中定义

            el.style.color = binding.value
        }
    })

简写函数：在 bind 和 update 时触发相同行为，而不关心其它的钩子函数

下面的例子是自定义私有指令和简写函数

    directives: { // 自定义私有指令
       'fontweight': { // 设置字体粗细
           bind: function (el,binding) {
               el.style.fontWeight = binding.value
           }
        },
        'fontsize': function(el,binding) { //简写函数，注意：这个 function 等同于把代码写到了 bind 和 update 中去
             el.style.fontSize = parseInt(binding.value) + 'px'
        }
    }

Vue实例的生命周期

生命周期

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类：

创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created: 实例已经在内存中创建完成；此时 data 和 methods 已经创建完成，此时还没有开始编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的。因为此时还没有开始重新渲染 DOM 节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue-resource实现get，post，jsonp请求

除了 vue-resource 之外，还可以使用 axios的第三方包实现数据的请求

之前的学习中，如何发起数据请求？
常见的数据请求类型？get，post，jsonp
测试的URL请求资源地址
- get请求地址：http://vue.studyit.io/api/getlunbo
- post请求地址：http://vue.studyit.io/api/post
- jsonp请求地址：http://vue.studyit.io/api/jsonp
JSONP的实现原理
- 由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
- 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作为JSONP（注意：根据JSON的实现原理，知晓，JSONP只支持GET请求）；
- 具体实现过程;
  - 先在客户端定义一个回调方法，预定义对数据的操作；
  - 再把这个回调方法的名称，通过URL传参的形式，提交都服务器的数据接口
  - 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
  - 客户端拿到服务器返回的字符串之后，当作script脚本去解析执行，这样就能够拿到JSONP的数据了；

配置本地数据库和数据接口API

先解压安装PHPStudy；
解压安装Navicat这个数据库可视化工具，并激活；
打开Navicat工具，新建空白数据库，名为dtcmsdb4；
双击新建的数据库，连接上这个空白数据库，在新建的数据库上右键->运行SQL文件，选择并执行dtcmsdb4.sql这个数据库脚本文件；如果执行不报错，则数据库导入完成；
进入文件夹vuecms3_nodejsapi内部，执行npm i安装所有的依赖项；
先确保本机安装了nodemon，没有安装则运行npm i nodemon -g进行全局安装，安装完毕后，进入到vuecms_nodejsapi目录 ->src目录 -> 双击运行 start.bat
如果API启动失败，请检查 PHPStudy 中默认的用户名是 root，默认的密码也是 root

品牌管理改造

展示品牌列表

添加品牌数据

删除品牌数据

Vue中的动画

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能

使用过渡类名

HTML结构
```
 
  
  
 动画
  
 
```

VM实例

 // 创建 Vue实例，得到 ViewModel
 var vm = new Vue({
     el:'#app',
     data:{
         isshow: false
     },
     methods:{
         myAnimate:{
             this.isshow = !this.isshow;
         }
     }
 })

Vue.js-Day3

定义Vue组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便后台代码的分层开发，保证每一个功能模块的职能单一；
组件化：是从UI界面进行划分的；方便UI组件的复用；

全局组件定义的三种方式

使用 Vue.extend 配合 Vue.component 方法；

 var login = Vue.extend({
     template: '登录'
     });
 Vue.component('login',login);

直接使用 Vue.component 方法:

 Vue.component('register',{
     template: '注册'
     });

将模板字符串，定义到script标签中：

同时，需要使用 Vue.component 来定义组件：

    Vue.component('account',{
        template:'#tmpl'
    });

注意：组件中的DOM结构，有且只能有唯一的根元素(Root Element)来进行包裹

组件中展示数据和响应事件

在组件中，data需要被定义为一个方法。例如：

Vue.js - Day4

父组件向子组件传值

组件实例定义方式，注意：一定要使用props属性要定义父组件传递过来的数据

使用v-bind或简化指令，将数据传递到子组件中：
```
 
     
 
```

子组件向父组件传值

原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，funo是子组件调用传递过来方法时候的方法名称

子组件内部通过this.$emit(‘方法名',要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

评论列表案例

目标：主要练习父子组件之间传值

使用`this.$refs`来获取元素和组件

什么是路由

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号），来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

导入 vue-router 组件类库：

命名视图实现经典布局

标签代码结构：

JS代码

CSS代码：

`watch`属性的使用

html结构



     +
     =

JS代码

使用`watch`监视路由地址的改变

html结构



    
    登录
    注册

JS代码

`computed`计算属性的使用

html结构



     +
     =
    

    {{ fullname }}
    {{ fullname }}
    {{ fullname }}

JS代码

`watch`、`computed`、`methods`之间的对比

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体；

`nrm`的安装使用

作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；
什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样。

运行npm i nrm -g全局安装nrm包；
使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
使用nrm use npm或nrm use taobao切换不同的镜像源地址；

注意：nrm只是单纯提供了几个常用的下载包的URL地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具都是npm

Vue.js - Day5 - Webpack

在网页中会引用哪些常见的静态资源？

.js .jsx .coffee .ts(TypeScript 类C#语言)

.css .less .sass .scss

Images

.jpg .png .gif .bmp .svg

字体文件（Fonts）

.svg .ttf .eot .woff .woff2

模板文件

.ejs .jade .vue[这是在webpack中定义组件的方式，推荐]

网页中引入的静态资源多了以后有什么问题？

网页加载速度慢，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系

如何解决上述两个问题

合并、压缩、精灵图、小图片的Base64编码
可以使用requireJS。也可以使用webpack，可以解决各个包之间的复杂依赖关系

什么是webpack

webpack 是前端的一个项目构建工具，它是基于node.js开发出来的一个前端工具，因此要使用webpack必须先安装node

如何完美实现上述的2种解决方案

使用Gulp，是基于task任务的；
使用Webpack，是基于整个项目进行构建的；

借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
根据官网的图片介绍webpack打包过程
webpack官网

webpack 安装的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

初步使用webpack打包构建列表隔行变色案例

运行npm init初始化项目，使用npm管理项目中的依赖包

VScode快捷键ctrl + · 打开终端，注意那个点是键盘上 esc 下面的那个；运行npm init -y初始化，初始化完成后可以想见项目目录多了package.json文件

    E:\Vue_Project\vue-study\day5\webpack-study> npm init -y
    Wrote to E:\Vue_Project\vue-study\day5\webpack-study\package.json:

    {
        "name": "webpack-study",
        "version": "1.0.
        "description": "",
         "main": "main.js",
        "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
    }

创建项目基本的目录结构
使用cnpm i jquery --save安装jquery类库

运行npm i jquery -S安装jquery

    E:\Vue_Project\vue-study\day5\webpack-study> npm i jquery -S
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN [email protected] No description
    npm WARN [email protected] No repository field.

    + [email protected]
    added 1 package from 1 contributor and audited 1 package in 2.161s
    found 0 vulnerabilities

创建main.js并书写各行变色的代码逻辑：

 // 导入jquery类库
 import $ from 'jquery'
 
 // 设置偶数行背景色，索引从0开始，0是偶数
 $('#list li:even').css('backgroundColor','lightblue');
 // 设置奇数行背景色
 $('#list li:odd').css('backgroundColor','pink');

直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法。需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；

运行webpack 入口文件路径输出文件路径对main.js进行处理：

    webpack src/js/main.js dist/bundle.js

注意：如果webpack版本过高，上述语句会报错，需要用webpack .\src\main.js -o .\dist\bundle.js来打包，详情webpack 打包报错：Can't resolve '.\dist\bundle.js' in 'E:\vivian....'

由于每次修改main.js文件都需要重新使用webpack src/js/main.js dist/bundle.js进行打包，累赘且麻烦，因此在项目根目录引入配置文件webpack.config.js，声明要打包的文件路径和导出的文件路径，下次项目更改需要重新打包时，运行webpack即可。

webpack.config.js配置文件内容：

const path = require('path')

// 这个配置文件，其实就是一个 JS 文件，通过 node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用 webpack 打包那一个文件
    output: {
        //输出文件相关配置
        path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' // 指定 输出文件的名称
    }
}

// 当我们在控制台，直接输入 webpack 命令执行的时候，webpack做了以下几步：
// 1. 首先，webpack发现我们并没有通过命令的形式，给它指定出口和入口
// 2. webpack 就会去 项目的根目录 中，查找一个叫做'webpack.config.js'的配置文件
// 3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了配置文件中导出的 配置对象
// 4. 当 webpack 拿到配置对象后，就拿到了配置对象中，指定的 入口 和出口，然后进行打包构建

再由于每次代码更改都需要手动重新打包编译，使用webpack-dev-server这个工具进行偷懒。运行npm i webpack-dev-server -D,把这个工具安装到项目的本地开发依赖。
webpack-dev-server要求webpack安装在本地项目下，运行npm i webpack -D安装。
webpack要求webpack-cli安装在本地项目下，运行npm i webpack-cli -D安装。

在package.json内，添加dev，

{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server" //添加webpack-dev-server
},

运行npm run dev使用webpack-dev-server工具。
i ｢wds｣: Project is running at http://localhost:8080/ 可在终端查看到服务器端口http://localhost:8080/
i ｢wds｣: webpack output is served from /可在终端查看到打包的bundle.js的路径是根目录下的绝对路径，可以通过http://localhost:8080/bundle.js访问到bundle.js。此时引入bundl.js只需写根目录的路径即可
此时修改代码只需保存，webpack-dev-server就会实时监听代码的改变和刷新浏览器，不需要再手动打包，甚至不用刷新浏览器即可看到效果。

webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘中，而是直接托管到了电脑的内存中，所以，我们在项目的根目录中，找不到打包好的bundle.js。可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了项目的根目录中，虽然我们看不见，但是可以认为，和 dist src node_modules平级，有一个看不见的bundle.js文件。正是这种虚拟的托管方式，大大提高了加载效率。

此时需要手动打开浏览器并且是固定端口"8080"，且进入的页面是项目根目录，十分不爽，因此修改package.json代码："dev": "webpack-dev-server --open --port 3000 --contentBase src"，open意思是自动打开浏览器并运行项目，port 3000意思是在3000端口下运行，contentBase src的意思是打开时默认打开src目录下的页面。
继续修改package.json代码："dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"。hot是热更新的意思，意思是将修改的那一部分代码作为补丁打在打包生成的bundle.js上，实现局部更新，加快加载进度。
以上步骤完成后，运行项目只需在项目根目录下运行npm run dev命令，webpack-dev-server就会帮我们自动打开浏览器并在我们指定的端口下运行我们指定的页面，修改代码后仅需保存webpack-dev-server就会帮助我们自动刷新浏览器。

配置 dev-server 的第二种形式

在webpack.config.js下添加

// 启用热更新的第二步
const webpack = require('webpack')

devServer: { // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    // --open --port 3000 --contentBase src --hot
    open: true, // 自动打开浏览器
    port: 3000, // 设置启动时的运行端口
    contentBase: 'src', // 指定托管的根目录
    hot: true // 启动热更新的第一步
}

plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin() // new 一个热更新的模块的对象，启用热更新的第3步
]

在 package.json 中只需声明"dev": "webpack-dev-server"

使用`help-webpack-plugin`插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要绑定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面。

这个插件的两个作用：1. 自动在内存中根据指定页面生成一个内存中的页面。2. 自动把打包好的 bundle.js 追加到页面中去

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖

修改webpack.config.js配置文件如下：

 // 导入处理路径的模块
 var path = require('path');
 // 导入自动生成HTML文件的插件
 var htmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
     entry: path.resolve(_dirname, 'src/js/main.js'), // 项目入口文件
     output: { // 配置输出选项
         path: path.resolve(_dirname, 'dist'), // 配置输出的路径
         filename: 'bundle.js' // 配置输出的文件名
     },
     plugins: [ // 添加plugins节点配置插件
         new htmlWebpackPlugin({
             template:path.resolve(_dirname,'src/index.html'), // 模块路径
             filename: 'index.html' // 自动生成的HTML文件的名称
         })
     ]
 }

修改package.json中script节点中的dev指令如下：
"dev": "webpack-dev-server"
将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中。此时查看页面源代码可以看到底部已经自动引用了bundle.js

使用webpack打包css文件

运行cnpm i style-loader css-loader --save-dev

修改webpack.config.js文件

 module: { // 用来配置第三方loader模块的
     rules: [ // 文件的匹配规则
         { test: /\.css$/,use: ['style-loader', 'css-loader']} // 处理css文件的规则 
     ]
 }

注意：css表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

运行cnpm i less-loader less -D
修改webpack.config.js这个配置文件：
{ test: /\.less$/,use: ['style-loader', 'css-loader','less-loader']},

使用webpack打包scss文件

运行npm i sass-loader -D，终端提示需要安装node-sass依赖
运行cnpm i node-sass -D(注意：只有极少数情况才能使用npm成功安装node-sass，所以这里推荐使用cnpm安装)
修改webpack.config.js这个配置文件：
{ test: /\.scss$/,use: ['style-loader', 'css-loader','sass-loader']},
本人在运行npm run dev命令后报错ERROR in ./src/css/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/[email protected]@sass-loader/dist/cjs.js!./src/css/index.scss)，百度了一下问题解决方法webpack打包node-sass编译报错，可行，运行成功。

// 注意： webpack 处理第三方文件类型的过程：
// 1. 发现这个要处理的文件不是 JS 文件，然后就去配置文件中查找有没有对应第三方 loader 规则
// 2. 如果能找到对应的规则，就会调用对应的 loader 处理这种文件类型；
// 3. 在调用 loader 的时候，是从后往前调用的
// 4. 当最后的一个 loader 调用完毕，会把处理的结果交给 webpack 打包合并，最终输出到 bundle.js 中去

使用webpack识别url地址

运行npm i url-loader file-loader -D命令，安装url-loader第三方模块，同时该模块依赖file-loader，因此一起安装了。
修改webpack.config.js这个配置文件：{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader'}
可以通过传参来指定多大的图片才转码。比如有一张图片是40062字节的，此时修改{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=40063'}，limit 给定的值是图片的大小，单位是 byte，如果图片大于给定的 limit 值，则不会被转为 base64 格式的字符串，如果图片小于或等于给定的 limit，则会被转为 base64 字符串
```
 图片大小40062 = limit值40062 转
 图片大小40062 > limit值40061 不转
 图片大小40062 < limit值40063 转
```
可以通过传参来指定不转码时图片的名称。修改{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=40061&name=[name].[ext]'}，[name]指图片原来的名字叫什么就是什么，不会被改变，[ext]指图片原来的格式不会被改变。
经过上一步，图片不转码时名称不会被改变，但是当引用了两张一样名字的图片时，先引用的图片会被后引用的覆盖，此时修改{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=40061&name=[hash:8]-[name].[ext]'}，[hash:8]-表示图片前面添加8位的哈希值，最高可添加32位。这样就能避免同名图片被覆盖。

webpack使用url-loader处理字体文件

运行cnpm i bootstrap -S安装bootatrap。
在webpack.config.js内添加{ test: /\.(ttf|eot|svg|wpff|woff2)$/,use: 'url-loader' },在index.js添加import 'bootstrap/dist/css/bootstrap.css'

组件中的css作用域问题

抽离路由器为单独的模块

使用饿了么的MintUI组件

Github仓储地址

Mint-UI官方文档

完整引入

导入所有的MintUI组件

    import MintUI from 'mint-ui'

导入样式表：

    import 'mint-ui/lib/style.css'

将Mint-UI注册到 Vue 身上

    Vue.use(MintUI)

vue 中使用 MintUI 中的 Button 按钮，使用例子：

    primary

完整引入之后，使用css组件只需导入标签即可
default

vue中使用 Mint-UI的js组件

导入 js 组件（以 Toast弹框提示为例）
import { Toast } from 'mint-ui';

暴露接口

 export default {
     data() {
         return {}
     },
     methods: {
         show() {
             Toast("提示信息");
         }
     }
 }

在 html 中添加点击事件
default

webpack中bootstrap图标不显示

Mint-UI中按需导入的配置方式

安装 babel-plugin-component：

npm install babel-plugin-component -D

修改.babelrc

 {
     "presets": [
         ["es2015", { "modules": false }]
     ],
     "plugins": [["component", [
     {
         "libraryName": "mint-ui",
         "style": true
     }
     ]]]
 }

按需导入 Mint-UI组件

import { Button } from 'mint-ui'

使用 Vue.compoent 注册按钮组件

Vue.component('mybtn',Button)
或
Vue.component(Button.name,Button)

在相对应的vue文件中添加标签

或直接引用default

使用 MUI 代码片段

注意：MUI不同于 Mint-UI，MUI 只是开发出来的一套好用的代码片段，里面提供了配套的样式，配套的HTML代码段，类似于 Bootstrap；而Mint-UI，是真正的组件套，是使用 Vue 技术封装出来的成套的组件，可以无缝的和 VUE 项目进行集成开发；

因此，从体验上来说，Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；

从体验上来说，MUI 和 Bootstrap 类似；

理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，Mint-UI只适用于 Vue 项目；

官网首页

文档地址

导入 MUI 的样式表：

    import '../lib/mui/css/mui.min.css'

在webpack.config.js中添加新的 loader 规则：

    { test:/\.{png|jpg|gif|ttf}$/,use:'url-loader'}

根据官方提供的文档和example，尝试使用相关的组件

将项目源码托管到oschina中

点击头像 -> 修改资料 -> SSH公钥如何生成SSH公钥
创建自己的空仓库，使用 git config --global user.name "用户名"和git config --global user.email **@**.com来全局配置提交时用户的名称和邮箱
使用git init在本地初始化项目
使用touch README.md和touch .gitignore来创建项目的说明文件和忽略文件；
使用git add .将所有文件托管到git中
使用git commit -m "init project"将项目进行本地提交

新建项目步骤

新建项目文件夹-用vscode打开
初始化项目：在终端运行“npm init”，生成“package.json”
在项目根目录下新建文件夹“src”，和“dist”，在“src”目录下新建“main.js"和”index.html"
安装“webpack-dev-server”，在终端输入“npm i webpack-wdev-server"
webpack-dev-server要求webpack安装在本地项目下,在终端执行命令"npm i webpack"，webpack要求webpack-cli安装在本地项目下，执行命令"npm i webpack-cli"

在根目录下新建“webpack.config.js"，配置webpack。

  module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用 webpack 打包那一个文件
  output: {
      //输出文件相关配置
      path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个目录中去
      filename: 'bundle.js' // 指定 输出文件的名称
  }
  }

在“package.json”文件下添加webpack-dev-server工具

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
运行"npm i html-webpack-plugin -D"安装插件自动生成bundle.js
在配置文件webpack.config.js中添加

var htmlWebpackPlugin = require('html-webpack-plugin')

在配置文件webpack.config.js中添加配置节点

  //所有webpack插件的配置爱节点
  plugins: [
  new htmlWebpackPlugin({
      template:path.resolve(__dirname,'src/index.html'), // 模块路径
      filename: 'index.html' // 自动生成的HTML文件的名称
  })
  ]

运行"npm run dev"不再报错。

配置css文件步骤

运行"npm i style-lloader css-loader"安装插件，在webpack.config.js文件下添加配置节点

  module: { // 用来配置第三方loader模块的
  rules: [ // 文件的匹配规则
      { test: /\.css$/,use: ['style-loader', 'css-loader']} // 处理css文件的规则 
  ]
  }

在main.js中引入css文件：import './css/index.css'

Vue.js - day6

注意：

有时候使用npm i node-sass -D装不上，这时候，就必须使用cnpm i node-sass -D

在普通页面中使用render函数渲染组件

在webpack中配置.vue组件页面的解析

运行 cnpm i vue -S将Vue安装为运行依赖；
运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
运行cnpm i style-loader css-loader -D将解析转换css的包安装为开发依赖，因为.vue文件中会写css样式；
在webpack.config.js中，添加module规则：
{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },

在使用webpack构建的Vue项目中使用模板对象

在webpack.config.js中添加resolve属性：

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

在 main.js文件下导入模板对象

import Vue from 'vue'

使用第三方loader处理高级语法

// 在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的 ES6 语法或者 ES7 语法，
// webpack 是处理不了的，这时候，就需要借助于第三方的 loader，来帮助 webpack 处理这些高级的语法
// 当第三方 loader 把高级的语法转为低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中

通过 babel，可以帮我们将高级的语法转为低级的语法

在 webpack中，可以运行如下命令，安装两套包，去安装 babel 相关的 loader功能：

1.1 第一套包： npm i babel-core babel-loader babel-plugin-transform-runtime -D
1.2 第二套包： npm i babel-preset-env babel-preset-stage-0 -D

打开 webp 的配置文件，在 module 节点下的 rules 数组中，添加一个新的匹配规则：

2.1 { test:/.js$/, use: 'babel-loader', exclude:/node_modules/ }
2.2 注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude选项排除掉，原因如下：
- 2.2.1 如果不排除 node_modules，则 babel 会把 node_modules 中所有的第三方 js 文件都打包编译，消耗cpu，打包速度变慢
- 2.2.2 如果 babel 把 node_modules 中的js转换完毕，项目也无法正常运行

在项目的根目录中，新建一个 .babelrc 的babel 配置文件，这个配置文件，属于 JSON 格式，所以必须符合 JSON 的语法规范

3.1 在 babelrc 中写如下的配置：

     { 
         "presets": ["env","stage-0"],//语法
         "plugins": ["transform-runtime"] //插件
     }

目前安装的 babel-preset-env 是比较新的es语法插件

webpack 中如何使用 vue

安装 vue的包： cnpm i vue -S
由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装能解析这种文件的 loader：cnpm i vue-loader vue-template-complier -D
在 main.js 中，导入 vue 模板 :import Vue from 'vue'
定义一个 .vue 结尾的组件，其中，组件由三部分组成： template script style
使用 import login from './login.vue'导入这个组件
创建 vm 实例，var vm = new Vue({ el: 'app',render: c => c(login) })
在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域
8.注意：. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的。所以，需要在 webpack.config.js 中引入 const VueLoaderPlugin = require('vue-loader/lib/plugin'); 在 plugin 中加入 new VueLoaderPlugin()

结合webpack使用vue-router

在项目入口文件main.js中

导入 vue-router 包

import VueRouter from 'vue-router'

手动安装 VueRouter

Vue.use(VueRouter)

导入自定义的路由模块

import router from './router.js'

将路由对象挂载到 vm 实例上

 var vm = new Vue({
     el:'#app',
     render: c => c(app),// render 会把 el 指定的容器中所有内容都清空覆盖，所以不能把路由的 router-view 和 router-link 写在里面
     // 4. 将路由对象挂载到 vm 上
     router

 })

自定义路由模块文件router.js示例

 import VueRouter from 'vue-router'
 // 导入 Account 组件
 import account from './main/Account.vue'
 // 导入 GoodsList 组件
 import goodslist from './main/GoodsList.vue'
 //导入Account的两个子组件
 import login from './subcom/login.vue'
 import register from './subcom/register.vue'

 //3. 创建路由对象
 var router = new VueRouter({
     routes: [
         // acount goodslist
         { path: '/account',component: account,
         children: [
             { path: 'login', component: login },
             { path: 'register', component: register }
         ]
         },
         { path: '/goodslist',component: goodslist },
     ]
 })

 // 把路由对象暴露出去
 export default router

在对应的 vue 文件中添加容器示例
```
 登录
 注册

 
```

vue全部笔记

什么是Vue.js

为什么学习流行框架

框架和库的区别

Node（后端）中的MVC与前端中的MVVM之间的区别

Vue.js基本代码和MVVM之间的对应关系

Vue之 基本代码结构 和插值表达式、v-cloak

Vue指令之v-tex和v-html

Vue指令之v-bind的三种用法

Vue指令之v-on和跑马灯效果

跑马灯效果

{{ msg }}

Vue指令之v-on的缩写和事件修饰符

事件修饰符：

Vue指令之v-model和双向数据绑定

简易计算器案例

在Vue中 使用样式

使用class样式

这是一个熟悉的H1

这是一个熟悉的H1

这是一个熟悉的H1

使用内联样式

这是一个熟悉的H1

这是一个熟悉的H1

Vue指令之v-for和key属性

Vue指令之v-if和v-show

Vue.js-Day2

品牌管理案例

添加新品牌

删除品牌

根据条件筛选品牌

Vue调试工具vue-devtools的安装步骤和使用

过滤器

私有过滤器

全局过滤器

键盘修饰符以及自定义键盘修饰符

1. 1.x中自定义键盘修饰符【了解即可】

2.x自定义键盘修饰符 https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81

自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html

Vue实例的生命周期

vue-resource实现get，post，jsonp请求

配置本地数据库和数据接口API

品牌管理改造

展示品牌列表

添加品牌数据

删除品牌数据

Vue中的动画

使用过渡类名

Vue.js-Day3

定义Vue组件

全局组件定义的三种方式

登录

注册

组件中展示数据和响应事件

Vue.js - Day4

父组件向子组件传值

子组件向父组件传值

评论列表案例

使用this.$refs来获取元素和组件

这是一个大大的H1

什么是路由

在 vue 中使用 vue-router

命名视图实现经典布局

watch属性的使用

使用watch监视路由地址的改变

computed计算属性的使用

watch、computed、methods之间的对比

nrm的安装使用

相关文件

Vue.js - Day5 - Webpack

在网页中会引用哪些常见的静态资源？

网页中引入的静态资源多了以后有什么问题？

如何解决上述两个问题

什么是webpack

如何完美实现上述的2种解决方案

webpack 安装的两种方式

初步使用webpack打包构建列表隔行变色案例

配置 dev-server 的第二种形式

使用help-webpack-plugin插件配置启动页面

使用webpack打包css文件

Vue之 `基本代码结构` 和`插值表达式`、`v-cloak`

Vue指令之`v-tex`和`v-html`

Vue指令之`v-bind`的三种用法

Vue指令之`v-on`和`跑马灯效果`

Vue指令之`v-on`的缩写和`事件修饰符`

Vue指令之`v-model`和`双向数据绑定`

在Vue中使用样式

Vue指令之`v-for`和`key`属性

Vue指令之`v-if`和`v-show`

Vue调试工具`vue-devtools`的安装步骤和使用

使用`this.$refs`来获取元素和组件

`watch`属性的使用

使用`watch`监视路由地址的改变

`computed`计算属性的使用

`watch`、`computed`、`methods`之间的对比

`nrm`的安装使用

使用`help-webpack-plugin`插件配置启动页面

使用饿了么的MintUI组件