🍅 作者简介：CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪
🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师
🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步
目录
一、什么是VueCLI
1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。
2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。
3、CLI是什么意思？
4、脚手架长什么样？
5、脚手架依赖于node.js和webpack
二、安装Vue CLI脚手架
三、runtime-compiler和runtime-only的区别
1、runtime-compiler加载过程
2、runtime-only加载过程：（性能更高，代码更少）
3、小结
4、代码实例
5、npm run build执行过程
6、npm run dev执行过程
四、认识Vue CLI3
1、vue-cli 3 与 vue-cli 2 版本的区别？
2、通过脚手架3构建项目
五、箭头函数
1、定义函数的三种方式
2、箭头函数参数和返回值
3、什么时候使用箭头函数
4、箭头函数与this
六、前端路由vue-router
1、维基百科
2、路由的机制
3、后端渲染
4、后端路由阶段
5、前后端分离
6、单页面富应用阶段
7、SPA页面
8、前端路由
七、改变URL，但是页面不进行整体的刷新
1、URL的hash
2、HTML5的history
一、什么是VueCLI
1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。
2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。
- 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作，那么无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
3、CLI是什么意思？
- CLI是Commond-Line Interface，翻译为命令行界面，俗称脚手架。
- VueCLI是一个官方发布vue.js项目脚手架。
- 使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。
4、脚手架长什么样？
5、脚手架依赖于node.js和webpack
二、安装Vue CLI脚手架
//默认安装脚手架3
npm install -g @vue/cli
//安装脚手架2
npm install -g @vue/cli-init
//脚手架2创建项目
vue init webpack my-project
//脚手架3创建项目
vue create my-project三、runtime-compiler和runtime-only的区别
1、runtime-compiler加载过程
template -> ast -> render -> vdom -> UI
2、runtime-only加载过程：（性能更高，代码更少）
render -> vdom -> UI
3、小结
如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler；
如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only；
4、代码实例
main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
// const cpn = {
// template: '<div>{{message}}</div>',
// data() {
// return {
// message: '我是组件message'
// }
// }
// }
new Vue({
el: '#app',
render: function (createElement) {
// 1.普通用法: createElement('标签', {标签的属性}, [''])
// return createElement('h2',
// {class: 'box'},
// ['Hello World', createElement('button', ['按钮'])])
// 2.传入组件对象:
return createElement(App)
}
})
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>runtimecompiler</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
5、npm run build执行过程
6、npm run dev执行过程
四、认识Vue CLI3
1、vue-cli 3 与 vue-cli 2 版本的区别？
- vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
- vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
- vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
2、通过脚手架3构建项目
vue create my-project
运行项目
npm run serve
注意：
之前学习的时候main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})通过 Vue CLI3创建的项目main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
两种写法没区别。
el多了一个判断，el被解析为$mount。
五、箭头函数
1、定义函数的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 箭头函数: 也是一种定义函数的方式
// 1.定义函数的方式: function
const aaa = function () {
}
// 2.对象字面量中定义函数
const obj = {
bbb() {
}
}
// 3.ES6中的箭头函数
// const ccc = (参数列表) => {
//
// }
const ccc = () => {
}
</script>
</body>
</html>2、箭头函数参数和返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1.参数问题:
// 1.1.放入两个参数
const sum = (num1, num2) => {
return num1 + num2
}
// 1.2.放入一个参数
const power = num => {
return num * num
}
// 2.函数中
// 2.1.函数代码块中有多行代码时
const test = () => {
// 1.打印Hello World
console.log('Hello World');
// 2.打印Hello Vuejs
console.log('Hello Vuejs');
}
// 2.2.函数代码块中只有一行代码
// const mul = (num1, num2) => {
// return num1 + num2
// }
const mul = (num1, num2) => num1 * num2
console.log(mul(20, 30));
// const demo = () => {
// console.log('Hello Demo');
// }
const demo = () => console.log('Hello Demo')
console.log(demo());
</script>
</body>
</html>3、什么时候使用箭头函数
什么时候使用箭头
setTimeout(function () {
console.log("我是csdn哪吒");
}, 1000)
setTimeout(() => {
console.log("我是csdn哪吒");
}, 1000)4、箭头函数与this
// 问题: 箭头函数中的this是如何查找的了?
// 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
const obj = {
aaa() {
setTimeout(function () {
console.log(this); // window
})
setTimeout(() => {
console.log(this); // obj对象
})
}
}
obj.aaa()六、前端路由vue-router
1、维基百科
路由就是通过互联的网络把信息从源地址传输到目的地址的活动。
2、路由的机制
路由包括路由和转发。
路由器 -> 公网IP -> 映射表 -> 内网IP
映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]
3、后端渲染
JSP：java server page
后端渲染 == html + css + java
java代码的作用是从数据库中读取数据，然后将他们动态的放在页面中。
后端渲染的意思就是，前端请求后端，页面的数据在后端已经渲染好了，然后再返回前端，内容包括HTML+css，当然是包含数据的HTML。
后端路由：后端处理URL和页面之间的映射关系。
4、后端路由阶段
早期的网站开发整个HTML页面是由服务器来渲染的。
服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。
但是, 一个网站, 这么多页面服务器如何处理呢?
- 一个页面有自己对应的网址, 也就是URL。
- URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理。
- Controller进行各种处理, 最终生成HTML或者数据, 返回给前端。
- 这就完成了一个IO操作。
上面的这种操作, 就是后端路由：
- 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿。
- 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化。
后端路由的缺点：
- 一种情况是整个页面的模块由后端人员来编写和维护的。
- 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码。
- 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情。
5、前后端分离
后端只负责提供数据，不负责其它任何阶段。
浏览器中显示的网页中的大部分内容，都是由前端写的JS代码在浏览器中执行，最终渲染出来的网页。
- 随着Ajax的出现, 有了前后端分离的开发模式。
- 后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中。
- 这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上。
- 并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可。
- 目前很多的网站依然采用这种模式开发。
6、单页面富应用阶段
- 其实SPA最主要的特点就是前后端分离的基础上加上了一层前端路由；
- 也就是前端来维护一套路由规则
7、SPA页面
SPA：单页富应用
整个网页只有一个HTML网页。
8、前端路由
URL和前端页面的映射关系。
-----> vue router
前端路由的核心是什么呢？
改变URL，但是页面不进行整体的刷新。
七、改变URL，但是页面不进行整体的刷新
1、URL的hash
URL的hash也就是锚点，本质上是改变window.location的href属性。
我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。
2、HTML5的history
history.pushState({},'','home')history.pushState相当于栈的操作，先进后出，弹栈和入栈的操作。
history.pushState入栈；
history.back()出栈；
history.go(-1) 相当于 history.back()；
history.forward 相当于history.go(1)；
history.replaceState()：不能返回；
上一篇：Vue基础知识总结 9：vue webpack打包原理
下一篇：Vue基础知识总结 11：前端路由vue-router
关注公众号，备注1024，获取Java学习路线思维导图、加入万粉计划交流群
相关文章
