相信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

開啟命令視窗，用以下命令進行解除安裝：

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,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專案步驟內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！