Vue 前端小白了解并運用Vue3 + Vite 及 Vue-cli 4專案搭建

Vue 3.0 概述

更新更快更強！

Vue.js 3.0 給我們帶來了那些新特性呢：

• Performance：性能比 vue2.x 塊 1.2 ～ 2 倍
• Tree shaking support：支持按需編譯，體積更小
• Composition API：組合 API，類似 React Hooks
• Custom Renderer API：暴露了自定義渲染 API
• Fragment，Teleport（Protal），Suspense：新增三個組件
• Better TypeScript support：更好的支持 TS

Vue-CLI 4 概述

讓開發更簡單！

Vue-CLI 4 是 vue 官方團隊推出的一款快速開發 vue 專案的構建工具，基于 Vue.js 進行快速開發的完整系統，提供：

• 通過 @vue/cli 實作的互動式的專案腳手架，

• 通過 @vue/cli + @vue/cli-service-global 實作的零配置原型開發，

  • 一個運行時依賴 (@vue/cli-service)，該依賴：
  • 可升級；
  • 基于 webpack 構建，并帶有合理的默認配置；
  • 可以通過專案內的組態檔進行配置；
  • 可以通過插件進行擴展，

• 一個豐富的官方插件集合，集成了前端生態中最好的工具，

• 一套完全圖形化的創建和管理 Vue.js 專案的用戶界面，

Vite 概述

讓專案更快！

Vite 是一個基于 Vue3 單檔案組件的非打包開發服務器，它做到了本地快速開發啟動：

• 快速的冷啟動，不需要等待打包操作；
• 即時的熱模塊更新，替換性能和模塊數量的解耦讓更新飛起；
• 真正的按需編譯，不再等待整個應用編譯完成，這是一個巨大的改變，

安裝相應工具

1、更新 npm 到最新版本
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)

命令運行

npm install -g npm

npm 就自動為我們更新到最新版本
?
更新完成之后，以管理員身份打開 cmd 管理工具，輸入 node -v ，回車，可查看 node 版本號.

2、安裝全域 Vue-CLI4.x 腳手架
首先查看我們當前 Vue CLI 版本號，在命令列輸入

vue -V

如果出現2.X.X，則說明我們現在安裝的 Vue-CLI2；
然后我們就需要更新升級了，命令列輸入以下命令，回車；

npm install -g @vue/cli

再次查看 Vue-CLI 的版本號4.x.x，則說明更新成功；

3、安裝全域 Vue 3.x

命令運行

$ npm install vue@next

Vue3 + Vue CLI 4 搭建專案

1、通過 Vue-CLI4 創建一個 vue 專案
進入你需要創建專案的檔案夾，打開命令列，

輸入以下命令，回車

 vue create vue3-cli4-demo

這里vue3-cli4-demo指的是專案名，該命令執行后會創建一個名為vue3-cli4-demo的目錄，也就是我們所搭建的專案，

此處有三個選擇：

• Default ([Vue 2] babel, eslint)：默認套餐，使用Vue 2提供babel和eslint支持
• Default (Vue 3 Preview) ([Vue 3] babel, eslint)：默認套餐，使用Vue 3，提供babel和eslint支持
• Manually select features：自己去選擇需要的功能，提供更多的特性選擇，比如如果想要支持 TypeScript ，就應該選擇這一項，

可以使用上下方向鍵來切換選項，如果只需要 babel 和 eslint 支持，那么選擇第一項，就完事了，靜靜等待 vue 初始化專案，

Vue-CLI4 內置支持了 10 個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項，

對于每一項的功能，此處做個簡單描述：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version              //選擇vue版本，這個不選的話默認是使用vue 2
 ( ) Babel                           //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行，
 ( ) TypeScript                      // TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含并擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行，目前較少人再用
 ( ) Progressive Web App (PWA) Support// 漸進式Web應用程式
 ( ) Router                           // vue-router（vue路由）
 ( ) Vuex                             // vuex（vue的狀態管理模式）
 ( ) CSS Pre-processors               // CSS 前處理器（如：less、sass）
 ( ) Linter / Formatter               // 代碼風格檢查和格式化（如：ESlint）
 ( ) Unit Testing                     // 單元測驗（unit tests）
 ( ) E2E Testing                      // e2e（end to end） 測驗

我選擇了 TypeScript，CSS Pre-processors，Linter / Formatter
按住enter進入下一步，接下來都是對之前每項選項的更詳細的選擇，

• css:選擇 SCSS/SASS
• Linter / Formatter:選擇 prettier

這一步就是要選擇組態檔的位置了，對于 Babel 、 PostCSS 等，都可以有自己的組態檔： .babelrc 、 .postcssrc 等等，同時也可以把配置資訊放在package.json 里面，此處出于對編輯器（ Visual Studio Code ）的友好支持（編輯器一般默認會在專案根目錄下尋找組態檔），選擇把組態檔放在外面，選擇 In dedicated config files

補充
Save this as a preset for future projects?:這個就是問要不要把當前的這一系列選項配置保存起來，方便下一次創建專案時復用，選擇 y，
選完之后， Vue-CLI 就根據前面選擇的內容，開始初始化專案了，

最后出現如下代碼

Successfully created project vue3-cli4-demo.
Get started with the following commands:

 $ cd vue3-cli4-demo
 $ npm run serve

說明已經初始化成功，Vue-CLI4 已經將專案搭建完成，

2、進入你的專案檔案夾
專案搭建好了，現在就可以進入專案檔案夾，輸入以下命令，回車進入新建的專案，

cd vue3-cli4-demo

3、啟動專案
一切環境依賴安裝準備就緒，我們來測驗一下自己新建的 vue 專案的運行情況，

輸入以下命令，回車啟動專案

npm run serve

結果會彈出一個瀏覽器訪問地址默認為localhost:8080，如下：

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://***.***.***.***:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

在瀏覽器中打開http://localhost:8080或者 Network 的地址，就能看到你的專案了

vue ui 圖形化界面創建專案
Vue-CLI4.x 給我們同樣提供了圖形化界面,用來管理和創建專案

命令列輸入

vue ui

然后會自動打瀏覽器頁面：然后就可以按照也頁面按鈕一步步常見專案了，

專案打包
在開發完專案之后，就應該打包上線了， Vue-CLI4 也提供了打包的命令，在專案根目錄下執行：

npm run build

執行完之后，可以看到在專案根目錄下多出了一個 dist 目錄，該目錄下就是打包好的所有靜態資源，直接部署到靜態資源服務器就好了，

實際上，在部署的時候要注意，假設靜態服務器的域名是 http://static.baidu.com ，那么對應到訪問 <專案根目錄>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的靜態資源以此類推，

專案目錄

Vue3 + Vite 搭建專案
1、通過 Vite 創建一個 vue 專案
進入你需要創建專案的檔案夾，打開命令列，

輸入以下命令，回車

 npm init @vitejs/app vue3-vite-demo

這里vue3-vite-demo指的是專案名，該命令執行后會創建一個名為vue3-vite-demo的目錄，也就是我們所搭建的專案，

此處可以選擇支持的模板，包括：

? Select a template: ...
 vanilla
  vue
  vue-ts
  react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts

可以使用上下方向鍵來切換選項，使用Enter來確定模板，就完事了，靜靜等待 vue 初始化專案，

我選擇了 vue-ts，按住enter進入下一步，最后出現如下代碼

√ Select a template: · vue-ts

Done. Now run:

  cd vue3-vite-demo
  npm install
  npm run dev

說明已經初始化成功，vue3-vite-demo 專案搭建完成，

2、進入你的專案檔案夾
專案搭建好了，現在就可以進入專案檔案夾，

輸入以下命令，回車進入新建的專案，

cd vue3-vite-demo

3、安裝依賴
因為各個模板之間都是相互依賴的，所以現在我們要安裝依賴，
?
輸入以下命令，回車安裝依賴

npm install

4、啟動專案
一切環境依賴安裝準備就緒，我們來測驗一下自己新建的 vue 專案的運行情況，

輸入以下命令，回車啟動專案

npm run dev

結果會彈出一個瀏覽器訪問地址默認為localhost:3000，如下：

vite v2.1.0 dev server running at:

> Network:  http://***.***.***.***:3000/
> Local:    http://localhost:3000/

ready in 885ms.

在瀏覽器中打開http://localhost:3000或者 Network 的地址，就能看到你的專案了

一個由 Vite 構建的 Vue3 專案就搭建好了，支持 TypeScript 語法，CSS 前處理器為 Sass，使用 ESLint 和 prettierrc 風格格式化代碼

Tips：安裝新依賴請添加【–save】：

  npm i xxx --save
  // 或
  cnpm i xxx --save
  // 或
  yarn add xxx --save
  // --save不寫的話，新的依賴檔案不會寫進package.json檔案中

專案目錄

總結

此筆記旨在幫助 Vue 小白了解并應用 Vue3 + Vite 及 VueCLI4 專案的命令列搭建程序，希望能幫得到大家，如有問題歡迎各位大佬指正，