目錄

一、前言

二、前置準(zhǔn)備

2.1 環(huán)境準(zhǔn)備

2.1.1 create-vue功能

2.1.2 nodejs環(huán)境

2.1.3 配置nodejs的環(huán)境變量

2.1.4 更換安裝包的源

三、工程化項目創(chuàng)建與啟動過程

3.1 創(chuàng)建工程化項目

3.2 項目初始化

3.3 項目啟動

3.4 核心文件說明

四、VUE兩種不同的API風(fēng)格

4.1 選項式API風(fēng)格

4.2 組合式API風(fēng)格

4.2.1 自定義Vue文件

4.2.2 在App.vue文件中引入

五、寫在文末

---

一、前言

在實際開發(fā)中，為了快速滿足業(yè)務(wù)的需求，開發(fā)者往往不想投入過多的時間在搭建工程、配置環(huán)境上面，于是很多編程語言都逐漸推出合適的工程化項目的腳手架，開發(fā)者只需要按照要求輸入一些命令即可，對于VUE來說也是如此，本文將通過實際案例詳細(xì)分享一下VUE3中工程化項目的使用。

二、前置準(zhǔn)備

2.1 環(huán)境準(zhǔn)備

腳手架工具：create-vue，是vue官方提供的最新的腳手架工具，可用于快速生成一個工程化的Vue項目

2.1.1 create-vue功能

create-vue提供了如下功能：

• 統(tǒng)一的目錄結(jié)構(gòu)；

• 本地調(diào)試；

• 熱部署；

• 單元測試；

• 集成打包；

2.1.2 nodejs環(huán)境

本地安裝nodejs，這個比較簡單就不再贅述了，安裝完成后，通過下面的窗口命令檢查一下

注意：vue3要求的最低nodejs的版本是18.16

2.1.3 配置nodejs的環(huán)境變量

使用下面的命令設(shè)置一下nodejs環(huán)境變量，方便后續(xù)執(zhí)行相關(guān)的npm命令

npm config set prefix ""D:\dev-tools\node\place

2.1.4 更換安裝包的源

設(shè)置使用下面的命令

npm config set registry http://registry.npm.taobao.org/

檢查是否設(shè)置成功

npm config get registry

三、工程化項目創(chuàng)建與啟動過程

3.1 創(chuàng)建工程化項目

創(chuàng)建一個工程化VUE項目，執(zhí)行下面的命令

npm init vue@latest

執(zhí)行上面的命令之后，將會安裝并執(zhí)行 create-vue ，它是Vue官方的項目腳手架工具，第一次創(chuàng)建項目，先都使用默認(rèn)的選項即可；

關(guān)于創(chuàng)建項目過程中的各個參數(shù)項做如下說明：

• Project name：------》項目名稱，默認(rèn)值：vue-project，可輸入想要的項目名稱，此處我寫的是：vueproject1。

• Add TypeScript? ------》是否加入TypeScript組件？默認(rèn)值：No。

• Add JSX Support? ------》是否加入JSX支持？默認(rèn)值：No。

• Add Vue Router for Single Page Application development? ------》是否為單頁應(yīng)用程序開發(fā)添加Vue Router路由管理組件？默認(rèn)值：No。

• Add Pinia for state management? ------》是否添加Pinia組件來進(jìn)行狀態(tài)管理？默認(rèn)值：No。

• Add Vitest for Unit testing? ------》是否添加Vitest來進(jìn)行單元測試？默認(rèn)值：No。

• Add an End-to-End Testing Solution?------》是否添加端到端測試？默認(rèn)值No。

• Add ESLint for code quality? ------》是否添加ESLint來進(jìn)行代碼質(zhì)量檢查？默認(rèn)值：No。

執(zhí)行完成之后，可以看到在當(dāng)前目錄下就產(chǎn)生了一個項目

目錄結(jié)構(gòu)如下

3.2 項目初始化

在上一步項目創(chuàng)建出來之后，窗口最后給出了下面的提示，即后續(xù)接下來的操作

我們按照提示的命令，依次進(jìn)行命令執(zhí)行即可

1）執(zhí)行npm install

• 類比maven，即從倉庫拉取項目運行依賴的相關(guān)組件包

2）使用vscode打開項目

在當(dāng)前的窗口下，執(zhí)行 code .命令，將會在vscode中打開項目

對于上面的工程目錄，接下來簡單說明一下各個目錄的作用：

• jsconfig.json

  • 存放Vue項目的配置信息，比如端口號等；

• package.json

  • 項目配置文件，包括項目名稱，版本號，依賴包，版本等；

• index.html

  • 默認(rèn)首頁；

• public

  • 公共資源目錄

• node_modules

  • 下載的第三方包存放目錄；

• src

  • 源代碼存放目錄

    • assets：靜態(tài)資源目錄，比如圖片、字體；

    • components：組件目錄，存放通用的組件；

    • App.vue ， 根組件；

    • main.js，入口文件；

3.3 項目啟動

執(zhí)行下面的命令啟動項目

npm run dev

正常啟動的效果如下，默認(rèn)分配了一個訪問端口

瀏覽器訪問上圖中的地址： http://localhost:5173/ ，看到下面的主頁展示效果

3.4 核心文件說明

如下是默認(rèn)的工程啟動之后頁面展示依賴的幾個核心文件

• index.html，展示主頁信息；

• main.js，入口文件，被index.html所引用；

• App.vue，根組件；

  • .vue文件是Vue項目中的組件文件，在Vue項目中也稱為單文件組件，Vue的單文件組件會將一個組件的邏輯（JS），模板（HTML）和樣式（CSS）封裝在同一個文件里（.vue）

四、VUE兩種不同的API風(fēng)格

4.1 選項式API風(fēng)格

在我們剛開始學(xué)習(xí)VUE的時候，下面這樣的寫法是不是很熟悉，這就是傳統(tǒng)的選項式API的風(fēng)格

• 選項式API，可以用包含多個選項的對象來描述組件的邏輯，比如：data，methods，mounted等

<script>export default {name: "old",data() {return {msg: "Welcome to Your Vue.js App"}},methods: {點我增加: function () {alert(this.msg);}},mounted() {console.log("vue mounted");}}</script><template><button @click="incr">點我增加</button>
</template>

但是這種寫法也有一個明顯的缺點就是風(fēng)格比較死板，不夠靈活，所以就出現(xiàn)了下面這種組合式的風(fēng)格

4.2 組合式API風(fēng)格

比如像下面這樣的代碼，就屬于組合式API風(fēng)格的寫法，關(guān)于代碼中幾個核心的模塊分別做說明：

• setup，作為一個關(guān)鍵標(biāo)識，告訴VUE需要做一些處理，讓開發(fā)者可以更加簡潔的使用組合式API；

• ref()，接收一個內(nèi)部值，返回一個響應(yīng)的ref對象，此對象只有一個指向內(nèi)部值的屬性value；

• onMounted()，在組合式API中的鉤子方法，注冊一個回調(diào)函數(shù)，在組件掛載完成后執(zhí)行；

<script setup>import { onMounted,ref } from 'vue'const count = ref(0)function incr() {count.value++}onMounted(() => {console.log('mounted')})</script><template><button @click="incr">點我增加</button>
</template>

下面通過一個簡單的案例體驗下組合式API風(fēng)格的寫法。

4.2.1 自定義Vue文件

在src目錄下創(chuàng)建一個Api.vue文件，參照組合式API風(fēng)格的寫法，代碼如下：

<script setup>//聲明響應(yīng)式數(shù)據(jù)import { ref,onMounted } from 'vue';const conut = ref(0);function incr() {conut.value++};onMounted(() => {console.log('組件掛載完畢')})
</script><!-- 編寫html元素 -->
<template><button @click="incr">count : {{conut}}</button>
</template>

4.2.2 在App.vue文件中引入

主要包括兩個地方的引入，第一在script標(biāo)簽中引入

然后在template標(biāo)簽中的合適位置用Api標(biāo)簽導(dǎo)入

最后運行工程，在界面上可以看到自定義的這個Api.vue組件就生效了

五、寫在文末

本文詳細(xì)介紹了VUE3工程化項目的完整過程，希望對看到的同學(xué)有用哦，本篇到此結(jié)束，感謝觀看。