Vue的项目搭建及请求生命周期

时间：2023-03-10 03:54:43
Vue的项目搭建及请求生命周期

[TOC]

Vue的项目搭建及请求生命周期

我们来了解一哈Vue-CLI项目的搭建以及其生命周期是怎样的.

Vue-CLI的项目搭建

环境搭建

首先,我们在安装vue的环境的时候采用的是node的环境中的NPM安装,NPM安装能够很好的和很多模块打包使用,且安装也非常方便.所以我们先安装node,去node的官网

http://nodejs.cn/download/

下载安装包之后安装完成即可,然后我们需要安装cnpm,这是一个比npm安装更快的工具,指令如下

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

然后我们就可以安装脚手架,也就是我们需要的Vue-CLI

cnpm install -g @vue/cli

如果以上两步安装有问题的话,我们可以清除掉已经安装的npm缓存,再重新执行以上两步,清缓存指令如下:

npm cache clean --force

项目创建

项目创建的流程借鉴于,链接：https://www.jianshu.com/p/c7df292915e7

当我们正确的完成了以上环境搭建之后,就可以开始创建我们的Vue项目啦.指令也非常简单.

在cmd窗口中,我们cd到我们想要创建项目的目录,然后用

vue create 项目名

就可以创建我们的项目啦,当然,下面简要说明会出现的几个选项

# 创建命令输入完成回车之后,有两个选项

default (babel, eslint) 	默认套餐，提供 babel 和 eslint 支持

Manually select features 	自己去选择需要的功能，提供更多的特性选择

# 如果选择第二项,会出现八个功能特性供我们选择,我们可以使用空格键选中,最后用Enter确认

TypeScript 					支持使用 TypeScript 书写源码。

Progressive Web App (PWA) 	Support PWA 支持。

Router 						支持 vue-router 。

Vuex 						支持 vuex 。

CSS Pre-processors 			支持 CSS 预处理器。

Linter / Formatter 			支持代码风格检查和格式化。

Unit Testing 				支持单元测试。

E2E Testing 				支持 E2E 测试。

# 上述选项确认之后,会出现

Use class-style component syntax?(Y/n)	意思是是否使用class风格的写法,推荐使用,选y

# 然后就是

Use Babel alongside TypeScript for auto-detected polyfills?,默认选Y就好

# 还有,这里是三选一,是选择项目里需要支持哪一种动态样式语言,这里有三个选项,我们选LESS

Pick a CSS pre-processor...

SCSS/SASS

LESS

Stylus

# 选择单元测试工具,选jest就好,现在最好用

Pick a unit testing solution:Jest

# 选择配置文件的位置,可以自己指定,或者是放在默认的package.json里面

Where do you prefer placing config for Babel ,PostCSS,ESLint,etc.?

In dedicated config files		# 手动指定位置

In package.json					# 默认位置

# 是否把这些配置项保存起来,以便于下次用,怎么选都可以

Save this as a preset for future projects?

# 选择默认镜像,在国内的话,用淘宝就好,输入Y就行

Your connection to the default npm registery seems to be slow,

Use https://registry.npm.taobao.org for faster installation?

当我们完成以上配置之后,就可以运行该项目了,指令

num run serve	# 运行项目,ctrl+c可以停止

当然我们还是推荐用pycharm来运行和调试该项目,方便排错,以及项目的打包和上线.

pycharm运行Vue项目

  1. 首先我们用pycharm来open我们创建的这个vue的项目文件夹,然后在上方选择 Add Configuration

  2. 左上角有个加号,点开之后选择下面的npm

  3. 这时候如果前面npm的安装没有问题的话,node的路径和npm的路径是已经配置好的,我们只需要修改自己的项目名称,以及Scripts框里面输入serve就可以了

配置完以上三步,就可以直接运行该项目了.

Vue项目的大体结构

Vue项目的目录大致如下

├── v-proj

|	├── 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等配置文件

下面我们着重介绍几个比较重要的文件

Vue组件

组件大多存在于components和views中,以.vue结尾,当然还有唯一根组件App.vue.

其结构通常包括以下三项:

# 1) template：	有且只有一个根标签

# 2) script：	必须将组件对象导出 export default {}

# 3) style: 	style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化),如果不加scoped属性,该style会在整个项目中起作用
<!--常见的.vue文件-->

<template>

    <div class="test">

        <router-link to=''></router-link>	//这里的意义非常简单,其实就是a标签,用以跳转到另外一个网页,不过在Vue里面我们需要用router-link,因为这个框架他不认a标签,只认自己的

    </div>

</template>

<script>

    export default {

        name: "Test"

    }

</script>

<style scoped>

</style>

<!--App.vue文件-->

<template>

    <div id="app">

        <!--提供一个视图组件占位符，占位符被哪个views下的视图组件替换，浏览器就显示哪个页面组件-->

        <router-view/>

    </div>

</template>

main.js

main.js文件是Vue整个项目的入口文件,即项目启动时候最先执行的就是该文件,里面主要用来声明根组件和加载各种环境.

import Vue from 'vue'			//加载vue环境

import App from './App.vue'		//加载根组件,也是项目的唯一根组件

import router from './router'	//加载路由环境

import store from './store'		//加载数据仓库环境

Vue.config.productionTip = false

new Vue({

    router,		//路由环境

    store,		//数据库环境

    render: h => h(App)		//这里其实就是返回一个函数,箭头函数的用法在下面说明

}).$mount('#app')			//挂载点,挂载app,等同于el:'#app'
箭头函数和函数原型

箭头函数是es6中新增的功能,其作用就是帮助我们更加简便的定义和调用一个函数,其实用法非常简单

// 箭头函数函数体只有返回值，没有多余代码，还可以简写

let f5 = () => 12345;

let r5 = f5();

console.log(r5);

# 这里结果就是12345

// 箭头函数如果有参数，() 也可以省略

a = 10;

let f6 = n => n * 10;

let r6 = f6(a);

console.log(r6);

# 这里结果是100

函数原型的概念比较类似于我们之前所了解的绑定给类的方法,其实现的语句也非常相似,最终目的还是为了实现从函数原型复用出来的函数可以有自己的值,也可以取到原型的值

function Fn() {}

let f1 = new Fn();

let f2 = new Fn();

Fn.prototype.num = 888;	# 我们用原函数.prototype.num来给函数原型赋值,这样从该原型函数new出阿里的对象都可以共用该原型的变量

f1.num = 100;

console.log(f1.num);	# 这个结果是100

console.log(f2.num);	# 这个结果是888

Vue的请求生命周期

接下来我们就来研究一下Vue的请求的生命周期,看起来Vue项目非常的庞大,文件夹很多,莫名其妙的文件也很多,但实际上其逻辑并不麻烦,当我们的项目启动之后,浏览器过来的请求是这么走的

  1. 浏览器携带执行的url链接来访问Vue项目,先是通过main.js,知道所绑定的路由在哪
  2. 然后传给路由,也就是router组件,该组件会根据请求的路径匹配组件,用匹配到的组件来替换掉App.vue(也就是根组件)中的占位符,占位符通常为<router-view/>

举个栗子:

请求路径/user=>要渲染的组件 User.vue=>替换App.vue中的<router-view>

两个小用法

router和route

//我们常用this.$router来完成路由的跳转,常用的方法包括go和push,push是指定跳到某个路由,go是相对于当前路由来说,可以前进或后退几个页面,用数字和正负号来表示,即

this.$router.go(-1)		//代表后退一个页面

this.$router.go(2)		//代表前进两个页面

this.$router.push(`/book`)		//代表直接跳转到某个路由

//而route相当于一个字典,用于存放路由跳转时候的各种信息,我们可以从route里面取到很多我们想要的东西,比如主键值,以此来完成路由的传参

let pk = this.$route.params.pk

相关文章