項目目錄?
啟動vue項目
npm run serve
1.vue.config.js文件
(CLI通過vue-cli-serve啟動項目，解析配置配置文件vue-condig-js）
// vue.config.js
//引入path板塊，這是Node.js的一個內置模塊，用于處理文件路徑，這里引用它是為了方便后面設置路徑
const path = require('path');//便于處理文件路徑
//module.exports 用于導出模塊的內容
module.exports = {
? //用于自定義Webpack的配置
? configureWebpack: {
? ? //可以為路徑設置別名
? ? resolve: {
? ? ? alias: {
? ? ? ? // 設置 '@' 別名指向 'src' 文件夾，@/components 就表示 src/components
? ? ? ? '@': path.resolve(__dirname, 'src')
? ? ? }
? ? }
? },
? //用于配置開發服務器
? devServer: {
? ? host: '0.0.0.0', // 允許外部訪問
? ? port: 8080 // 設置開發服務器端口
? }
};
2.public/index.html
（項目入口文件，webpack會將打包的js文件注入到index-html文件內）
<!-- 項目入口的HTML文件，webpack會將打包后的javascript文件注入到這個html文件內 -->
<!DOCTYPE html>
<!-- html的根元素 -->
<html lang="">
? <!-- 包含文檔的元數據 -->
? <head>
? ? <!-- 設置字符編碼為utf-8支持多種語言 -->
? ? <meta charset="utf-8">
? ? <!-- 提示ie瀏覽器以最高版本的渲染引擎渲染頁面 -->
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <!-- 設置視圖，使得頁面在瀏覽器上面可以自適應頁面 -->
? ? <meta name="viewport" content="width=device-width,initial-scale=1.0">
? ? <!-- 目的是為了設置網頁圖標，綠色的那個vue,這里的BASE_URL是webpack的環境變量，指向公共資源favicon-ico -->
? ? <link rel="icon" href="<%= BASE_URL %>favicon.ico">
? ? <!-- 通過webpack的htmlWebpackPlugin插件動態注入標題 -->
? ? <title><%= htmlWebpackPlugin.options.title %></title>
? </head>
? <!-- 包含頁面的主題內容 -->
? <body>
? ? <!-- 如果當前瀏覽器禁用js，就會顯示如下部分 -->
? ? <noscript>
? ? ? <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
? ? </noscript>
? ? <!-- 用于掛載vue應用的容器，將app的內容渲染到此處 -->
? ? <div id="app"></div>
? ? <!-- built files will be auto injected -->
? ? ?<!-- 打包后的Javascrip文件會自動注入此處 -->
? </body>
</html>
3.src/App-vue?
（檔 Vue 應用掛載到 index.html 中的 <div id="app"></div> 元素上的時候就會開始啟動vue項目，其中App.vue是根組件）
<!-- 這是vue應用的主組件，其他的組件都會嵌套到這個組件內，檔主html文件運行之后，-->
?<!-- app掛載到html上面之后，就會開始啟動vue項目，從這里開始 -->
?<!-- template部分用于定義組件的html（即頁面上顯示的內容） -->
<template>
? <!-- app這是一個容器元素，整個組件的內容都包裹在這個div內部，掛載在main.js的文件中的app上 -->
? <div id="app">
? ? <!-- 這是vue的插值語法用于動態綁定數據 -->
? ? <h1>{{ message }}</h1>
? ? <!-- 這是一個自定義組件HelloWorld的用法 -->
? ? <HelloWorld msg="Welcome to Your Vue.js App"/>
? ? <!-- 是vue router提供的內容，用于顯示當前路由對于的組件內容，內部放置了兩個導航連接 -->
? ? <router-view>
? ? ? <router-link to="/">Home</router-link>
? ? ? <router-link to="/About">About</router-link>
? ? </router-view>
? </div>
</template>
<!-- 部分用于定義組件的邏輯，包括數據、方法、生命周期等。 -->
<script>
// 從 ./components/HelloWorld.vue 文件中導入 HelloWorld 組件，這樣就可以在當前組件中使用HelloWorld
import HelloWorld from './components/HelloWorld.vue'
// 定義并導出當前組件的配置對象
export default {
? name: 'App',
? data() {
? ? return {
? ? ? message: "Hello, Vue!app通過message這里是我添加的vue部分" // 定義響應式數據
? ? };
? },
? // 注冊子組件，使其可以在模板中使用
? components: {
? ? HelloWorld
? }
}
</script>
<!-- 部分用于定義組件的CSS樣式 -->
<style>
#app {
? /* 設置字體 */
? font-family: Avenir, Helvetica, Arial, sans-serif;
? /* 用于優化字體的抗鋸齒效果 */
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
? /* 將文本居中對齊 */
? text-align: center;
? /* 設置文本顏色。 */
? color: #47812b;
? /* 設置頂部外邊距 */
? margin-top: 60px;
}
</style>
4.src/router/index.js?
// 路由配置文件
// 需要提前安裝vue-router 終端輸入命令 npm install vue-router
// 導入必要的模塊，其中createRouter和createWebHistory是從vue-router包中導入的，
// 其中createRouter用于創建一個路由實例
// createWebHistory是一種路由模式，用于實現基于瀏覽器歷史記錄的路由導航
import { createRouter, createWebHistory } from 'vue-router';
// 從../views/Home.vue 文件中導入 Home 組件
import Home from '../views/Home.vue';
// 包含了路由規則的數組，每個路由規則定義了路徑path和對應的組件component
const routes = [
? {
? ? path: '/',
? ? name: 'Home',
? ? component: Home
? }
];
// 用于創建一個路由實例，接受一個配置對象
const router = createRouter({
? // 指定路由的模式。在這里，使用了 createWebHistory()，表示使用瀏覽器的歷史記錄模式
? history: createWebHistory(),
? // 提供路由規則數組，定義了路徑和組件的映射關系
? routes
});
// 導出路由實例
export default router;
5.頁面級組件Home.vue和About.vue
(Vue Router 會根據當前 URL 加載對應的組件，并將其渲染到 <router-view> 中)
5-1? Home.vue
<template>
? ? <div>
? ? ? <h1>這里是Home頁面級別Page</h1>
? ? </div>
? </template>
? <!-- 定義組件邏輯 -->
? <script>
// export default這是 ES6 的模塊導出語法，用于將當前組件定義導出，使其可以在其他地方被導入和使用。
// 在 Vue 中，每個 .vue 文件都是一個獨立的模塊
? ?export default {
? ? name: 'Home' ? ? ? ? //定義組件名為Home
? };
? </script>
5-2? About.vue
?<template>
? ? <div>
? ? ? <h1>About Page</h1>
? ? </div>
? </template>
? <script>
? export default {
? ? name: 'About'
? };
? </script>
6. src/assets/
（用于放置一些靜態資源）
7.components
（用于放置一些可復用的子組件）?
8.views
（用于放置一些頁面級組件，通常是路由的直接目標）
特性 src/componentssrc/views用途 可復用的子組件 頁面級組件 依賴性 獨立，不依賴于頁面邏輯 依賴于路由配置 嵌套關系 可以嵌套在其他組件或頁面中 組合多個子組件構建頁面 路由管理 不直接參與路由管理 直接作為路由目標被渲染 示例 按鈕、輸入框、導航欄等 首頁、關于頁、詳情頁等
other解釋
?什么是，en或zh-CN
<html lang="en"> <!-- 頁面內容為英語 -->
<html lang="zh-CN"> <!-- 頁面內容為簡體中文 -->
文檔的元數據
關于文檔的信息，用于描述HTML文檔的屬性，但不會直接顯示在網頁上。它們通常放在HTML的
<head>標簽中，常見的元數據包括：
<meta charset="utf-8">：指定字符編碼，確保網頁支持多種語言。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：設置網頁在移動設備上的顯示方式，確保自適應屏幕。
<meta name="description" content="網頁描述">：提供網頁的簡短描述，用于搜索引擎結果頁面（SERP）。
<title>：設置網頁標題，顯示在瀏覽器標簽頁上。
<link>：用于引入外部資源，如CSS文件、圖標等。
<script>：用于引入JavaScript文件。這些元數據幫助瀏覽器、搜索引擎或其他工具更好地理解和處理網頁內容。
BASE_URL指向公共資源
<div id="app"></div>?掛載應用解釋
html文件
<div id="app">
? <h1>{{ message }}</h1>
</div>在Vue實例中：
data() {
? return {
? ? message: "Hello, Vue!"
? };
}最終，瀏覽器會顯示：
<div id="app">
? <h1>Hello, Vue!</h1>
</div>
在 Webpack 的構建流程中，
dist文件夾（或你指定的其他輸出目錄）是專門用于存放構建后的文件的地方。這些文件是經過 Webpack 打包、優化后的最終產物，可以直接部署到生產環境中。以下是將文件輸出到dist文件夾的原因：分離開發環境和生產環境?
什么是DOM元素？
DOM（Document Object Model，文檔對象模型）是HTML文檔的編程接口。它將HTML文檔表示為一個由節點和對象組成的樹狀結構，允許開發者通過JavaScript動態訪問和操作文檔內容
在Vue.js中，Vue接管了DOM操作，開發者不需要直接操作DOM，而是通過聲明式的數據綁定來實現頁面的更新。
