Vue项目的创建、路由、及生命周期钩子

目录

• 一、Vue项目搭建
  • 1、环境搭建
  • 2、项目的创建
  • 3、pycharm配置并启动vue项目
  • 4、vue项目目录结构分析
  • 5、Vue根据配置重新构建依赖
• 二、Vue项目创建时发生了什么
• 三、项目初始化
  • 1、app.vue总路由配置
  • 2、全局css样式配置
• 四、Vue的路由控制
  • 1. 路由跳转
    • 1.1 标签跳转
    • 1.2 逻辑跳转
  • 2. 路由重定向
  • 3. 路由传参
• 五、Vue组件的生命周期钩子
  • 1. 什么是生命周期钩子
  • 2. 生命周期钩子有哪些
    • 2.1 beforeCreate
    • 2.2 created(重要)
    • 2.3 beforeMount
    • 2.4 mounted(重要)
    • 2.5 destroyed

一、Vue项目搭建

1、环境搭建

• 安装node

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

• 安装cnpm、更换淘宝镜像源

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

• 安装脚手架

cnpm install -g @vue/cli

• 清空缓存处理

npm cache clean --force

1.1 查看npm/cnpm的下载文件位置和缓存文件信息

npm与cnpm操作命令完全一致

cmd中查看缓存位置

npm config get cache

查看下载文件路径

npm config get prefix

1.2 更改npm/cnpm的下载文件位置和缓存文件信息

更改缓存位置

npm config set cache "D:\Program Files\nodejs\node_cache"

更改下载文件路径

npm config set prefix "D:\Program Files\nodejs\node_global"

2、项目的创建

• 创建项目

1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化
选择自定义方式创建项目
选择插件

babel（选中）    将es6解析为es5的语法
TypeScript      支持使用 TypeScript 书写源码
PWA             前端优化-rogressive Web App Support支持
router（选中）   支持 vue-router
vuex（选中）     仓库，组件间传参，全局单例，为移动端做辅助，页面刷新，会重新加载仓库，而手机app无法刷新。
css             预编译器，less或sass 支持对css进行逻辑编程
Linter          支持代码风格检查和格式化

历史记录选项：选大写的
保存project：选n不保存

• 启动/停止项目

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

• 打包项目

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

3、pycharm配置并启动vue项目

1. 用pycharm打开vue项目
2. 添加配置npm启动文件，记得选中serve服务

4、vue项目目录结构分析

├── 项目名称
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	├── router
|	|	|	└── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|	|	└── store
|	|	|	└── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|	├── README.md
└	└── package.json等配置文件

5、Vue根据配置重新构建依赖

当你想一致一个项目的时候，由于node_modules文件夹中的依赖环境文件有时候无法复制，你就可以只复制项目中的public文件夹，src文件夹和package.json文件就可以了。

然后可以通过package.json文件中记载的环境需求重新下载环境。然后就可以将项目运行了。

• 如何重新下载依赖环境

在cmd中进入项目目录，或者在pycharm中打开项目进入terminal；
然后执行以下代码：

>>>:cnpm install

就可以了。
系统会自动从项目文件夹中的package.json文件中识别依赖进行下载。

然而有时候项目中还会有其他的一些依赖是后续安装的，不在package.json文件中，那这个时候项目还是无法运行，不过你在启动时，项目会报错，会提醒你哪些依赖没有安装，这个时候只需要根据项目提示进行后续的手动安装依赖就可以了。

二、Vue项目创建时发生了什么

1. 启动项目，加载主脚本文件main.js，它是整个项目的启动入口。
   • 加载main.js中导入的模块；
   • 创建main.js中的根组件，挂载index.html页面中的app标签；
   • 将已经导入的模块注册到根组件中(router、store)；
   • 加载自定义的第三方环境与自己配置的环境(后期项目会不断添加)。
   • 通过回调render渲染函数将App.vue组件渲染进index.html初始页面中(根组件一创建完成就会回调render函数，render函数所对应的是vue环境自带的read_vue_function函数，这个函数可以将App.vue组件读成二进制流替换index.html初始页面中的挂载点，至此完成渲染)；
2. router被加载，就会解析router文件夹下的index.js脚本文件，完成{路由-组件}的映射关系，根组件就可以进行路由访问。
3. 在views文件夹中新建 视图组件.vue文件，在路由(router的index.js)中配置，设置路由跳转。
4. 此时App.vue作为根路由，是唯一用来替换index.html初始页面标签的组件。因此，只有App.vue中有的组件，才会在html页面中渲染出来。而这时，所有的组件都已经在根路由中配置完成。
5. 只需要在浏览器输入地址，根组件就会通过路由将地址对应的组件独读出，加载到App.vue中的<router-view/>标签中，然后App.vue会加载进HTML页面上，就可以在浏览器中显示了。
6. 也就是说，App.vue中有多少个<router-view/>标签，就会加载多少次组件。

三、项目初始化

1、app.vue总路由配置

只需留下五行代码：

<template>
    <div id="app">
        <router-view />
    </div>
</template>

2、全局css样式配置

需要在main.js配置文件中加载全局css样式，只要加一句话，在任意位置：

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

require('./assets/css/global.css');

然后就可以在global.css文件中配置全局样式了。

四、Vue的路由控制

1. 路由跳转

1.1 标签跳转

通过<router-link to=""></router-link>标签完成跳转路由，to属性值为想要跳转的页面路由：

<router-link to="/home">主页</router-link>

1.2 逻辑跳转

有时候可能不会用router-link标签跳转，比如想点击图片跳转，这时候就需要用到逻辑跳转，通过点击事件跳转页面。

可以通过this.$router.push('/home')方法，跳转到路由为/home的组件(页面)：

<template>
	<img src="@/assets/img/logo.svg" alt="" @click="goHome">
</template>

<script>
    export default {
        name: "Nav",
        methods: {
            goHome() {
                if (this.$route.path !== '/') {
                    // this.$router.push('/');
                    this.$router.push({
                        name: 'home'
                    });  // 通过name跳转
                }
            }
        }
    }
</script>

this.$router和this.$route的区别：

• this.$router:

  • 根组件中的router对象，控制路由，记录所有路径数据，包含历史记录
  • 方法：
    • this.$router.push('/path')：用来跳转直接路径
    • this.$router.go(2)：用来跳转历史记录，正为前进，负为后退，数字为步数

• this.$route:

  当前路由对象，控制路由数据，包含路径path、query和params数据，可以用来利用路由传参

  • 方法：
    • this.$route.query/this.$route.param：获取路由传过来的参数

2. 路由重定向

在index.js中通过redirect重定向页面，用来开放用户有可能会访问的页面。

不用多个路由对应相同组件的方法是为了防止有些方法需要判断当前页面的path，这就有可能会导致不同路由明明使用了相同的组件，却有部分功能无法使用。

所以需要使用路由的重定向。

// index.js
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
]

3. 路由传参

1. 路径任意位置直接携带values参数，通过路由有名分组匹配

   如何传参：

   <!--第一种路由传参-->
   <!--<router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>-->
   
   <router-link :to="{
                     name: 'course-detail',
                     query: {pk: course.id}
                     }">{{ course.title }}
   </router-link>
   
   <!--第二种路由传参-->
   <!--<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>-->
   

   如何匹配路由：

   // 路由文件 index.js
   
   const routes = [
       {
           path: '/course/:pk/detail',
           name: 'course-detail',
           component: CourseDetail
       },
   ];
   

   如何获取参数：通过params

   data() {
       return {
           pk: 0
       }
   },
   created() {
       // 获取路由传递的参数：课程的id
       this.pk = this.$route.params.pk;
   }
   

2. 拼接路径，在路径尾部通过?携带key=values形式的参数

   如何传参：

   // 点击跳转事件，直接在路径中传参
   goDetail(pk) {
       // this.$router.push(`/course/detail?pk=${pk}`);
       this.$router.push({
           name: 'course-detail',
           query: {pk: pk}
       });
   }
   

   如何匹配路由：

   const routes = [
       {
           path: '/course/detail',
           name: 'course-detail',
           component: CourseDetail
       }
   ];
   

   如何获取参数：通过query

   data() {
       return {
           pk: 0
       }
   },
   created() {
       // 获取路由传递的参数：课程的id
       this.pk = this.$route.query.pk;
   }
   

五、Vue组件的生命周期钩子

1. 什么是生命周期钩子

本质是一个函数，会在某个时间节点自动调用。

1、一个组件从创建到销毁的众多时间节点上回调的方法；

2、这些方法都是vue组件实例的成员，不包含于methods属性中；

3、生命周期钩子的作用就是满足在不同时间节点需要完成的事。

2. 生命周期钩子有哪些

2.1 beforeCreate

在组件创建之前调用。

2.2 created(重要)

在组件创建成功后调用。

此时可以向后台请求数据，加载到组件的数据变量中。

2.3 beforeMount

在组件加载之前调用。

2.4 mounted(重要)

在组件加载完成后调用。

特别耗时的数据请求，可以延后到组件初步加载成功后，再慢慢请求。

先给客户渲染一个组件框架，在慢慢渲染数据，以防客户以为服务器崩了而不是卡了。

2.5 destroyed

在组件销毁后调用。