引言

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-quick-start-in-vue-3-offiicial-doc/

歡迎訪問我的部落格: http://blog.duhbb.com/

Vue3 官方文件翻譯 Quick Start

使用構建工具

Vue官方的構建工具是使用Vite,一個現在,輕量級以及非常非常快的前端構建工具.

線上工具

不需要本地安裝什麼東西,直接在瀏覽器中就幫你構建好了.

本地工具

前提:

• 熟悉命令列
• 安裝Node.js

為了建立一個帶有構建工具的Vue專案,你需要在命令列執行如下的命令,注意不要輸入>(瞧瞧,文件作者多麼用心鴨).

> npm init vue@latest

這個命令將會安裝並執行create-vue,以及官方的Vue專案的scaffolding工具(這是個啥?).

然後命令列會輸出一些列的Feature讓你選擇:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Cypress for testing? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
 

如果你不知道怎麼選,直接選No就行了,後續你更熟練了之後就可以根據自己的需求選了.

一旦專案建立成功了,下面的執行就可以安裝依賴並且啟動開發伺服器鳥.

> cd <your-project-name>
> npm install
> npm run dev

這樣你TM的就跑起來了第一個Vue專案了,雞凍嗎?

別慌,我們還給出了一些額外的建議:

• 推薦使用Visual Studio Code + Volar擴充套件進行開發
• 更多個工具上的細節以及和後端整合見Tooling Guide
• 要了解更多的關於構建工具Vite,可以檢視Vite docs
• 如果你選擇TypeScript,檢視TypeScript Usage Guide

當你要將程式碼遷移到生產環境時,執行如下的命令:

> npm run build

她會在專案目錄./dist下給你的APP建立一個給生產環境構建.

不想用構建工具

我就想直接用Vue的庫,咋整?

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

不會吧,真有人這麼用?

下一步

強烈建議你讀一下Introduction,費好大力氣寫的你不看?

結束語

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-quick-start-in-vue-3-offiicial-doc/

歡迎訪問我的部落格: http://blog.duhbb.com/