vue3-vite前端快速入門教程 vue-element-admin

Vue3快速入門學習

初始化項目

# 創建項目
npm create vite@latest my-vue-app -- --template vue
# 安裝依賴
npm i
# 運行
npm run dev

模板語法

文本插值?

最基本的數據綁定形式是文本插值，它使用的是“Mustache”語法 (即雙大括號)：

<span>Message: {{ msg }}</span>

雙大括號標簽會被替換為相應組件實例中?msg?屬性的值。同時每次?msg?屬性更改時它也會同步更新。

原始 HTML?

雙大括號會將數據解釋為純文本，而不是 HTML。若想插入 HTML，你需要使用?v-html?指令：

<template>{{ num }}<span>Message: {{ msg }}</span><p>Using text interpolation: {{ html }}</p><p>Using v-html directive: <span v-html="html"></span></p>
</template>
<script setup>
let num = 123
let msg = "(*′▽｀)ノノ"
let html = '<span style="color: red">This should be red.</span>'
</script>

Attribute 綁定

雙大括號不能在 HTML attributes 中使用。想要響應式地綁定一個 attribute，應該使用 v-bind 指令


<div v-bind:id="dynamicId"></div>
?
<input v-bind:value="dynamicId">
let dynamicId=1

v-bind 指令指示 Vue 將元素的 id attribute 與組件的 dynamicId 屬性保持一致。如果綁定的值是 null 或者 undefined，那么該 attribute 將會從渲染的元素上移除。

簡寫

因為 v-bind 非常常用，我們提供了特定的簡寫語法：


<div :id="dynamicId"></div>
?<input v-bind:value="dynamicId"><br><input :value="dynamicId">

開頭為 : 的 attribute 可能和一般的 HTML attribute 看起來不太一樣，但它的確是合法的 attribute 名稱字符，并且所有支持 Vue 的瀏覽器都能正確解析它。此外，他們不會出現在最終渲染的 DOM 中。簡寫語法是可選的，但相信在你了解了它更多的用處后，你應該會更喜歡它。

接下來的指引中，我們都將在示例中使用簡寫語法，因為這是在實際開發中更常見的用法。

布爾型 Attribute

布爾型 attribute 依據 true / false 值來決定 attribute 是否應該存在于該元素上。disabled 就是最常見的例子之一。

v-bind 在這種場景下的行為略有不同：


<button :disabled="isButtonDisabled">Button</button>
?<button :disabled="!isButtonDisabled">Button</button>

當 isButtonDisabled 為真值或一個空字符串 (即 <button disabled="">) 時，元素會包含這個 disabled attribute。而當其為其他假值時 attribute 將被忽略。

動態綁定多個值

如果你有像這樣的一個包含多個 attribute 的 JavaScript 對象：


const objectOfAttrs = {id: 'container',class: 'wrapper'
}
通過不帶參數的 v-bind，你可以將它們綁定到單個元素上：<div v-bind="objectOfAttrs"></div>
?<div v-bind="objectOfAttrs">233</div>

使用 JavaScript 表達式

至此，我們僅在模板中綁定了一些簡單的屬性名。但是 Vue 實際上在所有的數據綁定中都支持完整的 JavaScript 表達式：


{{ number + 1 }}
?
{{ ok ? 'YES' : 'NO' }}
?
{{ message.split('').reverse().join('') }}
?
<div :id="`list-${id}`"></div>
?
let number = 1
let ok = 1
let message = '如何快速進行多任務切換：多任 務切換的關鍵在 于能不能在一 段 時間內集 中火力， 把一件事做好，再去做下一件事。如果已經定下具 體的目標，一切的工具都只是輔助 ，必要時可以全都 舍棄掉。 '
let id = 1

這些表達式都會被作為 JavaScript ，以當前組件實例為作用域解析執行。

在 Vue 模板內，JavaScript 表達式可以被使用在如下場景上：

在文本插值中 (雙大括號)
在任何 Vue 指令 (以 v- 開頭的特殊 attribute) attribute 的值中

僅支持表達式

每個綁定僅支持單一表達式，也就是一段能夠被求值的 JavaScript 代碼。一個簡單的判斷方法是是否可以合法地寫在 return 后面。

因此，下面的例子都是無效的：


<!-- 這是一個語句，而非表達式 -->
{{ var a = 1 }}
?
<!-- 條件控制也不支持，請使用三元表達式 -->
{{ if (ok) { return message } }}

調用函數

可以在綁定的表達式中使用一個組件暴露的方法：


<time :title="toTitleDate(date)" :datetime="date">{{ formatDate(date) }}
</time>

TIP

綁定在表達式中的方法在組件每次更新時都會被重新調用，因此不應該產生任何副作用，比如改變數據或觸發異步操作。

受限的全局訪問

模板中的表達式將被沙盒化，僅能夠訪問到有限的全局對象列表。該列表中會暴露常用的內置全局對象，比如 Math 和 Date。

沒有顯式包含在列表中的全局對象將不能在模板內表達式中訪問，例如用戶附加在 window 上的屬性。然而，你也可以自行在 app.config.globalProperties 上顯式地添加它們，供所有的 Vue 表達式使用。

指令 Directives

指令是帶有 v- 前綴的特殊 attribute。Vue 提供了許多內置指令，包括上面我們所介紹的 v-bind 和 v-html。

指令 attribute 的期望值為一個 JavaScript 表達式 (除了少數幾個例外，即之后要討論到的 v-for、v-on 和 v-slot)。一個指令的任務是在其表達式的值變化時響應式地更新 DOM。以 v-if 為例：

<p v-if="seen">Now you see me</p>

這里，v-if 指令會基于表達式 seen 的值的真假來移除/插入該 <p> 元素。

參數 Arguments

某些指令會需要一個“參數”，在指令名后通過一個冒號隔開做標識。例如用 v-bind 指令來響應式地更新一個 HTML attribute：


<a v-bind:href="url"> ... </a>
?
<!-- 簡寫 -->
<a :href="url"> ... </a>
這里 href 就是一個參數，它告訴 v-bind 指令將表達式 url 的值綁定到元素的 href attribute 上。在簡寫中，參數前的一切 (例如 v-bind:) 都會被縮略為一個 : 字符。另一個例子是 v-on 指令，它將監聽 DOM 事件：<a v-on:click="doSomething"> ... </a>
?
<!-- 簡寫 -->
<a @click="doSomething"> ... </a>

這里的參數是要監聽的事件名稱：click。v-on 有一個相應的縮寫，即 @ 字符。我們之后也會討論關于事件處理的更多細節。

動態參數

同樣在指令參數上也可以使用一個 JavaScript 表達式，需要包含在一對方括號內：


<!--
注意，參數表達式有一些約束，
參見下面“動態參數值的限制”與“動態參數語法的限制”章節的解釋
-->
<a v-bind:[attributeName]="url"> ... </a>
?
<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>

這里的 attributeName 會作為一個 JavaScript 表達式被動態執行，計算得到的值會被用作最終的參數。舉例來說，如果你的組件實例有一個數據屬性 attributeName，其值為 "href"，那么這個綁定就等價于 v-bind:href。

相似地，你還可以將一個函數綁定到動態的事件名稱上：


<a v-on:[eventName]="doSomething"> ... </a>
?
<!-- 簡寫 -->
<a @[eventName]="doSomething">

在此示例中，當 eventName 的值是 "focus" 時，v-on:[eventName] 就等價于 v-on:focus。

動態參數值的限制

動態參數中表達式的值應當是一個字符串，或者是 null。特殊值 null 意為顯式移除該綁定。其他非字符串的值會觸發警告。

動態參數語法的限制

動態參數表達式因為某些字符的緣故有一些語法限制，比如空格和引號，在 HTML attribute 名稱中都是不合法的。例如下面的示例：

<!-- 這會觸發一個編譯器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要傳入一個復雜的動態參數，我們推薦使用計算屬性替換復雜的表達式，也是 Vue 最基礎的概念之一，我們很快就會講到。

當使用 DOM 內嵌模板 (直接寫在 HTML 文件里的模板) 時，我們需要避免在名稱中使用大寫字母，因為瀏覽器會強制將其轉換為小寫：

<a :[someAttr]="value"> ... </a>

上面的例子將會在 DOM 內嵌模板中被轉換為 :[someattr]。如果你的組件擁有 “someAttr” 屬性而非 “someattr”，這段代碼將不會工作。單文件組件內的模板不受此限制。

修飾符 Modifiers

修飾符是以點開頭的特殊后綴，表明指令需要以一些特殊的方式被綁定。例如 .prevent 修飾符會告知 v-on 指令對觸發的事件調用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form>

之后在講到 v-on 和 v-model 的功能時，你將會看到其他修飾符的例子。

最后，在這里你可以直觀地看到完整的指令語法：

指令語法圖

總結

<template><h3>{{ text }}</h3><h3>{{ user }}</h3><!--指令 v-v-model   數據雙向綁定v-if      判斷表達式的值,true則顯示,false則隱藏 -- 控制dom元素的創建和銷毀，應避免頻繁切換狀態v-show    和v-if區別 --  始終會被渲染并保留在dom中，只是css被隱藏了 "display: none;"  一次性的v-for     循環v-bind    綁定屬性或對象v-on      注冊事件--><input v-model="user.age" /><span v-if="user.age == 18">成年人：{{ user.age }}</span><span v-else-if="user.age < 18">未成年</span><span v-else>長大了...</span><span v-show="user.age >= 18">和v-if區別：始終會被渲染并保留在dom中，只是css被隱藏了 "display: none;"</span><!-- <button v-bind:disabled="true">v-bind</button> --><button :disabled="true">v-bind</button><h6v-for="(friends,index) in user.friends":key="index"style="color: rgb(70, 238, 146)">{{ friends.name }} - {{ friends.age }} - {{ index }}</h6><!-- <button v-on:click="addFriend">添加好友</button> --><button @click="addFriend">添加好友</button>&nbsp;&nbsp;&nbsp;<button @click="deleteFriend">刪除</button><p :class="{ active: isActive }">Class 與 Style 綁定</p><div v-for="i in 5">{{i}}</div>
</template><script setup>
import { ref, reactive } from "vue";const text = ref("HelloWorld");
const isActive = ref(true);const user = reactive({name: "小鄭",age: 18,friends: [{name: "小張",age: 18,},{name: "小李",age: 20,},{name: "張三",age: 201,},],
});function addFriend() {user.friends.push({name: "哈基米",age: 18,});
}function deleteFriend() {user.friends.pop()
}
</script><style scoped>
.active {color: rgb(134, 17, 250);
}
</style>

ref 和 reactive 是 Vue 3 中用于管理數據的兩個方法。

ref 用于創建一個可響應的指針。指針可以指向任何值，包括原始值、對象或數組。當指針指向的值發生變化時，Vue 會自動更新指針的值。

reactive 用于創建一個響應式的對象。對象的所有屬性都將成為響應式變量。當對象的屬性發生變化時，Vue 會自動更新該屬性的值。

text?是一個?ref?對象，指向字符串 "HelloWorld"。當字符串發生變化時，text?的值也會發生變化。
isActive?也是一個?ref?對象，指向布爾值 true。當布爾值發生變化時，isActive?的值也會發生變化。
user?是一個?reactive?對象，包含三個屬性：name、age?和?friends。當這些屬性發生變化時，user?對象的值也會發生變化。

使用場景

ref?通常用于以下場景：

需要在組件中使用原始值、對象或數組時。
需要監聽值的變化時。

reactive?通常用于以下場景：

需要在組件中使用對象時。
需要監聽對象屬性的變化時。

導入其他vue組件

<template><HelloWorld />
</template>
<script setup>import HelloWorld from "./components/HelloWorld.vue";
</script>

vue-element-admin介紹

vue-element-admin是一個后臺前端解決方案，它基于vue和element-ui實現。它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后臺產品原型。

目錄結構

一上來就看到那么多文件夾確實頭疼，咱先不管別的，主要先了解標注部分文件

├── build            # 構建相關
├── config           # 配置相關
├── mock             # 項目mock 模擬數據
├── plop-templates       
├── public           # 靜態資源
│   ├── favicon.ico       
│   └── index.html       
├── src              # 源代碼
│   ├── api          # 所有請求
│   ├── assets       # 主題 字體等靜態資源
│   ├── components   # 全局公用組件
│   ├── directive    # 全局指令
│   ├── filters      # 全局 filter
│   ├── icons        # 項目所有 svg icons
│   ├── lang         # 國際化 language
│   ├── layout       # 布局相關
│   ├── mock         # 項目mock 模擬數據
│   ├── router       # 路由
│   ├── store        # 全局 store管理
│   ├── styles       # 全局樣式
│   ├── utils        # 全局公用方法
│   ├── vendor       # 公用vendor
│   ├── views        # view
│   ├── App.vue      # 入口頁面
│   ├── main.js      # 入口 加載組件 初始化等
│   └── permission.js # 權限管理
├── tests            
├── static           # 第三方不打包資源
│   └── Tinymce      # 富文本
├── .babelrc          # babel-loader 配置
├── eslintrc.js       # eslint 配置項
├── .gitignore        # git 忽略項
├── favicon.ico       # favicon圖標
├── index.html        # html模板
├── .env.xxx          
├── .eslintrc.js        
├── .travis.yml         
├── vue.config.js      # vue-cli 配置
└── package.json

安裝

# 克隆項目
git clone https://github.com/PanJiaChen/vue-element-admin.git# 進入項目目錄
cd vue-element-admin# 建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org# 安裝依賴
npm install# 本地開發 啟動項目
npm run dev