Vue的项目搭建及请求生命周期
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
