前端進階之路-從傳統前端到VUE-JS（第二期-VUE-JS框架結構分析）

經過上期內容的學習，我們已經可以構建一個VUE-CLI框架了，接下來我們分析一下這個框架，畢竟知己知彼，百戰百勝

我們創建完成后可以看到以下內容

接下來我們分析一下他的文件結構

node_modules用于存放項目所依賴的第三方模塊和包。當使用 Vue3-CLI 創建項目并安裝依賴后，這些依賴都會被放置在此文件夾中。比如 Vue3 框架本身、各種 UI 組件庫、工具庫等。public存放靜態資源文件，如 HTML 文件、圖片、字體等。這些文件在構建項目時會被直接復制到輸出目錄中，不會被 Vue 項目構建系統處理。通常，index.html 是項目的入口 HTML 文件，在這里可以進行一些全局的配置和引入外部資源。src是項目的核心源代碼目錄。assets ：存放靜態資源，如圖片、樣式表等，在項目中可以通過相對路徑或別名進行引用。components ：存放項目的各種組件，每個組件通常對應一個?.vue 文件，包含模板、腳本和樣式三部分，實現了視圖和邏輯的分離。views ：存放頁面級的組件，通常每個頁面對應一個?.vue 文件，這些文件會作為路由的對應組件進行展示。router ：存放路由相關的配置文件，定義了應用的路由規則，包括路徑、對應的組件等信息。store ：用于管理應用的狀態，通常使用 Vuex 或 Pinia 等狀態管理庫。在這個目錄下可以定義全局的狀態、 mutations、actions 和 getters 等。api ：存放與后端接口交互的代碼，封裝了對后端 API 的請求，方便在組件中調用獲取數據。utils ：存放項目的工具函數和公共方法，可以被項目中的多個組件或模塊復用。.browserslistrc用于配置目標瀏覽器的范圍，指定項目所支持的瀏覽器及其版本。這有助于在構建項目時，根據所支持的瀏覽器對代碼進行相應的兼容性處理，確保項目在不同瀏覽器中的正常運行。.eslintrc.jsESLint 的配置文件，用于定義代碼的檢查規則和風格指南。通過配置 ESLint，可以自動檢查代碼中的潛在問題、語法錯誤以及是否符合團隊約定的代碼風格，有助于提高代碼的質量和可維護性。.gitignore指定哪些文件或目錄不應被 Git 版本控制系統跟蹤。例如，node_modules 目錄、編譯后的文件、環境配置文件等，避免將這些不必要的文件提交到版本庫中。babel.config.jsBabel 的配置文件，用于將 ES6 ?+語法轉譯為向后兼容的 JavaScript 語法。它確保項目中的代碼能夠在不同環境下正常運行，使得開發者可以使用較新的 JavaScript 特性編寫代碼，而不用擔心兼容性問題。package-lock.json 和?package.jsonpackage.json ：包含了項目的元數據，如項目名稱、版本、描述、作者、依賴等信息。同時，還定義了項目的腳本命令，如啟動開發服務器、構建生產環境代碼等。它是項目配置的核心文件，用于管理項目的依賴和腳本。package-lock.json ：由 npm 自動生成，用于鎖定項目中各個依賴的精確版本，確保在不同的開發環境和部署環境中，安裝的依賴版本一致，避免因依賴版本差異導致的問題。README.md項目的說明文件，通常包含項目的基本信息、安裝步驟、使用方法、項目特點等內容。它為開發者和使用者提供了項目的快速入門和參考資料。tsconfig.json（如果項目使用 TypeScript）TypeScript 的配置文件，用于定義 TypeScript 編譯器的選項和項目中的 TypeScript 文件的編譯規則。可以指定目標 JavaScript 版本、模塊系統、類型檢查的嚴格程度等，以滿足項目對 TypeScript 的不同需求。vue.config.jsVue CLI 的配置文件，用于對 Vue CLI 的構建行為進行定制化配置。可以配置構建路徑、環境變量、插件選項、頁面入口等，以適應項目的特殊需求。

可以看到很復雜，但是我們的目標是逐步熟練，以了解一些常用的vue知識為主

本期內容著重常用的文件進行介紹

App.vue

（沒有找到的話打開src文件夾看看）

（以下內容.vue文件都會有，只是以App.vue方便看初始內容的示例）

<template>?部分

這是?App.vue?的 HTML 模板部分，定義了應用的頁面結構。

它通常包含應用的主要布局，如?header、main、footer?等通用部分，這些部分可以為整個應用提供統一的外觀和導航結構。

<router-view/>?是一個特殊的元素，用于 Vue Router 進行路由切換時渲染對應的組件。當用戶訪問不同的路由時，對應的組件會在這個位置顯示。

還可以引入自己定義的子組件，如示例中的?<MyComponent/>，子組件會在這個位置被渲染。

（實際上當作HTML的本體加拓展就行，看官方術語的話很晦澀）

<script>?部分

這里是組件的 JavaScript 邏輯部分，包含了組件的配置選項。

name?：定義了組件的名稱，通常與文件名相同，方便調試和引用。

components?：用于注冊子組件，將子組件導入后在這里進行注冊，這樣在模板中才能使用這些子組件。

data?：定義了組件的響應式數據，這些數據可以用于模板中的動態綁定，例如在頁面上顯示應用的標題等信息。當數據發生變化時，頁面上綁定該數據的部分會自動更新。

methods?：定義了組件的方法，這些方法可以被模板中的事件綁定調用，用于處理用戶的交互行為，如點擊按鈕觸發的方法等。

created?：是一個生命周期鉤子，在組件實例創建完成后會立即調用。可以在這個鉤子中進行一些初始化操作，如發送請求獲取數據等。

（在初始內容中沒有，在之后我們會有示例）

<style>?部分

這里是組件的樣式部分，用于定義應用的樣式。

可以為整個應用的頁面元素定義樣式，如字體、顏色、布局等。

還可以為子組件定義樣式，這些樣式會作用于子組件的對應元素，從而實現對整個應用的樣式控制。

（對于不了解VUE的朋友來說，在實際使用中概念和CSS差不多）

比如這個示例

<template><div id="app"><header><h1>我的 Vue 應用</h1></header><main><router-view /></main><footer><p>&copy; 2024 我的 Vue 應用</p></footer><MyComponent /></div></template><script>import MyComponent from './components/MyComponent.vue'export default {name: 'App',components: {MyComponent},data() {return {appTitle: '我的 Vue 應用'}},methods: {appMethod() {console.log('App method called')}},created() {console.log('App component created')}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}header {background-color: #42b983;padding: 20px;margin-bottom: 20px;}footer {background-color: #42b983;padding: 20px;margin-top: 20px;}</style>

事實上，在實際使用過程中以上的內容可能不會全部都用，但是仍然值得了解以便于后期拓展

接下來了解初始顯示內容

我們啟動vue框架看看

打開pakeage.json文件我們可以看到有調試的按鈕

點擊后我們選擇sever vue-cli-service serve即可

等一會兒后可以看到端口，我們用谷歌瀏覽器打開

可以看到成功啟動

我們再來分析一下顯示頁面的這幾個文件

在這兩個文件中HomeView和AboutView分別代表著上面的Home和About

我們再來通過全面的示例分析一下（當然了，不可能直接就能用的，畢竟不是傳統前端，有一定的規范性）

HomeView.vue

<template><div class="home"><h1>首頁</h1><p>歡迎來到我的 Vue 應用首頁！</p><!-- 可以在這里添加更多內容，比如輪播圖、產品列表等 --><div v-for="(item, index) in items" :key="index" class="item"><h3>{{ item.title }}</h3><p>{{ item.description }}</p></div></div></template><script>export default {name: "HomeView",data() {return {items: [{ title: "項目1", description: "這是項目1的描述" },{ title: "項目2", description: "這是項目2的描述" },{ title: "項目3", description: "這是項目3的描述" },],};},created() {console.log("HomeView component created");// 這里可以添加頁面初始化時的邏輯，比如獲取數據},methods: {// 可以在這里定義方法，處理頁面上的交互邏輯},};</script><style scoped>.home {font-family: "Avenir", Helvetica, Arial, sans-serif;text-align: center;padding: 20px;}.item {margin: 20px 0;padding: 10px;border: 1px solid #ddd;border-radius: 5px;}</style>

<template>

定義首頁的 HTML 結構，比如標題、段落、列表等內容。

使用?v-for?指令循環顯示數據。

<script>

定義組件的名稱和數據。

數據?items?是一個數組，用于存儲首頁要展示的項目信息。

created?生命周期鉤子在組件創建后執行，可以在這里執行一些初始化操作。

<style scoped>

為首頁定義樣式，scoped?使這些樣式只作用于當前組件。

（實際上只是預先了解一些專業術語而已，本期內容主要以熟悉為主）

AboutView.vue

<template><div class="about"><h1>關于</h1><p>這是一個關于 Vue 應用的頁面。</p><p>應用由以下部分組成：</p><ul><li v-for="(part, index) in parts" :key="index">{{ part }}</li></ul></div></template><script>export default {name: "AboutView",data() {return {parts: ["Vue.js", "Vue Router", "Vuex", "Vue CLI"],};},created() {console.log("AboutView component created");},};</script><style scoped>.about {font-family: "Avenir", Helvetica, Arial, sans-serif;text-align: center;padding: 20px;}ul {list-style-type: none;padding: 0;}li {margin: 10px 0;padding: 5px;border-bottom: 1px solid #eee;}</style>

<template>

定義關于頁面的 HTML 結構，包括標題、段落和列表等內容。

使用?v-for?指令循環顯示應用的組成部分。

<script>

定義組件的名稱和數據。

數據?parts?是一個數組，用于存儲應用的組成部分。

<style scoped>

為關于頁面定義樣式，scoped?使這些樣式只作用于當前組件。

分析完以后，那他們有什么用呢

HomeView.vue

通常用于展示首頁內容，如歡迎信息、最新動態、產品列表等。

是用戶進入應用后首先看到的頁面，可以包含應用的主要功能入口。

AboutView.vue

用于展示應用的背景信息、開發團隊、使用技術等內容。

通常是輔助頁面，為用戶提供多種信息。

（當然了，之后可以自己更改，畢竟人是活的）

那么問題來了，如果我有找到自己喜歡的東西，改怎么才能用呢

我們再來了解框架的結構

在 Vue 項目中，HomeView.vue?和?AboutView.vue?通常位于?src/views?目錄下。這個目錄通常用于存放應用的視圖組件（即頁面級別的組件）。在 Vue Router 的配置中，它們會被注冊為路由對應的組件。

我們在?src/router/index.js?中配置好路由

import { createRouter, createWebHistory } from "vue-router";import HomeView from "../views/HomeView.vue";import AboutView from "../views/AboutView.vue";const routes = [{path: "/",name: "home",component: HomeView,},{path: "/about",name: "about",component: AboutView,},];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,});export default router;

然后在App.vue中更改template以更改路由

<template><div id="app"><header><nav><router-link to="/">首頁</router-link> |<router-link to="/about">關于</router-link></nav></header><main><router-view /></main></div></template><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}nav {padding: 30px;}nav a {font-weight: bold;color: #2c3e50;}nav a.router-link-exact-active {color: #42b983;}</style>

看一下結果