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但是頁面不進行整體的刷新。