（day68）Vue-CLI项目、页面跳转和传参、生命周期钩子

目录

• 一、Vue-CLI
  • （一）环境搭建
  • （二）项目的创建
  • （三）项目目录结构
  • （四）Vue组件（.vue文件）
  • （五）全局脚本文件main.js（项目入口）
  • （六）Vue请求生命周期
• 二、页面跳转和传参
  • （一）页面跳转
    • （1）标签跳转
    • （2）逻辑跳转
  • （二）路由配置与传参
    • （1）无参数的路由配置
    • （2）有参数的路由配置
• 三、生命周期钩子
  • （一）概念
  • （二）方法
• 四、JS原型
  • （一）原型（对象属性）
  • （二）原型链
  • （三）代码实现

一、Vue-CLI

（一）环境搭建

1. 安装node

   官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2. 换源安装cnpm

   npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装vue项目脚手架

   cnpm install -g @vue/cli

4. 清空缓存处理

   npm cache clean --force  # 第2、3步安装失败时，可以清空npm缓存，再重复执行失败的步骤

（二）项目的创建

1. 创建项目

   # 1. 命令行式创建,自定义方式创建项目（选取Babel、Router、Vuex插件）
   vue create 项目名
   
   # 2. 命令行键入图形化界面创建
   vue ui

2. 命令行启动/停止项目

   npm run serve / cltr+c  # 要提前进入项目根目录

3. 打包项目

   npm run build  # 要在项目根目录下进行打包操作

4. 下载依赖文件

   cnpm install # 当项目移植到其他电脑时,node_moodules需要重新构建,需要通过该指令根据package.json文件下载依赖文件,

（三）项目目录结构

• v-proj项目

  1. node_moodules：当前项目所有依赖文件，不可以移植到其他电脑。要重新配置
  2. public
     1. favicon.ico：页面标签图标
     2. index.html：当前项目的html页面
  3. src
     1. assets：静态资源img、css、js
     2. components：小组件
     3. views：页面组件
     4. App.vue：根组件
     5. main.js：全局脚本文件（项目的入口）
     6. router
        • index：路由脚本文件（配置路由url连接和页面组件的映射关系）
     7. store
        • index.js：仓库脚本文件（vuex插件的配置文件，数据仓库）
  4. package.json：存储项目依赖文件清单的json文件
  5. readme.md

• 端口配置文件：vue.config.js

  // 修改端口，没有可以自己新建，选做
  module.exports={
      devServer:{
          port:8888 // 端口号
    }
  }

（四）Vue组件（.vue文件）

1. template：有且只有一个根标签
2. export default {}：在script标签中将组件对象导出
3. scoped属性：style标签中添加scoped属性，代表该样式只在组件内部起作用（样式组件化）
4. router-view标签：存在于App.vue根组件文件中，页面组件的占位

<template>
    <div class="test">

    </div>
</template>

<script>
    export default {
        name:"Test"
    }
</script>

<style scoped>

</style>

（五）全局脚本文件main.js（项目入口）

1. import 别名 form '资源'
2. required：官方提倡使用required加载静态文件
3. @：代表src文件夹的绝对路径
4. .$mount('app')：挂载，和el成员挂载等价
5. render：当Vue实例创建时，系统自动触发渲染函数render，该函数的形参是一个函数，通过render渲染函数中调用传入App参数的形参函数，从而将App根组件渲染成DOM节点，该形参代表的是createElement

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false  // 定义用户引导功能的开启，需要先定义

// 配置全局样式：@就代表src文件夹的绝对路径，官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css')

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

改写

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

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

（六）Vue请求生命周期

1. 浏览器user请求
2. router插件映射views中的User.vue页面组件
3. User.vue页面组件渲染好components文件夹中的小组件（子组件）
4. 再把User.vue组件替换App.vue（根组件）中的<router-view />占位符

二、页面跳转和传参

（一）页面跳转

（1）标签跳转

1. router-link标签：完成路由跳转的标签，相当于a标签
2. to参数：指向要跳转的路由

<!-- 该标签完成路由跳转 -->
<router-link to="路由"></router-link>

（2）逻辑跳转

1. $router.push('路由')：向$router中追加一个路由，来完成路由的跳转
2. $router.go(NUM)：基于历史记录完成前进后退的跳转，NUM是整数为前进，NUM是负数为后退

（二）路由配置与传参

（1）无参数的路由配置

1. 正常配置

   // router/index.js路由配置文件中
   const routes = [
     {
       path: '/',
       name: 'home',
       component: Home
     },
   ];

2. 重定向配置

   // router/index.js路由配置文件中
   const routes = [
     {
       path: '/home',
       redirect:"/"
     },
   ];

（2）有参数的路由配置

1. 拼接式参数使用query

   // 1.页面跳转
   // (1) 标签跳转(router-link标签中)
   to="/user?pk=1"
   
   // (2) 逻辑跳转
   this.$router.push('/user?pk=1')
   
   // 2. 路由配置
   path:'/user'
   
   // 3.取值方式
   this.$router.query.pk

2. 有名分组式参数使用params

   // 1. 页面跳转
   // (1) 标签跳转(router-link标签中)
   to='/user/1'
   
   // (2) 逻辑跳转
   this.$router.push('/user/1')
   
   // 2. 路由配置
   path:'/user/:pk'
   
   // 3. 取值方式
   this.$router.params.pk

三、生命周期钩子

（一）概念

1. 组件创建到销毁中的某个时间节点会触发的方法
2. 这些方法都是vue组件实例的成员

（二）方法

1. beforeCreate(){}：该组件创建之前触发
2. created(){}：该组件创建成功时触发，此时接受后台数据，可以在该方法中对数据进行操作，重要方法
3. beforeMount(){}：该组件加载完成之前触发
4. mounted(){}：该组件加载完成触发，特别耗时的数据请求，重要方法
5. destroyed(){}：该组件销毁成功时触发

四、JS原型

（一）原型（对象属性）

1. 构造函数：通俗的一句话说，就是function声明的那个函数A
2. 原型对象： 在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中 , 原型对象中有一个属性constructor，这个属性指向的是这个构造函数
3. 在声明了一个函数后，这个构造函数（声明了的函数）中会有一个属性prototype，这个属性指向的就是这个构造函数对应的原型对象

（二）原型链

1. 实例对象a1与原型对象之间的连接，叫做原型链
2. JS在创建对象a1的时候，都有一个叫做_proto_的内置属性，用于指向创建它的函数对象的原型对象prototype

（三）代码实现

1. 构造函数A中有prototype属性，而a1是构造函数A创建出来的对象，他不存在prototype属性
2. 但a1有一个__proto__属性，stu调用这个属性可以直接访问到构造函数A的原型对象
3. 再通过原型对象中的constructor访问到构造函数A，从而访问到prototype属性

• prototype相当于给类添加了一个属性，通过这个类实例化出来的对象都可以访问到该属性
• 以此类推，在Vue实例中也可以通过这种特性可以给Vue-CLI中添加全局方法axios，从而添加axios插件

function A() {}

let a1 = new A();
let a2 = new A();

// 为A类添加原型 => 类似于类属性
A.prototype.num = 100;
console.log(a1.num); // 100

// ES6语法下类
class B {
    constructor(name) {
        this.name = name;
    }
}
let b1 = new B('Tom');
let b2 = new B('Ben');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);

// 推导
Vue.prototype.$ajax = axios;