織夢網(wǎng)站問題班級優(yōu)化大師怎么加入班級
目錄
一、前言
二、前置準備
2.1 環(huá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風格
4.1 選項式API風格
4.2 組合式API風格
4.2.1 自定義Vue文件
4.2.2 在App.vue文件中引入
五、寫在文末
一、前言
在實際開發(fā)中，為了快速滿足業(yè)務的需求，開發(fā)者往往不想投入過多的時間在搭建工程、配置環(huán)境上面，于是很多編程語言都逐漸推出合適的工程化項目的腳手架，開發(fā)者只需要按照要求輸入一些命令即可，對于VUE來說也是如此，本文將通過實際案例詳細分享一下VUE3中工程化項目的使用。
二、前置準備
2.1 環(huá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)境變量
使用下面的命令設置一下nodejs環(huán)境變量，方便后續(xù)執(zhí)行相關的npm命令
npm config set prefix ""D:\dev-tools\node\place2.1.4 更換安裝包的源
設置使用下面的命令
npm config set registry http://registry.npm.taobao.org/檢查是否設置成功
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)建項目，先都使用默認的選項即可；
關于創(chuàng)建項目過程中的各個參數(shù)項做如下說明：
-
Project name：------》項目名稱，默認值：vue-project，可輸入想要的項目名稱，此處我寫的是：vueproject1。
-
Add TypeScript? ------》是否加入TypeScript組件？默認值：No。
-
Add JSX Support? ------》是否加入JSX支持？默認值：No。
-
Add Vue Router for Single Page Application development? ------》是否為單頁應用程序開發(fā)添加Vue Router路由管理組件？默認值：No。
-
Add Pinia for state management? ------》是否添加Pinia組件來進行狀態(tài)管理？默認值：No。
-
Add Vitest for Unit testing? ------》是否添加Vitest來進行單元測試？默認值：No。
-
Add an End-to-End Testing Solution?------》是否添加端到端測試？默認值No。
-
Add ESLint for code quality? ------》是否添加ESLint來進行代碼質(zhì)量檢查？默認值：No。
執(zhí)行完成之后，可以看到在當前目錄下就產(chǎn)生了一個項目
目錄結(jié)構(gòu)如下
3.2 項目初始化
在上一步項目創(chuàng)建出來之后，窗口最后給出了下面的提示，即后續(xù)接下來的操作
我們按照提示的命令，依次進行命令執(zhí)行即可
1）執(zhí)行npm install
-
類比maven，即從倉庫拉取項目運行依賴的相關組件包
2）使用vscode打開項目
在當前的窗口下，執(zhí)行 code .命令，將會在vscode中打開項目
對于上面的工程目錄，接下來簡單說明一下各個目錄的作用：
-
jsconfig.json
-
存放Vue項目的配置信息，比如端口號等；
-
-
package.json
-
項目配置文件，包括項目名稱，版本號，依賴包，版本等；
-
-
index.html
-
默認首頁；
-
-
public
-
公共資源目錄
-
-
node_modules
-
下載的第三方包存放目錄；
-
-
src
-
源代碼存放目錄
-
assets：靜態(tài)資源目錄，比如圖片、字體；
-
components：組件目錄，存放通用的組件；
-
App.vue ， 根組件；
-
main.js，入口文件；
-
-
3.3 項目啟動
執(zhí)行下面的命令啟動項目
npm run dev正常啟動的效果如下，默認分配了一個訪問端口
瀏覽器訪問上圖中的地址： http://localhost:5173/ ，看到下面的主頁展示效果
3.4 核心文件說明
如下是默認的工程啟動之后頁面展示依賴的幾個核心文件
-
index.html，展示主頁信息；
-
main.js，入口文件，被index.html所引用；
-
App.vue，根組件；
-
.vue文件是Vue項目中的組件文件，在Vue項目中也稱為單文件組件，Vue的單文件組件會將一個組件的邏輯（JS），模板（HTML）和樣式（CSS）封裝在同一個文件里（.vue）
-
四、VUE兩種不同的API風格
4.1 選項式API風格
在我們剛開始學習VUE的時候，下面這樣的寫法是不是很熟悉，這就是傳統(tǒng)的選項式API的風格
-
選項式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>但是這種寫法也有一個明顯的缺點就是風格比較死板，不夠靈活，所以就出現(xiàn)了下面這種組合式的風格
4.2 組合式API風格
比如像下面這樣的代碼，就屬于組合式API風格的寫法，關于代碼中幾個核心的模塊分別做說明：
-
setup，作為一個關鍵標識，告訴VUE需要做一些處理，讓開發(fā)者可以更加簡潔的使用組合式API；
-
ref()，接收一個內(nèi)部值，返回一個響應的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風格的寫法。
4.2.1 自定義Vue文件
在src目錄下創(chuàng)建一個Api.vue文件，參照組合式API風格的寫法，代碼如下：
<script setup>//聲明響應式數(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標簽中引入
然后在template標簽中的合適位置用Api標簽導入
最后運行工程，在界面上可以看到自定義的這個Api.vue組件就生效了
五、寫在文末
本文詳細介紹了VUE3工程化項目的完整過程，希望對看到的同學有用哦，本篇到此結(jié)束，感謝觀看。