如何搭建一個(gè)完整的Vue3.0 + ts 的項(xiàng)目

相信9月18日尤大大的關(guān)于Vue3.0的發(fā)表演講大家一定有所關(guān)注,現(xiàn)在Vue3.0 也已經(jīng)進(jìn)入RC階段（最終產(chǎn)品的候選版本，如果沒有問題則可發(fā)布成為正式版本）。所以Vue3.0的學(xué)習(xí)是我們必然的趨勢(shì)，今天，主要分享一下Vue3.0的詳細(xì)搭建過程，希望可以為初入Vue3的小伙伴有所幫助。

我們現(xiàn)在開始進(jìn)入今天的主題啦~~

一、安裝

1. 安裝nodejs

此處提供nodejs下載地址：https://nodejs.org/zh-cn/download/

• 大家根據(jù)自己電腦的配置選擇適配的LTS（最新穩(wěn)定版本進(jìn)行下載，安裝即可，此處略去安裝步驟。

2.卸載舊版本

如果你現(xiàn)在正在用舊版的Vue-cli1.x或者Vue-cli2.x?需要先進(jìn)行卸載；如果沒有，請(qǐng)忽略此步驟

• 打開命令窗口，用以下命令進(jìn)行卸載：

npm uninstall vue-cli -g 復(fù)制代碼

3.安裝Vue-cli 3.x

• 搭建Vue3.0的項(xiàng)目，必須依賴Vue-cli 3.0或者以上的版本，打開命令窗口，通過以下命令進(jìn)行安裝和查看版本號(hào)：

// 安裝最新版的vue-cli npm install -g @vue/cli // 查看版本號(hào) vue -V 復(fù)制代碼

二、項(xiàng)目搭建過程

1.新建項(xiàng)目，以下我新建一個(gè)名稱為my-demo的項(xiàng)目

vue create my-demo 復(fù)制代碼

2.enter之后，根據(jù)項(xiàng)目提示，接下來會(huì)讓你選擇一個(gè)預(yù)設(shè)：

newTs : 在項(xiàng)目創(chuàng)建完成的最后，會(huì)詢問你需不需要保持本次配置，方便下次直接使用;這個(gè)newTs就是我之前保存好的一個(gè)預(yù)設(shè)配置 Default：默認(rèn)的預(yù)設(shè)配置，會(huì)快速構(gòu)建一個(gè)項(xiàng)目，提供了babel和eslint的支持 Manually select features：手動(dòng)進(jìn)行項(xiàng)目配置，可以根據(jù)項(xiàng)目的需要選擇合適的依賴，具備更多的選擇性，以下步驟，我將會(huì)采用該種方式。 復(fù)制代碼

3. Vue-cli3.x 將提供以下特性供選擇，大家可以根據(jù)項(xiàng)目需要進(jìn)行選擇添加的配置項(xiàng)：

通過上下鍵進(jìn)行配置項(xiàng)切換，對(duì)需要選擇的配置項(xiàng)使用空格鍵進(jìn)行選中/反選

Babel：使用babel，便于將我們?cè)创a進(jìn)行轉(zhuǎn)碼（把es6=>es5） TypeScript：使用TypeScript進(jìn)行源碼編寫，使用ts可以編寫強(qiáng)類型js，對(duì)我們的開發(fā)有很大的好處 Progressive Web App(PWA)：使用漸進(jìn)式網(wǎng)頁應(yīng)用（PWA） Router：使用vue-router Vuex：使用vuex狀態(tài)管理器 CSS Pre-processors：使用CSS預(yù)處理器，比如：less，sass等 Linter/Formatter：使用代碼風(fēng)格檢查和格式化 Unit Testing：使用單元測(cè)試 E2E Testing：使用E2E測(cè)試, end to end（端到端）是黑盒測(cè)試的一種 復(fù)制代碼

4.然后對(duì)每個(gè)選中的配置項(xiàng)進(jìn)行配置

• Use class-style component syntax? (Y/n)

是否使用Class（類）風(fēng)格裝飾器, 即通過export default class Home extends Vue{} 創(chuàng)建Vue實(shí)例?

• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用Babel做轉(zhuǎn)義, 與TypeScript一起用于自動(dòng)檢測(cè)?

• Use history mode for router?

路由模式, 是否選擇history模式，啟用history模式，項(xiàng)目build之后，可能會(huì)出現(xiàn)打開頁面空白的情況哦?

• Pick a CSS pre-processor?

選擇一種css 預(yù)處理器, 在這里我選擇less?

• Pick a linter / formatter config?

選擇一種代碼格式化檢測(cè)工具?

TSLint: ts格式檢驗(yàn)工具 ESLint with error prevention only: ESLint 只會(huì)進(jìn)行錯(cuò)誤提醒 ESLint + Airbnb config: ESLint Airbnb標(biāo)準(zhǔn) ESLint + Standard config: ESLint Standard 標(biāo)準(zhǔn) ESLint + Prettier: ESLint（代碼質(zhì)量檢測(cè)）+ Prettier（代碼格式化工具） 復(fù)制代碼

• Pick additional lint features?

代碼檢查方式: 保存時(shí)檢查 or 提交時(shí)檢查; 我選擇, 保存時(shí)檢查?

• Pick a unit testing solution?

選擇一種單元測(cè)試的方案，目前Vue官方推薦也是jest, 相比而言, 配置簡單容易上手, 建議選擇Jest啦?

• Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

Babel, PostCSS, ESLin等配置文件怎么存放, 是放到單獨(dú)的配置文件中?還是package.json里? 這里方便配置清晰好看, 我選擇每個(gè)配置單獨(dú)文件。?

• Save this as a preset for future projects?

是否需要保存當(dāng)前配置，在以后的項(xiàng)目中可快速構(gòu)建? 保存后, 后續(xù)創(chuàng)建項(xiàng)目時(shí)可以直接選擇該配置, 不需單獨(dú)配置?

5.配置完成后，等待依賴安裝完成

?

6.構(gòu)建完成后，項(xiàng)目目錄結(jié)構(gòu)如下

?相比Vue2.x, Vue3.0的目錄確實(shí)精簡了很多, 而且我們會(huì)發(fā)現(xiàn), Vue3.0不在有webpack.config.js的配置, 是因?yàn)閂ue3.0 通過插件@vue/cli-service對(duì)webpack進(jìn)行抽象處理, 并默認(rèn)了webpack的配置。但是項(xiàng)目開發(fā)中，我們肯定會(huì)存在一些特殊的需求需要調(diào)整webpack, 當(dāng)然這也是沒有問題, 在Vue3.0當(dāng)中, 可以通過在項(xiàng)目的根目錄創(chuàng)建vue.config.js對(duì)webpack進(jìn)行自定義配置。

關(guān)于vue.config.js 的配置我會(huì)單獨(dú)寫一篇文章進(jìn)行分享

三、啟動(dòng)項(xiàng)目：

cd my-demo npm run serve 復(fù)制代碼

至此，Vue3.0完整的項(xiàng)目搭建過程就完成，后面我會(huì)單獨(dú)分享Vue3.0中vue.config.js 的配置; 文章中有錯(cuò)誤的地方，歡迎提出指正，感謝大家

總結(jié)

以上是生活随笔為你收集整理的如何搭建一个完整的Vue3.0 + ts 的项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。