正文

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

IP云
IP云V管理员/4 阅读
07/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

[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 = falsenew 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