第一講、建立執行Vue3.x專案、分析Vue目錄結構

一、Vue介紹

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。目前最新版本是Vue3.x。

Vue3.x釋出於2020年9月19日，在Vue2.x的基礎上面進行了一些優化，對TypeScript有更好的支援。Vue3.x的語法和Vue2.x非常相似，如果你已經會用Vue2.x，那麼學Vue3.x會非常簡單。

Vue 官網地址：cn.vuejs.org/

Vue3.x Githtub地址: github.com/vuejs/vue-next

Vue3.x 文件地址: v3.vuejs.org/

Vue3.x 中文文件地址：v3.cn.vuejs.org/

二、安裝Vue官方腳手架以及建立專案

注意: 安裝腳手架建立專案之前之前，我們的電腦上必須得安裝Nodejs，推薦安裝nodejs穩定版本

文件地址： v3.vuejs.org/guide/installation.ht...

Vue-cli地址： cli.vuejs.org/

Vite地址： github.com/vitejs/vite

通過Vue-cli腳手架工具可以讓我們快速的搭建vue專案，目前Vue官方給我們提供了2個腳手架，Vue-cli和Vite。

一、通過Vue-cli建立我們的專案

1.1、安裝Vue-cli，在同一個電腦上面只需要安裝一次

yarn global add @vue/cli
# OR
npm install -g @vue/cli
# OR
cnpm install -g @vue/cli

如果電腦上面沒有安裝過cnpm可以通過下面命令安裝：

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果電腦上面沒有安裝過yarn可以通過下面命令安裝：

npm i -g yarn

1.2、通過Vue-cli建立專案

vue create hello-vue3

yarn serve

二、通過Vite腳手架建立我們的專案

2.1、使用npm建立

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

2.2、使用yarn建立

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

三、目錄結構介紹

四、開發工具以及外掛配置

本作品採用《CC 協議》，轉載必須註明作者和本文連結