vue.js 3 移動應(yīng)用開發(fā)實戰(zhàn) 閱讀筆記+勘誤+配套源碼
vue.js 3 移動應(yīng)用開發(fā)實戰(zhàn) 閱讀筆記與勘誤
這本書需要有編程基礎(chǔ)的同學(xué)閱讀。如果從零開始學(xué)前端的話，個人不建議，書本內(nèi)容跳躍性很大，甚至個人覺得有點凌亂。PS：閱讀此書一定要配合書本的源碼，因為書中的代碼部分只是展示了部分，有些關(guān)鍵部分并沒有給出來，如果沒有配套的源碼，很可能你運行不出來書中效果，或者根本就不能運行。
書中源碼運行圖
書中的的Webpack，VueX，移動端單擊事件，在最后應(yīng)用示例中，沒有實際使用。
總結(jié)的個人筆記
1 vue2和vue3實例化方式不同：
vue2
import?Vue?from?'Vue'
import?APP?from?'./APP.vue'
const?vm?=?new?Vue({
????render:h?=>?h(APP)
})
vm.$mount('#app')
vue3
import?{createApp}?from?'vue'
import?APP?from?'./APP.vue'
const?app?=?createApp(APP)
app.mount('#app')
不使用腳手架vue-cli安裝vue
<html>
<head>
????<title>TO?DO?SPA</title>
????<script?src='https://unpkg.com/vue@3.0.5/dist/vue.global.js'></script>
</head>
<body>
????<div?id="app">
????????<h3>SPA?TODO?Web?system</h3>
????</div>
????<script>
????????const?myapp?=?{
????????}
????????const?App?=?Vue.createApp(myapp)
????????App.mount("#app");
????</script>
</body>
</html>
啟動方式
直接調(diào)用httpserver，不需要調(diào)用npm。
比如 httpserver -p 8080
這種方式可以啟動任何http靜態(tài)頁面
使用腳手架
npm?init?vue@latest
如何使用別人的項目？
比如別人的項目為demo
??cd?demo
??npm?install
??npm?run?dev
vue-cli創(chuàng)建的項目，無法使用httpserver 這種方式啟動，需要使用npm run dev
或者npm run ?build 之后生成的頁面才可以使用httpserver訪問，生成的靜態(tài)文件在public文件夾里面
備注：httpserver 是一個http服務(wù)器。需要提前npm安裝， npm install httpserver
如果npm的node_module文件夾過大，可以修改 npm 緩存路徑
npm?config?set?cache?"D:\system\nodejs\node_cache"
如果npm run dev命令報錯，
可以打開package.json 中的指令：
????"scripts":?{????????????????????????????????????????????????
???????"serve":?"vue-cli-service?serve",?????????????????????????
???????"build":?"vue-cli-service?build"??
???????}
那么啟動命令就是 npm run serve，而不是npm run dev
目前如果使用腳手架
npm?init?vue@latest
構(gòu)建的項目，是使用vite來管理項目的。
這幾天學(xué)習(xí)下來，個人覺著這個前端的工具鏈實在太過混亂，vue2和vue3的不兼容，然后vue3里面的構(gòu)建方式也是有不同工具，比如vue-cli有新的，有舊的，也有webpack，也有vite，每個都對對方不兼容，然后如果只剩有更新，那對舊版的兼容也是不夠友好。這里尤其要注意的。
使用官方的最新的vite構(gòu)建好了vue項目。
目錄結(jié)構(gòu)
Demo
??index.html
??|--node_module
??|--public
??|--src
????|--main.js
????|--App.vue
??package.json
??vite.config.js
我們編寫的代碼工作在src文件夾下。
當(dāng)然一些配置參數(shù)需要在vite.config.js文件下的。
main.js 主要是導(dǎo)入一些庫，內(nèi)容如下：
import?{?createApp?}?from?'vue'
import?App?from?'./Ref.vue'
createApp(App).mount('#app')
然后主要的頁面邏輯在App.vue 里面
<script?setup>
</script>
<template>
</template>
<style?scoped>
</style>
上面是基本的模板，包含3個模塊，script標簽里面是類似JavaScript的vue代碼，style標簽是css的樣式，template標簽是html模塊。
比如下面的一個App.vue 文件：
<script>
export?default?{
name:"App",
??data(){
????return?{students:[]}
??},
??methods:{
????student_info(){
??????this.$axios.get('http://127.0.0.1:3000/student/').then(res=>{console.log(res.data);
??????this.students?=?res.data;
??????console.log(res.config);
??????});
????}
??}
}
</script>
<template>
??<div>
??<button?@click="student_info">student?info</button>
??<table>
????<thead>
??????<tr>
????????<th>id</th>
????????<th>name</th>
????????<th>age</th>
????????<th>score</th>
??????</tr>
????</thead>
????<tbody>
??????<tr?v-for="item?in?students"?:key="item.id">
????????<th>{{item.id}}</th>
????????<th>{{item.name}}</th>
????????<th>{{item.age}}</th>
????????<th>{{item.score}}</th>
??????</tr>
????</tbody>
??</table>
??</div>
</template>
<style?lange="less">
#app{
background-color:yellow;
text-align:center;
color:#2c350;
margin-top:60px;
}
</style>
npm run dev 后得到的效果： (一個基于vue的實時小爬蟲工具，這個代碼是自己寫的，不是書本上的)
如果需要獲取本書的配套源碼，可以公眾號：30天嘗試新事情，后臺留言：vuejs3移動應(yīng)用開發(fā)實戰(zhàn) 獲取下載鏈接。
