vue3.0終于來(lái)了, 下面我們開(kāi)始愉快的嘗鮮吧!!!
vue3官方網(wǎng)站 : https://v3.vuejs.org/
vue3.0 B站發(fā)布會(huì):https://www.bilibili.com/video/BV1iA411J7cA?from=search&seid=2979047174353974296
vue3.0 新特性
- vue3.0 向下兼容vue2.0
- 性能提升了很多
- 使用composition API解決復(fù)雜代碼的封裝問(wèn)題
- 加入了新的api
- 對(duì)typescript對(duì)支持更好了!(源代碼就是用typescript開(kāi)發(fā)的)
一. 環(huán)境搭建
1.搭建mac環(huán)境
1.安裝 homebrew
我的mac是安裝了homebrew https://brew.sh/
安裝方法: (需前置安裝xcode)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
2. 安裝 nodejs
brew install nodejs
3. 安裝 cnpm(非必需)
nodejs默認(rèn)安裝了npm包管理工具, 但npm對(duì)天朝網(wǎng)絡(luò)來(lái)說(shuō)連接緩慢.可能需要科學(xué)的上網(wǎng)方法
或者,使用國(guó)內(nèi)源代替
如果你使用npm 無(wú)問(wèn)題, 可以跳過(guò)此步驟
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果沒(méi)有安裝cnpm, 之后的命令都要用npm代替cnpm
4.安裝webpack
cnpm install webpack -g
5. 安裝vue cli
cnpm install -g @vue/cli
安裝完后使用vue --version查看版本
2. 搭建Windows環(huán)境
3. 搭建linux環(huán)境
4. 配置vscode插件
- 安裝vetur
- 安裝 自動(dòng)閉合標(biāo)簽
二. 創(chuàng)建vue3工程
- 打開(kāi)vscode進(jìn)入工程目錄下,打開(kāi)終端,新建工程
vue create 項(xiàng)目名稱(chēng)
- 是否使用淘寶源:
國(guó)內(nèi)就無(wú)奈的選擇 y 吧
- 創(chuàng)建何種工程
如果使用JavaScript 直接選擇第二項(xiàng)就可以了
如果使用typescript 請(qǐng)選擇第三項(xiàng), 手動(dòng)配置
因?yàn)樯弦徊接凶孕羞x擇vue版本 所以要做一下選擇
- 是否選擇類(lèi)類(lèi)型組件 暫時(shí)選否
- 是否使用typescript版的babel? 暫時(shí)選否
- 配置代碼規(guī)范工具 eslint
- 設(shè)置保存時(shí)進(jìn)行代碼規(guī)范 lint
- 上述配置單獨(dú)寫(xiě)入配置文件還是寫(xiě)入包配置文件?
- 是否把上述配置保存成一個(gè)固定配置
- 現(xiàn)在vue cli會(huì)自動(dòng)安裝包
安裝完成:
- 現(xiàn)在, 我們的工程建好了!
我們可以根據(jù)提示進(jìn)入工程目錄,然后運(yùn)行起來(lái)
npm run serve
- vue工程可以訪問(wèn)啦!
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.8:8080/
三. 圖形界面創(chuàng)建工程
- 打開(kāi)vscode 進(jìn)入想創(chuàng)建工程的文件夾, 進(jìn)入圖形界面
vue ui
- 創(chuàng)建工程
- 選擇固定工程創(chuàng)建模版
4.選擇要安裝的功能框架
- 繼續(xù)配置
- 是否保存為固定工程創(chuàng)建模版?
根據(jù)需求設(shè)置, 這里我就不用保存了
- 然后, 會(huì)創(chuàng)建項(xiàng)目
項(xiàng)目創(chuàng)建完成
四. 項(xiàng)目目錄
可以看到和vue2.0基本沒(méi)有區(qū)別, 有一些區(qū)別是因?yàn)槲覀兪褂胻ypescript引起的
五. package.json文件
六. vue3.0是如何啟動(dòng)的?
這里我們要看的第一個(gè)文件是: main.ts
