學習要點:
1.Vue3.x 簡介
2.教學方式
3.安裝測試
本節課我們來開始了解 Vue3.x 漸進式前端框架,學會安裝并測試。
一.Vue3.x 簡介
1. Vue 一款基于 JavaScript 的構建用戶界面的漸進式框架,版本為 3.x;
2. 所謂漸進式,就是按需分配,用多少,就引入多少,由開發者自行決定;
3. Vue 的核心庫只關心視圖層,利于上手,還有利于和其它庫整合使用;
4. 那么,學習這款框架需要哪些基礎呢,具體如下:
(1) . HTML5/JavaScript (必須);
(2) . 任意一門前端庫或框架,有后端語言基礎更佳 (可選);
PS:如果已有了一門或以上的前端框架或庫的基礎,可以迅速學起;
PS:如果這是你第一門前端框架,需要不時的停頓或查閱資料幫助理解;
二.教學方式
1. Vue3.x 的教學方式,目前分為三種:
(1) .從 Vue2.x 升級到 Vue3.x,只講遷移方式和改變,不再講解基本語法;
PS:因為你已經有了 Vue2.x 基礎,所以沒必要重復講解,課程的規劃可以偏底層一些,
重點講解新特性和與舊版本的編碼區別,以及性能提升的區別;
(2) .假設你可能沒有 Vue2.x 基礎或有 Vue2.x 基礎,但還是會講解基礎語法;
PS:此時,可以直接使用腳手架工具 Vue Cli4.5+來演示課程;
(3) .不做任何假設你的基礎,從零開始講解 Vue3.x 的語法基礎,不采用腳手架工具;
PS:手冊上,對新手也是建議使用 CDN 引入的方式,避免腳手架一頓亂七八糟的東西;
PS:因為腳手架需要有 Webpack 基礎才能理解,只是為了演示語法顯得很多余;
PS:除非必須使用,在核心篇采用 CDN 或下載后引入的方式進行教學;
PS:Vue3.x 核心篇采用第三種教學方式,而階段二工具篇會講解基于 Vue3.x 的腳手架;
三.安裝測試
1. 如何使用 Vue3.x,官方給出了幾種方式,其實上面已經大概說了,具體:
(1). CDN 方式引入,網絡不好,下載后本地引入即可;
<script src="https://unpkg.com/vue@next">script>
或
<script src="/vue.global.js">script>
(3) . npm 結合 webpack 等前端構建工具,命令為:
npm install vue@next
(4) . Cli 腳手架工具,官方提供的腳手架工具,命令為:
npm install -g @vue/cli@next
(5) . Vite,官方提供的前端構建工具,命令為:
PS:以上提前安裝好演示即可,腳手架是階段二的內容;
PS: 至于 npm 的安裝,以及國內鏡像,在 Webpack 課程第一節講解過;
PS: 使用 CDN 方式,采用的是 file://模式,想要 http://模式,需要 Node.js 靜態服務器;
PS:使用 file://一樣可以測試學習,階段二會講解,如果想提前用,可參考手冊,如下:
https://cli.vuejs.org/zh/guide/deployment.html
2. 關于 Vue Devtools 工具,目前支持 Vue3.x 是 6.0.x 的 Beta 版本;
https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.2
PS:支持 Vue2.x 的 5.3.x 不支持 Vue3.x,而 6.0.x 的 Beta 還有一些問題,可等更新;
3. 開發工具推薦 WebStorm 或 VScode,都是比較優秀的開發工具,這里選了前者;
4. 學習版本會提示信息,這里采用的是火狐瀏覽器(大家用谷歌一樣的),屏蔽即可;
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!