《Vue3.x+TypeScript實踐指南》已出版

　　　轉眼回長沙快2年了，圖書本在去年就已經完稿，因為疫情，一直耽擱了，直到這個月才出版！疫情之下，眾生皆苦！感覺每天都是吃飯、睡覺、上班、做核酸！

　　圖書介紹

　　為了緊跟技術潮流，該書聚焦于當下火的Vue3和TypeScript及其相關技術，這些知識是面試Vue方向前端崗位時必須掌握的內容，該書站在初學者的視角，將理論和實踐相結合，通過循序漸進、由淺入深的方式來一一講解Vue3的技術體系，讓讀者在學習的程序中不斷提升前端開發水平，閱讀該書僅需要有CSS、HTML、JS基礎，即使你是一個Vue初學者，閱讀該書也不會有任何困難，書中提供了豐富的示例來幫助讀者將理論知識運用于實踐，讓讀者學習起來不會感到枯燥乏味，相信該書能讓讀者在短時間內快速掌握TypeScript和Vue3的相關知識，并能夠將所學知識運用到實際應用當中去，
　　如果你是Vue初學者，建議你按照章節順序從頭到尾閱讀，如果你已經有了一定的基礎，可以挑選自己感興趣的章節進行閱讀，
　　《Vue3.x TypeScript實踐指南》適合vue3初學者及所有Web開發從業人員，也適合作為高等院校和培訓學校計算機專業課程的教學參考書，

　　本書分為10章，第1～2章是講解TypeScript基礎和常用語法，第3章是對Vue3的基礎知識點進行介紹，第4章是對Vue3中新增的Composition API進行詳細的介紹，第5章是介紹Vue3中新增的組件和API，第6章是介紹vue-router和vuex的相關知識，第7章是介紹Vue3的常用UI框架，第8章是對Webpack5進行介紹，第9章是通過一個大屏展示的實戰專案來將書中的內容應用到實踐中，第10章是講解Vue前端崗位的面試求職，而我們學習技術的最終目的就是為了就業，

　　其它圖書

　　本書提供PPT課件！

　　購買地址

　　　　京東

　　　　當當

　　　　天貓

           有需要的讀者可以加我微信(jiekzou)購買，打5折，數量有限，先到先得，比在線商城更加優惠哦！

　　圖書目錄

簡介

前言

目錄

第 1 章

? TypeScript基礎 ?

1.1 初識 TypeScript

1.1.1 TypeScript的介紹

1.1.2 TypeScript的特點

1.2 安裝 TypeScript

1.2.1 安裝node.js

1.2.2 npm

1.2.3 npm install --save 、--save-dev 、-D、-S、-g 的區別

1.2.4 yarn

1.2.5 全域安裝 TypeScript

1.3 第一個 TypeScript 程式

1.3.1 ts和js的區別

1.3.2 撰寫TS程式

1.3.3 手動編譯代碼

1.3.4 VS Code自動編譯

1.3.5 型別注解

1.3.6 介面

1.3.7 類

1.4 使用Webpack打包TypeScript

1.5 VS Code

1.5.1 忽略node_module目錄

1.5.2 安裝VS Code插件

1.5.3 打開并運行webpack專案

1.5.4 VS Code配置

1.5.5 搜索

第 2 章

? TypeScript常用語法 ?

2.1 基礎型別

2.1.1 布林值

2.1.2 數字

2.1.3 字串

2.1.4 undefined 和 null

2.1.5 陣列

2.1.6 元組 Tuple

2.1.7 列舉

2.1.8 any

2.1.9 void

2.1.10 Never

2.1.11 Object

2.1.12 聯合型別

2.1.13 型別斷言

2.1.14 型別推斷

2.2 介面

2.2.1 介面初探

2.2.2 可選屬性 ?

2.2.3 只讀屬性readonly

2.2.4 函式型別

2.2.5 型別別

2.3 類

2.3.1 基本示例

2.3.2 繼承

2.3.3 公共，私有與受保護的修飾符

2.3.4 readonly 修飾符

2.3.5 存取器

2.3.6 靜態屬性

2.3.7 抽象類

2.4 函式

2.4.1 基本示例

2.4.2 函式型別

2.4.3 可選引數和默認引數

2.4.4 剩余引數

2.4.5 函式多載

2.5 泛型

2.5.1 泛型引入

2.5.2 使用函式泛型

2.5.3 多個泛型引數的函式

2.5.4 泛型介面

2.5.5 泛型類

2.5.6 泛型約束

2.6 宣告檔案和內置物件

2.6.1 宣告檔案

2.6.2 內置物件

第 3 章

? Vue3快速上手 ?

3.1 Vue介紹

3.2 認識Vue3

3.3 vue-devtools

3.3.1 官網編譯安裝

3.3.2 極簡插件在線安裝

3.4 創建vue3專案

3.4.1 使用 vue-cli 創建

3.4.2 vue3目錄結構分析

3.4.3 使用 vite 創建

3.5 Vue常用指令介紹

3.5.1 v-text

3.5.2 v-html指令

3.5.3 v-model和v-bind

3.5.4 v-once

3.5.5 v-pre

3.5.6 v-cloak

3.5.7 v-for和key屬性

3.5.8 v-on

3.5.9 多事件處理

3.5.10 事件修飾符

3.5.11 鍵盤修飾符

3.5 在Vue中使用樣式

3.5.1 使用class樣式

3.5.2 使用行內樣式

3.6 條件判斷

3.6.1 v-if

3.6.2 v-if v-else

3.6.3 v-else-if

3.6.4 在 <template> 元素上使用 v-if 條件渲染分組

3.6.5 v-show

3.6.6 v-if vs v-show

3.7 模板中使用Javascript運算式

3.8 計算屬性

3.9 watch

3.9.1 常規用法

3.9.2 立即執行(immediate和handler)

3.9.3 深度監聽

3.9.4 computed和watch的區別

3.10 自定義組件使用v-model實作雙向資料系結

3.11 自定義組件slots

3.12 非Prop的Attribute繼承（Vue3）

3.12.1 Attribute 繼承

3.12.2 禁用Attribute繼承

3.13 $ref 操作DOM

3.14 表單資料雙向系結

3.15 組件傳值

3.15.1 父組件向子組件傳值

3.15.2 子組件向父組件傳值

3.16 $root和$prarent的使用

3.17 this.$nextTick

3.18 axios介紹

3.19 跨域請求

3.20 extend、mixin和extends

第 4 章

?  Composition API ?

4.1 Vue3集成TypeScript

4.2 setup

4.2.1 setup細節

4.2.2 props和attrs的區別

4.3 ref

4.4 reactive

4.5 reactive與ref 的區別

4.6 Vue2與Vue3回應式比較

4.6.1 vue2的回應式

4.6.2 vue3的回應式

4.7計算屬性與監視

4.8 組件生命周期

4.9 自定義hook函式

4.10 toRefs

4.11 ref獲取元素

4.12 shallowReactive 與 shallowRef

4.13 readonly 與 shallowReadonly

4.14 toRaw 與 markRaw

4.15 toRef

4.16 unRef

4.17 customRef

4.18 provide 與 inject

4.19 回應式資料的判斷

4.20 Option API VS Composition API

4.20.1 Option API的問題

4.20.2 使用Compisition API

第 5 章

?  Vue3新組件和新API ?

5.1 Fragment(片斷)

5.2 Teleport(瞬移)

5.3 Suspense(不確定的)

5.4 全新的全域API

5.4.1 createApp()

5.4.2 Vue3使用Proxy 優先defineProperty()

5.4.3 defineComponent和defineAsyncComponent

5.4.4 nextTick()

5.5 將原來的全域API轉移到應用物件

5.6 模板語法變化

5.6.1 v-model

5.7 v-if 與 v-for 的優先級對比

5.8 示例專案：todoList

5.8.1 示例介紹

5.8.2 組件拆分

5.8.3 代碼實作

5.8.4 Home.vue主組件

5.8.5 Header.vue代碼

5.8.6 Footer.vue代碼

5.8.7 List.vue串列代碼

5.8.8 Item.vue子組件代碼

第 6 章

?  vue-router和vuex?

6.1 什么是路由

6.2 安裝vue-router的兩種方式

6.3 Vue Router的基本使用

6.3.1 router-link

6.3.2 設定選中路由高亮

6.3.3 router-view

6.3.4 router/ index.ts

6.4 路由HTML5 History模式和hash模式

6.4.1 hash模式

6.4.2 HTML5 History模式

6.4.3 服務器配置示例

6.5 帶引數的動態路由匹配

6.6 回應路由引數的變化

6.7 捕獲所有路由和設定404 界面

6.8 vue-router中編程式導航

6.9 路由傳參query?ms

6.9.1 query

6.9.2 params

6.10 命名路由

6.11 嵌套路由

6.12 為路由切換使用過渡動效

6.12.1 單個路由的過渡

6.12.2 基于路由的動態過渡

6.13 路由懶加載

6.14 使用命名視圖

6.15 keep-alive

6.15.1 router配置快取

6.15.2組件配置快取

6.16 vuex 是什么？

6.17 安裝vuex

6.18 配置vuex的步驟

6.19 獲取vuex中的state

6.19.1 方法一：按需引入store.state

6.19.2 方式二：全域配置this.$store

6.19.3 方式三：mapState助手

6.20 獲取vuex中的Getter

6.20.1 定義Getter

6.20.2 Getter訪問方式一：store.getter.

6.20.3 Getter訪問方式二：this.$store.getters

6.20.4 Getter訪問方式三：mapGetters輔助函式

6.21 呼叫Mutations 和Actions

6.22 Composition API方式使用vuex

6.22.1 訪問State and Getters

6.22.2 訪問Mutations and Actions

6.23 Modules模塊

6.24 Namespacing命名空間

6.24.1.開啟模塊的命名空間

6.24.2.在組件中使用

第 7 章

?  Vue3的常用UI框架?

7.1 Vue的常用UI框架介紹

7.2 ant-design-vue介紹

7.2.1 使用 npm 或 yarn 安裝

7.2.2 在瀏覽器中使用

7.2.3 使用示例

7.2.4 按需加載

7.2.5 創建專案

7.2.6 使用ant-design-vue

7.2.7 將ant-design-vue引入進行統一封裝

7.2.8 主題定制

7.2.9 國際化

7.2.10 Layout 布局

7.2.11 使用iconfont圖示

7.3 Element Plus介紹

7.3.1 npm 或CDN安裝

7.3.2 引入 Element Plus

7.3.3 全域配置

7.3.4 自定義主題

7.3.5 組件

第 8 章

?  Webpack5介紹?

8.1 webpack概念的引入

8.2 初識webpack5

8.2.1 webpack5的新特性：

8.2.2 webpack核心概念

8.2.3 webpack構建流程（原理）

8.3 webpack安裝和體驗

8.4 webpack最基本的組態檔的使用

8.5 多入口和多出口配置

8.6 webpack-dev-server

8.7 配置devServer

8.8 打包和壓縮HTML資源

8.9 打包多個HTML檔案

8.10 打包css資源

8.11 打包less和sass

8.11.1 打包less

8.11.2 打包sass

8.12 提取css為單獨的檔案

8.13 處理css瀏覽器兼容性

8.14 壓縮css內容

8.14.1 optimize-css-assets-webpack-plugin和cssnano

8.14.2 css-minimizer-webpack-plugin

8.15 打包圖片資源和字體資源

8.15.1 打包圖片資源

8.15.2 打包字體資源

8.16 HMR熱模塊替換

8.17 去除專案里無用的js和css代碼

第 9 章

?  大屏展示實戰專案?

9.1 專案說明

9.2 技術選型

9.3 編碼規范

9.4 專案創建和初始化

9.5 專案基礎框架搭建

9.6 大屏首頁分析

9.6.1 大屏組件化分析

9.6.2 大屏技術實作分析

9.7 大屏技術準備

9.7.1 關于dart-sass與node-sass

9.7.2 安裝normalize.css

9.7.3 安裝moment

9.7.4 安裝echarts

9.7.5 安裝axios并進行全域封裝

9.7.5 安裝axios

9.7.6 安裝mockjs

9.7.7 安裝qs

9.8 大屏布局

9.8.1 布局方案分析

9.8.2 Grid布局簡介

9.8.3 代碼實作

9.9 公共組件開發

9.9.1 時間型別切換組件

9.9.2 首頁導航組件

9.9.3 子模塊標題組件

9.9.4 echarts公共組件

9.9.5 排名組件

9.10 大屏業務組件開發

9.10.1 抽取公共hooks

9.10.2 線網

9.10.3 車輛

9.10.4 違規原因分析

9.10.5 卡型別使用情況

9.10.6 線路運客數排名

9.10.7 電子支付趨勢

9.10.8 地圖區域客流

9.11 大屏自適應

9.11.1 postcss-pxtorem

9.12 常見錯誤及解決方案

第 10 章

?  Vue筆試面試?

10.1 制作簡歷

10.1.1 簡歷模板

10.1.2 個人資訊

10.1.3 專業技能

10.1.4 作業經歷

10.1.5 專案經歷

10.2 選擇公司和崗位

10.3 面試準備和自我介紹

10.3.1 面試準備

10.3.2 自我介紹

10.4 面試總結

10.5 常見筆試面試題

10.5.1 單頁應用和多頁應用的區別

10.5.3 什么是MVVM

10.5.3 Vue回應式原理

10.5.4 data為什么是函式

10.5.5 v-model原理

10.5.6 v-if和v-show的區別

10.5.7 computed、watch和method的區別

10.5.8 Vue的生命周期及順序

10.5.9 介面請求一般放在哪個生命周期中？

10.5.10 Vue組件的通信方式

10.5.11 slot插槽

10.5.12 虛擬DOM

10.5.13 Vue中key的作用

10.5.14 nextTick原理

10.5.15 說說 vuex

10.5.16 keep-alive

10.5.17 router 和 route 的區別？

10.5.18 vue-router有哪幾種導航鉤子？

10.5.19 vue-loader是什么？使用它的用途有哪些？

10.5.20 Vue性能優化

參考文獻

標籤：其他

上一篇：前端首屏渲染時間的極致優化

下一篇：JS執行機制