Vue-CLI脚手架

目录

一、介绍和安装

安装

创建项目

runtime-compiler和runtime-only的区别

CLI2与CLI3的区别

CLI3配置文件的查看和修改

箭头函数的使用和this指向

二、Vue-Router

认识

1、URL的hash和HTML5的history

2、vue-router的基本使用

 

一、介绍和安装

CLI：Command-Line-Interface（命令行界面），俗称脚手架。

Vue CLI是一个官方发布的vue.js项目脚手架。

使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

API文档：https://cli.vuejs.org/zh/guide/installation.html

---

使用前提：Node，所以需要提前安装node.js（8.9以上版本）

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

高版本拉取（兼容）2.x模板

npm install -g @vue/cli-init

 

---

创建项目

CLI2创建项目：

vue init webpack xxxxxx

CLI2创建项目

CLI3创建项目

vue create xxxxx

这里我们选择手动

空格进行选中

一般选择第一个

 

 

 

 

---

runtime-compiler和runtime-only的区别

• runtime-only 比 runtime-compiler 轻 6kb
• runtime-only 性能更高
• runtime-only 其实只能识别render函数，不能识别template，.vue文件中的也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template（main.js中）

1、runtime + compiler 中 Vue 的运行过程

1. 首先将vue中的模板进行解析解析成abstract syntax tree （ast）抽象语法树
2. 将抽象语法树在编译成render函数
3. 将render函数再翻译成virtual dom 虚拟dom
4. 将虚拟dom显示在浏览器上

2、性能更高的原因

runtime-only比runtime-compiler更快，因为它省略了vue内部过程中的第一个过程，

如果是runtime-compiler那么main.js中就会出现template从而需要过程一导致增加了一个过程，

同时增加了大小而 runtime-only 模式中不是没有写 template ，只是把 template 放在了.vue 的文件中了并有一个叫 vue-template-compiler的在开发依赖时将.vue文件中的 template 解析成 render 函数了因为是开发依赖，不在最后生产中，所以最后生产出来的运行的代码没有template

 

---

CLI2与CLI3的区别

• cli3是基于webpack4打造，cli2是基于webpack3
• cli3的设计原则是“0配置”，移除了配置文件根目录下的build和config等目录
• cli3提供了vue ui命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并将index移动到public文件夹中

 

---

CLI3配置文件的查看和修改

启动配置服务器：

vue ui

 

箭头函数的使用和this指向

箭头函数：也是定义函数的一种方式；

和Lambda表达式类似

//1、定义函数
const a = function () {

}

//对象字面量中定义函数
const obj = {
    b() {

    }
}

//es6中的箭头函数
const c = (参数列表) =>{
    
}

箭头函数的this的指向：

箭头函数的this，是这样查找的：向外层作用域中一层层查找this，直到有this的定义。也就是从定义层开始，最近的一层不是箭头函数的this指向

 

---

二、Vue-Router

认识

网页发展阶段：

1. 后端渲染阶段：服务器通过路由处理请求，直接生产对应的渲染好的HTML页面，返回给客户端进行显示；
2. 前后端分离阶段：通过Ajax，后端只负责提供数据，不负责任何阶段的内容（这个也就是前端渲染阶段）；
3. 前端路由阶段：SPA页面（simple page web application），在前后端分离的基础上，加上一层前端路由，也就是由前端来维护一套路由规则；

前端渲染后端渲染、前端路由后端路由

后端渲染：

• jsp（java server page）->html+css；

• 渲染好的页面不需要单独加载任何的js和css，可以直接交给浏览器展示，有利于SEO优化；

• 开发、编写和维护困难；

前端渲染：

• html+css+js->js代码由浏览器执行；

• 前后端责任清晰，后端专注数据处理、数据库交互，前端专注于交互和可视化；

• 当移动端出现后，可以直接使用后端提供的API接口；

• 目前很多网站是采用前后端分离；

前端路由：

• 前端路由管理URL和页面的映射关系；

• SPA单页面复用，整个网站只有一个html页面，一次请求将index.html+css+js一次性发送给浏览器，由前端路由进行管理；

•  

后端路由：

后端处理URL和映射之间的关系。

 

1、URL的hash和HTML5的history

修改url而不重新向服务器请求页面

location.hash

 

history.pushState({data},title,url)

 

history.back() 等价于history.go（-1）

history.forward（）等价于history.go（1）

history.replaceState（{data}，title，url）替换栈顶（相当于无痕浏览）

 

2、vue-router的基本使用