相信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í)是我們必然的趨勢，今天，主要分享一下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)行卸載；如果沒有，請忽略此步驟

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

npm uninstall vue-cli -g

3.安裝Vue-cli 3.x

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

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

二、項目搭建過程

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

vue create my-demo

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

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

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

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

• Babel：使用babel，便于將我們源代碼進(jìn)行轉(zhuǎn)碼（把es6=>es5）
• TypeScript：使用TypeScript進(jìn)行源碼編寫，使用ts可以編寫強(qiáng)類型js，對我們的開發(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：使用單元測試
• E2E Testing：使用E2E測試, end to end（端到端）是黑盒測試的一種

4.然后對每個選中的配置項進(jìn)行配置

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

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

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

使用Babel做轉(zhuǎn)義, 與TypeScript一起用于自動檢測

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

Pick a CSS pre-processor?
選擇一種css 預(yù)處理器, 在這里我選擇less

Pick a linter / formatter config?
選擇一種代碼格式化檢測工具

TSLint: ts格式檢驗工具
ESLint with error prevention only: ESLint 只會進(jìn)行錯誤提醒
ESLint + Airbnb config: ESLint Airbnb標(biāo)準(zhǔn)
ESLint + Standard config: ESLint Standard 標(biāo)準(zhǔn)
ESLint + Prettier: ESLint（代碼質(zhì)量檢測）+ 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?
是否需要保存當(dāng)前配置，在以后的項目中可快速構(gòu)建? 保存后, 后續(xù)創(chuàng)建項目時可以直接選擇該配置, 不需單獨配置

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

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

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

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

三、啟動項目：

cd my-demo
npm run serve

至此，Vue3.0完整的項目搭建過程就完成，后面我會單獨分享Vue3.0中vue.config.js 的配置; 文章中有錯誤的地方，歡迎提出指正，感謝大家,更多相關(guān)Vue3.0+ts項目步驟內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論