廢話
時間飛快，vue3 陸陸續續也有一年時間的了，現在各種檔案，五花八門的，官方的，也都基本齊全了，下面就來從0到1，實戰一個vue3.0的后臺管理系統，后面我會寫所有的創建搭建步驟，至于里面的api就不詳細說明（會給出具體檔案，自行去看），這里直接搭建，給出具體代碼
vue3.0問題看法和個人理解
1、要不要升級專案到3.0
個人覺得有必要，新專案建議直接使用3.0，既然都出3.0了，肯定相對2.0有它的過人之處，不需要解釋，（ps：專案過大，架構師不想升級可以不升級，我就是劃水運動員）
2、vue3.0的設計目標，及相對2.0的優化
- 目標籠統來說，更小，更快，支持TypeScript，提高維護性，開放更多底層功能
- 更小，移出了一些不常用的api，移入tree-shaking,可以將無用模塊“剪輯”，僅打包需要的，使打包的整體體積變小了
- 更快，優化了diff演算法，類似于react，更精準的去實作區域dom更新，編譯優化，資料劫持優化
- 更好，在兼顧vue2的options API的同時還推出了composition API，大大增加了代碼的邏輯組織和代碼復用能力
正文開始
1、自己倉庫里新建個專案，clone到本地，可以隨時隨地開發同步代碼，預防丟失，沒有的建議自己去注冊一個，本人使用的是gitlab，gitee,推薦gitlab
2、安裝cli腳手架，初始化專案（也可以使用vite）
1、npm install -g @vue/cli
2、vue create gdshop_admin
安裝成功可以查看版本
切換到vue3,選項切換不了，加winpty vue.cmd解決
winpty vue.cmd create gdshop_admin
或者選擇第三個manually，手動勾選安裝
創建完成之后放到你的倉庫檔案夾里
目前cli版本是4.5.11顯然不是我想要的最新的， 可以升級5.0超前版本
cnpm install -g @vue/cli@next
npm run serve 啟動專案
3、安裝路由vue-router4.0 (3.0不支持vue3)
vue ui 打開可視化操作面板安裝（不用手動創建檔案夾和檔案）
或者
npm install vue-router@4 （安裝4.0）
要手動創建檔案夾 檔案
4、vuex(3.0不支持vue3)
同上，ui面板安裝
或者
npm install vuex@next --save (安裝4.0)
手動創建檔案夾檔案
5、完成，目錄結構如下
洗掉沒用的helloword組件，圖片啥的
home.vue 修改如下，嘗試vue3 composition API寫法
<template>
<div>
{{count}}
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
return {
count
}
},
}
</script>
<style lang='less' scoped>
</style>
運行結果如下，到此完成一個vue3.0專案
下一篇（Composition Api優缺點，和api使用）
第二篇
推薦檔案
vue cli
vue3.0做的那些事
常見的問題及解答
vscode 代碼片段附上提高開發效率
{
"Print to console": {
"prefix": "sc",
"body": [
"<template>",
" <div>",
" {{count}}",
" </div>",
"</template>",
"",
"<script>",
"import { ref } from 'vue'",
"export default {",
" setup () {",
" const count = ref(0)",
" return {",
" count",
" }",
" },",
"}",
"</script>",
"<style lang='less' scoped>",
"",
"</style>"
],
"description": "Log output to console"
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/264132.html
標籤：其他
上一篇：阿里實習面經(2.25兩輪)