一、Vue-CLI
二、页面跳转和传参
- （一）页面跳转
  - （1）标签跳转
  - （2）逻辑跳转
- （二）路由配置与传参
  - （1）无参数的路由配置
  - （2）有参数的路由配置
三、生命周期钩子
- （一）概念
- （二）方法
四、JS原型

一、Vue-CLI

（一）环境搭建

安装node

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

换源安装cnpm

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

安装vue项目脚手架
```
cnpm install -g @vue/cli
```

清空缓存处理

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

（二）项目的创建

创建项目

# 1. 命令行式创建,自定义方式创建项目（选取Babel、Router、Vuex插件）
vue create 项目名

# 2. 命令行键入图形化界面创建
vue ui

命令行启动/停止项目

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

打包项目

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

下载依赖文件

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文件）

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

<template>
    <div class="test">

    </div>
</template>

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

<style scoped>

</style>

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

import 别名 form '资源'
required：官方提倡使用required加载静态文件
@：代表src文件夹的绝对路径
.$mount('app')：挂载，和el成员挂载等价
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请求生命周期

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

二、页面跳转和传参

（一）页面跳转

（1）标签跳转

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

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

（2）逻辑跳转

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

（二）路由配置与传参

（1）无参数的路由配置

正常配置

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

重定向配置

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

（2）有参数的路由配置

拼接式参数使用query

// 1.页面跳转
// (1) 标签跳转(router-link标签中)
to="/user?pk=1"

// (2) 逻辑跳转
this.$router.push('/user?pk=1')

// 2. 路由配置
path:'/user'

// 3.取值方式
this.$router.query.pk

有名分组式参数使用params

// 1. 页面跳转
// (1) 标签跳转(router-link标签中)
to='/user/1'

// (2) 逻辑跳转
this.$router.push('/user/1')

// 2. 路由配置
path:'/user/:pk'

// 3. 取值方式
this.$router.params.pk

三、生命周期钩子

（一）概念

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

（二）方法

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

四、JS原型

（一）原型（对象属性）

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

（二）原型链

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

（三）代码实现

构造函数A中有prototype属性，而a1是构造函数A创建出来的对象，他不存在prototype属性
但a1有一个__proto__属性，stu调用这个属性可以直接访问到构造函数A的原型对象
再通过原型对象中的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;

秒客网

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

一、Vue-CLI

（一）环境搭建

（二）项目的创建

（三）项目目录结构

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

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

（六）Vue请求生命周期

二、页面跳转和传参

（一）页面跳转

（1）标签跳转

（2）逻辑跳转

（二）路由配置与传参

（1）无参数的路由配置

（2）有参数的路由配置

三、生命周期钩子

（一）概念

（二）方法

四、JS原型

（一）原型（对象属性）

（二）原型链

（三）代码实现