Vue CLI
CLI是什么意思？
- CLI是Command-Line Interface，翻译为命令行界面，俗称脚手架
- Vue CLI是一个官方发布的vue.js项目脚手架
- 使用脚手架可以快速搭建Vue开发环境以及对应的Webpack配置
Runtime + Compiler
new Vue({
el: ‘#app‘,
template: ‘<App></App>‘,
components: {
App
}
})
main.js，采用的是我们之前的写法。
Runtime-only（以后一直是这种）
new Vue({
el: ‘#app‘,
render: h => h(App),
})
main.js，新的函数render，新的写法。
render: h => h(App)
//箭头函数的原型
render: function(h) {
return h(App);
}
import Vue from ‘vue‘
import App from ‘./App.vue‘
render: function(createElement) {
//传入一个组件对象
return createElement(‘App‘);
}
Vue程序的执行过程：
template模板代码 ---> ast（抽象语法树） ---> render() ---> 虚拟DOM ---> UI
Vue CLI 的使用
安装Vue脚手架
npm install -g @vue/cli
默认安装的最新版，@vue/cli@4.3.1。
C:\Users\shawn>vue --version
@vue/cli 4.3.1
vue-cli 3与2版本有很大的区别
- vue-cli 3是基于webpack4打造，vue-cli 2还是基于webpack3
- vue-cli 3的设计原则是"0配置"，移除build和config文件夹
- 移除了static文件夹，增加了public文件夹，并且index.html移动到public中
- vue-cli 3提供了
vue ui命令，提供了可视化配置
脚手架创建项目
vue-create
vue create vuecli
你会被提示选取一个 preset（预设配置）。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。
我们这里回车选择手动。
（通过上下键选择选项，空格选中或不选）
如果选择保存，那么这个配置会保存在C:\Users\shawn\.vuerc文件中。
{
"useTaobaoRegistry": false,
"presets": {
"lwj": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {}
}
}
},
"latestVersion": "4.4.6",
"lastChecked": 1595209462544
}
启动项目
npm run serve
图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
C:\Users\shawn>vue ui
?? Starting GUI...
?? Ready on http://localhost:8000
图形化界面不仅可以创建项目，同样可以管理依赖（导入）。
前端路由
URL的hash和HTML5的history
URL的hash
- url的hash也就是锚点(#)，本质上是改变windows.location的href属性
- 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新
location.hash
""
location.hash = "bar";
"bar"
location.href
"http://localhost:8080/#bar"
location.hash = "/foo";
"/foo"
location.href
"http://localhost:8080/#/foo"
HTML5的history：页面同样不会刷新，但是url中是没有#的。
history.pushState() //相当于入栈一个url
history.back() //弹出栈顶的url
histroy.replaceState({},‘‘,‘home‘); //没有历史记录，不能后退
history.go(-1) //回退 等价于 history.back()
history.go(1) //前进 等价于 history.forward()
history.pushState({}, ‘‘, ‘/home‘);
undefined
location.href
"http://localhost:8080/home"
history.back();
undefined
location.href
"http://localhost:8080/"
后端渲染：
jsp：Java Server Page
后端路由：
后端处理url和页面之间的映射关系。
前后端分离：后端只负责提供数据，不负责任何界面的内容。
前端渲染：
浏览器中显示的网页大部分内容都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。
前端路由：
单页面引用，前端路由的核心：改变url但是页面不进行整体的刷新。