Vue的项目搭建及请求生命周期
[TOC]
Vue的项目搭建及请求生命周期
我们来了解一哈Vue-CLI项目的搭建以及其生命周期是怎样的.
Vue-CLI的项目搭建
环境搭建
首先,我们在安装vue的环境的时候采用的是node的环境中的NPM安装,NPM安装能够很好的和很多模块打包使用,且安装也非常方便.所以我们先安装node,去node的官网
下载安装包之后安装完成即可,然后我们需要安装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项目
首先我们用pycharm来open我们创建的这个vue的项目文件夹,然后在上方选择 Add Configuration
左上角有个加号,点开之后选择下面的npm
这时候如果前面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项目非常的庞大,文件夹很多,莫名其妙的文件也很多,但实际上其逻辑并不麻烦,当我们的项目启动之后,浏览器过来的请求是这么走的
- 浏览器携带执行的url链接来访问Vue项目,先是通过
main.js
,知道所绑定的路由在哪 - 然后传给路由,也就是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
Vue的项目搭建及请求生命周期的更多相关文章
- 详解ASP.NET MVC的请求生命周期
本文的目的旨在详细描述asp.net mvc请求从开始到结束的每一个过程. 我希望能理解在浏览器输入url并敲击回车来请求一个asp.net mvc网站的页面之后发生的任何事情. 为什么需要关心这些? ...
- django请求生命周期,FBV和CBV,ORM拾遗,Git
一.django 请求生命周期 流程图: 1. 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者post, ...
- python 全栈开发,Day84(django请求生命周期,FBV和CBV,ORM拾遗,Git)
一.django 请求生命周期 流程图: 1. 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者post, ...
- 我所理解的 Laravel 请求 生命周期
转载自:https://laravel-china.org/topics/3343/my-understanding-of-the-laravel-request-life-cycle 当你使用一个工 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Django框架深入了解_01(Django请求生命周期、开发模式、cbv源码分析、restful规范、跨域、drf的安装及源码初识)
一.Django请求生命周期: 前端发出请求到后端,通过Django处理.响应返回给前端相关结果的过程 先进入实现了wsgi协议的web服务器--->进入django中间件--->路由f分 ...
- APIview的请求生命周期源码分析
目录 APIview的请求生命周期源码分析 请求模块 解析模块 全局配置解析器 局部配置解析器 响应模块 异常处理模块 重写异常处理函数 渲染模块 APIview的请求生命周期源码分析 Django项 ...
- DRF 请求生命周期以及各模块解析
目录 rest_framework框架的封装特点 原生Django与DRF比较 APIView 的请求生命周期 请求模块(request) 解析模块(parser_classes) 异常模块(exce ...
- request请求生命周期
request请求生命周期 一.request请求分析 1.1. request数据请求 # views.py from rest_framework.views import APIView fro ...
随机推荐
- (转)XMPP协议原理
本文介绍XMPP协议原理及相关信息. XMPP协议简介 XMPP(Extensible Messageing and Presence Protocol:可扩展消息与存在协议)是目前主流的四种IM ...
- linux find相关 (持续更新中)
按名字查找 find . -name *.txt find . -name test* # . 指的是当前路径, 查找全局的话把. 换成/ 查找并删除多个文件 find -type f -name & ...
- phpMailer 手册
phpMailer5.0.0属性: 英文地址:http://phpmailer.worxware.com/index.php?pg=properties 属性 (v5.0.0) 类型 默认 描述 $P ...
- makefile.new(7117) : error U1087: cannot have : and :: dependents for same target
makefile.new(7117) : fatal error U1087: cannot have : and :: dependents for same target(2012-05-21 2 ...
- RabbitMQ 交换器、持久化
一. 交换器 RabbitMQ交换器(Exchange)分为四种 direct fanout topic headers direct 默认的交换器类型,消息的RoutingKey与队列的bindi ...
- Openstack 中的消息总线 & AMQP
目录 目录 消息总线 消息总线的原理 AMQP 消息总线 Openstack 采用了面向服务的开发模式(有别于面向对象和面向过程),需要我们去考虑各个服务之间和各项目之间是如何传递消息的. Restf ...
- 剑指offer——49礼物的最大价值
题目描述 在一个m*n的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于0).你可以从棋盘的左上角开始拿格子里的礼物,并每次向左或者向下移动一格,知道到达棋盘的右下角.给定一个棋盘及其上面 ...
- NIO 源码分析(02-2) BIO 源码分析 Socket
目录 一.BIO 最简使用姿势 二.connect 方法 2.1 Socket.connect 方法 2.2 AbstractPlainSocketImpl.connect 方法 2.3 DualSt ...
- jenkins+jhipster集成
准备工作: 安装Jenkins 新建一个Jhipster项目 开始集成: 新建一个Jenkins构建项目 只配置源代码 构建,成功,稍微有点信心了 配置执行构建脚本 ./mvnw package -P ...
- [已解决]报错JSONDecodeError
报错: 解决: