如何搭建一個完整的Vue3.0 + ts 的項目

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

我們現在開始進入今天的主題啦~~

一、安裝

1. 安裝nodejs

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

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

2.卸載舊版本

如果你現在正在用舊版的Vue-cli1.x或者Vue-cli2.x?需要先進行卸載；如果沒有，請忽略此步驟

• 打開命令窗口，用以下命令進行卸載：

npm uninstall vue-cli -g 復制代碼

3.安裝Vue-cli 3.x

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

// 安裝最新版的vue-cli npm install -g @vue/cli // 查看版本號 vue -V 復制代碼

二、項目搭建過程

1.新建項目，以下我新建一個名稱為my-demo的項目

vue create my-demo 復制代碼

2.enter之后，根據項目提示，接下來會讓你選擇一個預設：

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

3. Vue-cli3.x 將提供以下特性供選擇，大家可以根據項目需要進行選擇添加的配置項：

通過上下鍵進行配置項切換，對需要選擇的配置項使用空格鍵進行選中/反選

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

4.然后對每個選中的配置項進行配置

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

是否使用Class（類）風格裝飾器, 即通過export default class Home extends Vue{} 創建Vue實例?

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

使用Babel做轉義, 與TypeScript一起用于自動檢測?

• Use history mode for router?

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

• Pick a CSS pre-processor?

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

• Pick a linter / formatter config?

選擇一種代碼格式化檢測工具?

TSLint: ts格式檢驗工具 ESLint with error prevention only: ESLint 只會進行錯誤提醒 ESLint + Airbnb config: ESLint Airbnb標準 ESLint + Standard config: ESLint Standard 標準 ESLint + Prettier: ESLint（代碼質量檢測）+ Prettier（代碼格式化工具） 復制代碼

• Pick additional lint features?

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

• Pick a unit testing solution?

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

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

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

• Save this as a preset for future projects?

是否需要保存當前配置，在以后的項目中可快速構建? 保存后, 后續創建項目時可以直接選擇該配置, 不需單獨配置?

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

?

6.構建完成后，項目目錄結構如下

?相比Vue2.x, Vue3.0的目錄確實精簡了很多, 而且我們會發現, Vue3.0不在有webpack.config.js的配置, 是因為Vue3.0 通過插件@vue/cli-service對webpack進行抽象處理, 并默認了webpack的配置。但是項目開發中，我們肯定會存在一些特殊的需求需要調整webpack, 當然這也是沒有問題, 在Vue3.0當中, 可以通過在項目的根目錄創建vue.config.js對webpack進行自定義配置。

關于vue.config.js 的配置我會單獨寫一篇文章進行分享

三、啟動項目：

cd my-demo npm run serve 復制代碼

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。