谷粒商城笔记+踩坑（2）——分布式组件、前端基础，nacos+feign+gateway+ES6+vue脚手架

  导航：

谷粒商城笔记+踩坑汇总篇_谷粒商城笔记踩坑6_vincewm的博客-CSDN博客

目录

4、分布式组件

4.0. 简介

4.0.1、SpringCloud 对比SpringCloud Alibaba

4.0.2、项目技术搭配方案选择

4.0.3、common模块引入SpringCloud Alibaba依赖管理

4.1 nacos下载、启动、配置

4.1.1、nacos下载安装

4.1.2、配置nacos注册中心

4.1​​​​​​​.3、启动gulimall-xxx, 查看服务注册中心

4.2. openfegin远程调用，案例演示

4.2.0、需求，member调用coupon

4.2.1、common模块引入openfegin依赖

4.2.2、 coupon的controller编写测试方法

4.2.3、member的引导类注解@EnableFeignClients

4.2.4、member模块编写coupon的客户端

4.2.5、member模块注入coupon的客户端 

4.3. nacos用作配置中心

4.3.1、依赖 nacos-config,bootstrap

4.3.2、coupons模块创建bootstrap.yml

4.3.3、nacos服务端添加配置文件

4.3.4、coupon的controller中编写测试代码

4.3.5、启动测试

4.3.6、配置热更新，controller注解@RefreshScope动态刷新

4.3.7、命名空间

4.3.8、根据服务创建命名空间，各命名空间根据环境分组

4.3.9、按类型抽取配置，加载多配置集 

4.4. 网关gateway

4.4.0、简介 

4.4.1、gulimall父工程下新建gulimall-gateway模块作为网关

4.4.2、演示，网关路由到百度

5、前端基础（回顾，与项目无关）

5.1. ES6基础

5.1.1、let & const

5.1.2、解构表达式

5.1.3、函数优化

5.1.4、对象优化

5.1.5、map和reduce

5.1.6、promise

5.1.7、模块化

5.2. VUE基础

5.2.1、VUE安装

5.2.2、v-model, v-on

5.2.3、v-text、v-html、v-ref

5.2.4、单向绑定v-bind:

5.2.5、双向绑定v-model

5.2.6、v-on事件

5.2.7、v-for遍历

5.2.8、v-if和v-show

5.2.9、v-else和v-else-if

5.2.10、计算属性和监听器

5.2.11、过滤器filter

5.2.12、组件化

5.2.13、生命周期和钩子函数

5.3. vue脚手架进行模块化开发

5.3.1、全局安装webpack

5.3.2、全局安装vue脚手架

5.3.3、初始化vue项目

5.3.4、vue项目目录结构

5.3.5、分析主页展示逻辑

5.3.6、新建Hello组件，负责/hello路径

5.3.7、快速生成组件模板

5.4. ElementUI

---

4、分布式组件

本节主要用于回顾，主要就4.4.1网关模块时真实操作一下就行，其他都是测试。

4.0. 简介

4.0.1、SpringCloud 对比SpringCloud Alibaba

springcloud对比SpringCloud Alibaba： 

企业需求：

4.0.2、项目技术搭配方案选择

4.0.3、common模块引入SpringCloud Alibaba依赖管理

spring-cloud-alibaba/README-zh.md at 2021.x · alibaba/spring-cloud-alibaba · GitHub

guimall-common模块的pom： 

    
        
            
                com.alibaba.cloud
                spring-cloud-alibaba-dependencies
                2.1.0.RELEASE
                pom
                import
            
        
    

4.1 nacos下载、启动、配置

4.1.1、nacos下载安装

• 下载地址：https://github.com/alibaba/nacos/releases

​

启动： 

• 解压后启动nacos：

 在bin目录下cmd：

startup.cmd -m standalone

• 命令运行成功后直接访问http://localhost:8848/nacos，默认账号密码都是nacos

http://localhost:8848/nacos/index.html

​

4.1​​​​​​​.2、配置nacos注册中心

•  common引入依赖

          
              com.alibaba.cloud
              spring-cloud-starter-alibaba-nacos-discovery
          
  

• 在所有子模块gulimall-xxx里yml里写spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848（指定nacos的地址）。再指定spring.applicatin.name告诉注册到nacos中以什么命名

  spring:
    application:
  #注意修改服务名
      name: gulimall-coupon
    cloud:
      nacos:
        discovery:
          server-addr: 127.0.0.1:8848
  

• 在所有子模块gulimall-xxx引导类上使用 @EnableDiscoveryClient 注解开启Feign服务注册与发现功能

• @EnableDiscoveryClient
  @SpringBootApplication
  public class GulimallCouponApplication {
      public static void main(String[] args) {
          SpringApplication.run(GulimallCouponApplication.class, args);
      }
  }
  

4.1​​​​​​​.3、启动gulimall-xxx, 查看服务注册中心

​

4.2. openfegin远程调用，案例演示

声明式远程调用

feign是一个声明式的HTTP客户端，他的目的就是让远程调用更加简单。给远程服务发的是HTTP请求。

会员服务想要远程调用优惠券服务，只需要给会员服务里引入openfeign依赖，他就有了远程调用其他服务的能力。

4.2.0、需求，member调用coupon

会员模块通过feign远程调用优惠券模块controller的方法。

4.2.1、common模块引入openfegin依赖

    org.springframework.cloud
    spring-cloud-starter-openfeign

4.2.2、 coupon的controller编写测试方法

 在gulimall-coupon中的CouponController中添加测试方法

    @RequestMapping("/member/list")
    public R membercoupons(){    //全系统的所有返回都返回R
        // 假数据，模拟去数据库查用户对于的优惠券
        CouponEntity couponEntity = new CouponEntity();
        couponEntity.setCouponName("满100-10");//优惠券的名字
        return R.ok().put("coupons",Arrays.asList(couponEntity));
    }

R 结果类：

public class R extends HashMap {
	private static final long serialVersionUID = 1L;
	
	public R() {
		put("code", 0);
		put("msg", "success");
	}
	
	public static R error() {
		return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知异常，请联系管理员");
	}
	
	public static R error(String msg) {
		return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.put("code", code);
		r.put("msg", msg);
		return r;
	}

	public static R ok(String msg) {
		R r = new R();
		r.put("msg", msg);
		return r;
	}
	
	public static R ok(Map map) {
		R r = new R();
		r.putAll(map);
		return r;
	}
	
	public static R ok() {
		return new R();
	}

	public R put(String key, Object value) {
		super.put(key, value);
		return this;
	}
}

4.2.3、member的引导类注解@EnableFeignClients

在member的主启动类上加注解@EnableFeignClients启用feign客户端

@EnableDiscoveryClient
@SpringBootApplication
@EnableFeignClients(basePackages="com.vince.gulimall.member.feign")//扫描接口方法注解
public class GulimallMemberApplication {
    public static void main(String[] args) {
        SpringApplication.run(GulimallMemberApplication.class, args);
    }
}

 @EnableDiscoveryClient是服务的注册发现。

4.2.4、member模块编写coupon的客户端

在com.xmh.gulimall.member.feign中新建接口CouponFeignService（或CouponClient）

@FeignClient("gulimall-coupon")//告诉spring cloud这个接口是一个远程客户端，要调用coupon服务(nacos中找到)
public interface CouponFeignService{

    // 远程服务的url
    @RequestMapping("/coupon/coupon/member/list")//注意写全优惠券类上还有映射
    public R membercoupons();//得到一个R对象


}

4.2.5、member模块注入coupon的客户端 

在member的MemberController写一个测试

    @Autowired
    private CouponFeignService couponFeignService; //注入刚才的CouponFeignService接口

    @RequestMapping("/coupons")
    public R coupons(){
        MemberEntity memberEntity = new MemberEntity();
        memberEntity.setNickname("会员昵称张三");
        R membercoupons = couponFeignService.membercoupons();

        return R.ok().put("member", memberEntity).put("coupons", membercoupons.get("coupons"));
    }

启动gulimall-me mber，gulimall-coupon项目。访问http://localhost:8000/member/member/coupons测试

​

测试成功！

4.3. nacos用作配置中心

Nacos一方面可以将配置集中管理，另一方面可以在配置变更时，及时通知微服务，实现配置的热更新。 

4.3.1、依赖 nacos-config,bootstrap

common中添加依赖

     com.alibaba.cloud
     spring-cloud-starter-alibaba-nacos-config
 

        
            org.springframework.cloud
            spring-cloud-starter-bootstrap
            3.1.4
        

4.3.2、coupons模块创建bootstrap.yml

在coupons模块中创建/src/main/resources/bootstrap.yml，优先级别application.properties高

问题：nacos配置要先于yml，但如果尚未读取yml，又如何得知nacos地址并获取nacos配置呢？

答案：因此spring引入了一种新的配置文件：bootstrap.yaml文件，优先级高于application.yml，会在application.yml之前被读取。

# 改名字，对应nacos里的配置文件名
spring:
  application:
    name: gulimall-coupon
  cloud:
    nacos:
      config:
        server-addr: 127.0.0.1:8848
        file-extension: yaml # 指定配置文件为yaml格式

4.3.3、nacos服务端添加配置文件

浏览器去nacos里的配置列表，点击＋号，data ID：gulimall-coupon.yaml，配置

​ 

​

​ 

这里分组名称默认DEFAULT_GROUP，我们看服务列表也可以看到所有服务默认都在这个分组：

​

4.3.4、coupon的controller中编写测试代码

    @Value("${coupon.user.name}")
    private String name;
    
    @Value("${coupon.user.age}")
    private int age;

    @RequestMapping("/nacos")
    public R nacos(){
        return R.ok().put("name", name).put("age", age);
    }

4.3.5、启动测试

访问http://localhost:7000/coupon/coupon/nacos测试

​

4.3.6、配置热更新，controller注解@RefreshScope动态刷新

​

4.3.7、命名空间

​ 

命名空间用于将开发测试生产三种环境、或者各微服务之间配置隔离。默认命名空间是public：

​

不同命名空间设置不同配置： 

​ 

指定命名空间： 

 ​

4.3.8、根据服务创建命名空间，各命名空间根据环境分组

​

​

​ 

4.3.9、按类型抽取配置，加载多配置集 

​ 

开发时为了方便可以将配置文件写在项目中，等发布后再抽取到nacos中。 

将datasource相关配置抽取成一个配置，在coupon命名空间下，分组名为dev（根据环境分组） ：

​

使用：

​ 

或者bootstrap.yml 

spring:
  application:
    name: gulimall-coupon
  cloud:
    nacos:
      config:
        server-addr: 127.0.0.1:8848
        file-extension: yaml
        namespace: xxxx
        extension-configs:
          - data-id: datasource.yml
            group: dev
            refresh: true

4.4. 网关gateway

4.4.0、简介 

网关的核心功能特性：

• 请求路由
• 权限控制
• 限流

动态上下线：发送请求需要知道商品服务的地址，如果商品服务器有123服务器，1号掉线后，还得改，所以需要网关动态地管理，他能从注册中心中实时地感知某个服务上线还是下线。【先通过网关，网关路由到服务提供者】

拦截：请求也要加上询问权限，看用户有没有权限访问这个请求，也需要网关。

所以我们使用spring cloud的gateway组件做网关功能。

网关是请求流量的入口，常用功能包括路由转发，权限校验，限流控制等。

https://spring.io/projects/spring-cloud-gateway

参考手册：https://cloud.spring.io/spring-cloud-gateway/2.2.x/reference/html/

三大核心概念：

• Route路由: The basic building block of the gateway. It is defined by an ID, a destination URI, a collection of predicates断言, and a collection of filters. A route is matched if the aggregate predicate is true.发一个请求给网关，网关要将请求路由到指定的服务。路由有id，目的地uri，断言的集合，匹配了断言就能到达指定位置，
• Predicate断言: This is a Java 8 Function Predicate. The input type is a Spring Framework ServerWebExchange. This lets you match on anything from the HTTP request, such as headers or parameters.就是java里的断言函数，匹配请求里的任何信息，包括请求头等。根据请求头路由哪个服务
• Filter过滤: These are instances of Spring Framework GatewayFilter that have been constructed with a specific factory. Here, you can modify requests and responses before or after sending the downstream request.过滤器请求和响应都可以被修改。
  客户端发请求给服务端。中间有网关。先交给映射器，如果能处理就交给handler处理，然后交给一系列filer，然后给指定的服务，再返回回来给客户端。

客户端发请求给服务端。中间有网关。先交给映射器，如果能处理就交给handler处理，然后交给一系列filer，然后给指定的服务，再返回回来给客户端。

​

4.4.1、gulimall父工程下新建gulimall-gateway模块作为网关

新建springboot项目，勾选gateway：

​

​ 

pom导入common模块 

    
        
            com.xmh.gulimall
            gulimall-common
            1.0.0-SNAPSHOT
        
        
            org.springframework.cloud
            spring-cloud-starter-gateway
        
    

在nacos上新建gateway命名空间

​ 

在gateway命名空间下新建配置gulimall-gateway.yml： 

​

配置application.yml

server:
  port: 88
spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
  application:
    name: gulimall-gateway

配置bootstrap.yml

spring:
  application:
    name: gulimall-gateway
  cloud:
    nacos:
      config:
        server-addr: 127.0.0.1:8848
        file-extension: yaml
        namespace: 改成你自己命名空间id
        #namespace: d717d0ee-7a07-4125-9881-3ef57d696ad3

引导类注解@EnableDiscoveryClient，并排除数据源配置：

引入mybatisplus依赖​​​​​​​后不配置数据源报错：

 因为引入了common模块的依赖，common里有mybatisplus依赖。引入了mybatisplus依赖就必须配置数据源项目才能运行，而网关模块没必要配置数据源，所以这里要排除。

@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class}) //不用数据源，过滤掉数据源配置
@EnableDiscoveryClient
public class GulimallGatewayApplication {
    public static void main(String[] args) {
        SpringApplication.run(GulimallGatewayApplication.class, args);
    }
}

4.4.2、演示，网关路由到百度

需求：访问http://localhost:88?url=baidu 切换到百度， http://localhost:88?url=qq 切换到qq

在网关的application.yml中配置路由

server:
  port: 88
spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    gateway:
      routes:
        - id: baidu_route              # 每一个路由的名字，唯一即可
          uri: https://www.baidu.com   # 匹配后提供服务的路由地址
          predicates:                 # 断言规则
            - Query=url,baidu         #如果url参数等于baidu 符合断言，转到uri

        - id: qq_route                  # 每一个路由的名字，唯一即可
          uri: https://www.qq.com   # 匹配后提供服务的路由地址
          predicates: # 断言规则
            - Query=url,qq         #如果url参数等于baidu 符合断言，转到uri

  application:
    name: gulimall-gateway

断言工厂包括： 

名称	说明	示例
After	是某个时间点后的请求	- After=2037-01-20T17:42:47.789-07:00[America/Denver]
Before	是某个时间点之前的请求	- Before=2031-04-13T15:14:47.433+08:00[Asia/Shanghai]
Between	是某两个时间点之前的请求	- Between=2037-01-20T17:42:47.789-07:00[America/Denver], 2037-01-21T17:42:47.789-07:00[America/Denver]
Cookie	请求必须包含某些cookie	- Cookie=chocolate, ch.p
Header	请求必须包含某些header	- Header=X-Request-Id, \d+
Host	请求必须是访问某个host（域名）	- Host=.somehost.org,.anotherhost.org
Method	请求方式必须是指定方式	- Method=GET,POST
Path	请求路径必须符合指定规则	- Path=/red/{segment},/blue/**
Query	请求参数必须包含指定参数	- Query=name, Jack或者- Query=name
RemoteAddr	请求者的ip必须是指定范围	- RemoteAddr=192.168.1.1/24
Weight	权重处理

​​​​​​​具体网关内容参考： SpringCloud基础2——nacos配置、Feign、Gateway_nacos feign配置_vincewm的博客-CSDN博客

启动网关，访问http://localhost:88?url=baidu测试，成功！

​

5、前端基础（回顾，与项目无关）

前端基础了解即可，初级工程师应该提升深度而非广度，技术停留在能基本看懂代码的基础上即可，建议选择性过一遍即可，哪个知识点没学过就过哪里。

【黑马Java笔记】JavaWeb基础4——HTML,JavaScript&CSS_vincewm的博客-CSDN博客_java添加输入框

【黑马Java笔记】JavaWeb基础10——VUE&Element&整合Javaweb的商品管理系统_vincewm的博客-CSDN博客_javaweb商品管理系统

5.1. ES6基础

​ 

​ 

5.1.1、let & const

vscode快捷键：！+ 回车生成html模板

​ 

         

• let声明后不能作用于{}外，var可以
• let只能声明一次（let a=1;let a=2;报错），var可以声明多次
• var会变量提升（使用在定义之前，console.log(x);var x = 10;  // undefined），let必须先定义再使用
• const一旦初始化后，不能改变

打开Chrome控制台可以查看报错信息。 

5.1.2、解构表达式

• 数组解构（批量赋值）let arr = [1,2,3]; let [a,b,c] = arr
• 对象解构const{name:abc, age, language} = person;console.log(abc); 其中name:abc代表把name改名为abc
• 字符串扩展str.startsWith();str.endsWith();str.includes();str.includes()
• 字符串模板，``符号，支持一个字符串定义为多行

​

​ 

• 占位符功能 ${}，字符串插入变量

5.1.3、函数优化

• 支持函数形参默认值function add(a, b = 1){}
• 支持不定参数数量function fun(...values){}，此时能传多个参数，values.length获取数量。
• 支持箭头函数var print = obj => console.log(obj);有点像Lambda表达式
• 支持箭头函数+解构对象var hello2 = ({name}) => console.log("hello," +name); hello2(person);这里参数{name}是解构出person对象的name属性

5.1.4、对象优化

• 可以获取map的键值对Object.keys(personMap)、Object.values(personMap)、Object.entries(personMap)
• Object.assgn(target,source1,source2) 合并对象source1，source2到target
• 支持对象名声明简写：如果属性名和属性值的变量名相同可以省略
• let someone = {...person}取出person对象所有的属性拷贝到当前对象

5.1.5、map和reduce

• arr.map()接收一个函数，将arr中的所有元素用接收到的函数处理后放入新的数组
• arr.reduce()为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，

5.1.6、promise

• 优化异步操作。封装ajax
• 把Ajax封装到Promise中，赋值给let p
• 在Ajax中成功使用resolve(data)，失败使用reject(err)
• p.then().catch()

5.1.7、模块化

• export用于规定模块的对外接口,export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象
• import用于导入其他模块提供的功能

// user.js

var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}
// 导出变量和函数
export {name,age,add}

---------------------------------------------------------------
// hello.js
    
// 导出后可以重命名
export default {
    sum(a, b) {
        return a + b;
    }
}


--------------------------------------------------------------
// main.js

import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

5.2. VUE基础

MVVM思想

M：model 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

官方文档：https://cn.vuejs.org/v2/guide/

5.2.1、VUE安装

给当前项目安装vue

#npm初始化项目，生成package.json
npm init -y
#安装vue
npm install [email protected]

npm init -y：在文件夹下生成默认的package.json文件，代表此文件夹是npm管理的项目。

​

引入vue：

示例：

    
    
    
    


    

        
原始字符串: {{ message }}
    
    
    

5.2.2、v-model, v-on

• new VUE
• v-model 双向绑定
• v-on 绑定事件

    
    
    
    


    

        
        
        
        点赞
        
        
        取消
        
        
        
 {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}
        
    

    
    

    

5.2.3、v-text、v-html、v-ref

    
    
    
    


   
    

        {{msg}}  {{1+1}}  {{hello()}} 前面的内容如果网速慢的话会先显示括号，然后才替换成数据。
        v-html 和v-text能解决这个问题
        

        
        用v-html取内容
        
        
        

        原样显示
          
    
   
    

    

    

5.2.5、双向绑定v-model

    
    
    
    



    
    


        精通的语言：如果是多选框，那么会把每个value值赋值给vue数据
             java

             PHP

             Python

        选中了 {{language.join(",")}}
    
    
    

    

5.2.6、v-on事件

• 事件监听可以使用 v-on 指令
• v-on:事件类型="方法" ，可以简写成@事件类型="方法"
• Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
• Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
  • .stop - 阻止冒泡
  • .prevent - 阻止默认事件
  • .capture - 阻止捕获
  • .self - 只监听触发该元素的事件
  • .once - 只触发一次
  • .left - 左键事件
  • .right - 右键事件
  • .middle - 中间滚轮事

    
    
    
    



    

                
        
        点赞
        
        取消
        
        
有{{num}}个赞


        
        

            大div
            

                小div 

                去百度
            
        



        
        


        提示：

    
    

    

5.2.7、v-for遍历

• 可以遍历 数组[] 字典{} 。对于字典
• 遍历的时候都加上:key来区分不同数据，提高vue渲染效率

    
    
    
    




    

        

            
            

                
               当前索引：{{index}} ==> {{user.name}}  ==>   
                  {{user.gender}} ==>{{user.age}} 

                
                
                对象信息：
                {{k}}=={{v}}=={{i}}；
                
            

            
        

        

            

        
    
    
    

5.2.8、v-if和v-show

• 在vue实例的data指定一个bool变量，然后v-show赋值即可。show里的字符串也可以比较
• if是根据表达式的真假，切换元素的显示和隐藏（操作dom元素）
• 区别：show的标签F12一直都在，if的标签会移除，
• if操作dom树对性能消耗大

    
    
    
    



    
    

        点我呀
        
        
if=看到我....
        
        
show=看到我
    

    
        
    

5.2.9、v-else和v-else-if

    
    
    
    



    

        点我呀
        {{random}}

        

            看到我啦? >= 0.75
        
        

            看到我啦? >= 0.5
        
        

            看到我啦? >= 0.2
        
        

            看到我啦? < 0.2
        

    


    
        
    

5.2.10、计算属性和监听器

计算属性computed：属性不是具体值，而是通过一个函数计算出来的，随时变化

    

        
原始字符串: {{ message }}
        
计算后反转字符串: {{ reversedMessage }}
    
    
    

监听watch:可以让我们监控一个值的变化，从而做出相应的反应。

以下实例通过使用 watch 实现计数器：

    
    
    
    



    

        
        

            
西游记； 价格：{{xyjPrice}}，数量： 
            
水浒传； 价格：{{shzPrice}}，数量： 
            
总价：{{totalPrice}}
            {{msg}}
        
    
    

    

5.2.11、过滤器filter

过滤器filter：定义filter组件后，管道符“|”后面跟具体过滤器{{user.gender | gFilter}}

    
    
    
    



    
    

        

            

                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            
        
    
    

    

5.2.12、组件化

• 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
• 但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
• 在vue里，所有的vue实例都是组件
• 组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
• 不同的是组件不会与页面的元素绑定（所以不写el），否则就无法复用了，因此没有el属性。
• 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
• data必须是一个函数，不再是一个对象。
• 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了

    
    
    




    

        我被点击了 {{count}} 次

        每个对象都是独立统计的
        
        
        
        
        

        
    
    


    

5.2.13、生命周期和钩子函数

每个vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板、渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数（监听函）。每当vue实列处于不同的生命周期时，对应的函数就会被触发调用。

​

    
    
    
    



    

        {{num}}
        赞！
        
{{name}}，有{{num}}个人点赞
    

    
    
    

5.3. vue脚手架进行模块化开发

5.3.1、全局安装webpack

在任意目录下cmd，注意命令尾部“-g” 是全局安装的意思。

npm install webpack -g

默认安装到目录：

5.3.2、全局安装vue脚手架

npm install -g @vue/[email protected]

注意：脚手架版本和node版本要匹配，我node版本10.16.3，匹配脚手架4.0.3 

5.3.3、初始化vue项目

在工程文件夹下cmd，输入以下命令初始化vue项目。建议工程名与文件夹名一致

vue init webpack 想要起的工程名
#vue init webpack vue-demo

​

standalone单例是选择运行+编译：

ESLint是检查代码规范的，这里不选否。 

test是否使用单元测试，这里也是否

如果一直卡在downloading template，配置淘宝镜像

npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver

初始化成功，运行项目

cd vue-demo

npm run dev

 为什么运行命令是npm run dev?

在项目目录下，我们可以看到一个名为package.json的文件，该文件是对项目、模块包的描述，在package.json文件中，有一个scripts的字段:

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

修改后运行命令就是npm run serve：

// 运行npm run serve的scripts字段
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

启动成功

访问默认端口http://localhost:8080/#/。

​

关闭cmd窗口，在vscode打开项目，重新启动： 

npm run dev

5.3.4、vue项目目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等
index.html	首页入口文件。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

5.3.5、分析主页展示逻辑

/config/index.js配置端口：

/index.html主页

其中只有一个div，内容由src/main.js主程序决定。

src/main.js主程序，里面有vue实例挂载id为“app”元素：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
//创建vue实例挂载“app”元素
new Vue({
  el: '#app',
  router, //采用router路由，导入位置./router。这里是简写，完整是router:router
  components: { App },//绑定App组件。完整是App:App
  template: ''    //元素渲染模板
})

主组件/src/App.vue，显示页面并引入路由规则

• 首先显示一张图片，图片路径为"./assets/logo.png

• 其中的是根据url要决定访问的vue,在main.js中提及了使用的是./router规则

配置路由规则/src/router/index.js

routes表示路由规则

当访问/时， 显示组件Helloword

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
//访问跟路径时，路由到helloworld模块
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

/src/components/HelloWorld.vue组件

5.3.6、新建Hello组件，负责/hello路径

/src/components创建hello.vue组件，编写组件三标签：

编写路由文件，修改/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/hello' //导入自定义的组件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //新增路由
    {
      path: '/hello',
      name: "Hello",
      component: Hello
    }
  ]
})

此时访问http://localhost:8080/#/hello

添加App.vue点击跳转，修改/src/App.vue的template标签：

运行测试效果

5.3.7、快速生成组件模板

1、文件->首选项->用户代码 新建全局代码片段

2、把下面代码粘贴进去

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "",
            "",
            "",
            "",
            ""
        ],
        "description": "生成vue模板"
    }
    
}

3、在创建组件时直接输入vue点击回车就可生成模板

5.4. ElementUI

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

1、安装

npm install element-ui

2、在main.js下引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

然后就可以使用elementui之中的组件。

3、快速搭建后台管理系统的页面

elementui手册中找到Container 布局容器，找到代码直接复制到App.vue组件

启动测试：

​

4、实现当点击用户列表，显示用户。点击hello组件，显示hello。

​

把中的数据列表换成路由视图

​

新建MyTable组件，用来显示用户数据

添加路由规则

import MyTable from '@/components/MyTable'


	{
      path: '/mytable',
      name: "mytable",
      components: MyTable
    }

修改App.vue

​

启动测试