【玩轉全棧】--創建一個自己的vue項目

目錄

vue介紹

創建vue項目

vue頁面介紹

element-plus組件庫

啟動項目

vue介紹

????????Vue.js 是一款輕量級、易于上手的前端 JavaScript 框架，旨在簡化用戶界面的開發。它采用了響應式數據綁定和組件化的設計理念，使得開發者可以通過聲明式的方式輕松管理數據和界面之間的關系。Vue 提供了靈活的指令系統、生命周期鉤子和計算屬性等功能，能夠幫助開發者高效地構建交互式應用。通過組件化的結構，Vue 可以將大型應用拆分成多個小模塊，增強了代碼的可維護性和重用性。此外，Vue 還具有非常強大的生態系統，支持狀態管理（Vuex）、路由（Vue Router）以及各種插件，能夠滿足復雜應用的需求。Vue 的學習曲線較為平緩，適合初學者，也能滿足高級開發者對靈活性的需求。通過使用 Vue，開發者可以快速構建現代化、響應迅速的 web 應用。

創建vue項目

首先需要有node環境，要配置也很簡單，在官網一步一步下載即可：

下載 | Node.js 中文網

下載后可以在控制臺檢查是否安裝成功，輸入node，出現版本號則說明安裝成功：

創建項目這里基于vue-vite:

首先，在你需要創建vue項目的文件夾中打開終端，輸入：

npm create vue@latest

vscode中打開終端快捷鍵：

Ctrl + ~

可以看需求自行配置

在vscode中打開剛創建的文件夾

創建好的目錄如下：
D:.
├─.vscode
├─public
└─src
? ? ├─assets
? ? ├─components
? ? │ ?└─icons
? ? ├─router
? ? ├─stores
? ? └─views
PS D:\vue_study\Review>?

查看目錄結構方式(終端輸入)：

# 僅查看文件夾
tree# 查看文件夾下的所有文件
tree /f# 查看指定目錄下的文件結構
tree /f src

Vite官網：https://vitejs.cn

安裝項目后，下一步是安裝依賴：

npm i

文件介紹：

extensions.json? ? 安裝的插件引入項目中

node_modules? ? 安裝依賴后的存儲位置

src? ? 工程文件夾，用于儲存前端工程師編寫的頁面代碼

index.html? ? vue的入口文件

vite.config.ts? ? 安裝插件，配置代理

????????項目的入口文件是 index.html，在該文件中通過引入 main.ts 來啟動 Vue 應用。main.ts 中實例化了 App.vue 組件，并通過 createApp(App) 方法創建了 Vue 應用實例，隨后使用 .mount('#app') 將其掛載到 index.html 中 id="app" 的 DOM 元素上，從而將整個 Vue 應用渲染到頁面上。

vscode一些常用快捷鍵：

快速復制改行到下一行：shift+alter+向上

vscode中打開終端快捷鍵：Ctrl + ~

vue頁面介紹

一般的頁面結構是這樣的

<template></template><script setup lang="ts"></script><style></style>

template里面用來寫html標簽。

<script> 標簽用于引入文件、定義數據和編寫功能等。在 <script> 中加上 setup 是 Vue 3 的簡寫語法，使用它可以避免手動導入并通過 export 暴露內容，從而簡化代碼。lang="ts" 用來指定腳本語言為 TypeScript，這樣就能同時支持 JavaScript 和 TypeScript。如果不寫 lang="ts"，默認只支持 JavaScript。

style里則是用來寫一些css樣式。

App組件連接各組件：

????????一般的項目用一個vue文件實現是不太可能的，或者說可視性不高，這就需要使用多組件，將多個組件連接到App.vue上，每個組件又可以再有子組件，整體vue結構類似于樹結構。

對于新創建的vue文件，在App.vue中進行引入，并注冊，就可以使用標簽了

<template>
<!-- 使用標簽 -->
<Person/>
<Object_/>
</template>
<script lang="ts">import Person from './components/Person.vue'import Object_ from './components/object_.vue'export default{name: 'App',  //組件名components:{Person,Object_},  //注冊}
</script>
<style>
</style>

element-plus組件庫

????????element-plus和Bootstrap一樣，都是高人編寫的一些封裝的組件，在Django中需要下載文件，引入，在vue中就比較簡單，在終端中輸入：

npm install element-plus --save

在index.html文件中加入配置代碼即可：

<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/element-plus"></script>

接下來，就可以ctrl+c+v了。

找到想要的組件

打開開發者工具，右鍵復制outerHTML到自己頁面即可：

?官網如下，可自行學習：安裝 | Element Plus

啟動項目

這里給個示例：

新建new.vue文件：

<template><h2>我的第一個vue項目</h2><div class="el-calendar"><div class="el-calendar__header"><div class="el-calendar__title">2025  January</div><div class="el-calendar__button-group"><div class="el-button-group"><button aria-disabled="false" type="button" class="el-button el-button--small"><!--v-if--><span class="">Previous Month</span></button><button aria-disabled="false" type="button" class="el-button el-button--small"><!--v-if--><span class="">Today</span></button><button aria-disabled="false" type="button" class="el-button el-button--small"><!--v-if--><span class="">Next Month</span></button></div></div></div><div class="el-calendar__body"><table class="el-calendar-table" cellspacing="0" cellpadding="0"><thead><tr><th scope="col">Sun</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th><th scope="col">Sat</th></tr></thead><tbody><tr class="el-calendar-table__row"><td class="prev"><div class="el-calendar-day"><span>29</span></div></td><td class="prev"><div class="el-calendar-day"><span>30</span></div></td><td class="prev"><div class="el-calendar-day"><span>31</span></div></td><td class="current"><div class="el-calendar-day"><span>1</span></div></td><td class="current"><div class="el-calendar-day"><span>2</span></div></td><td class="current"><div class="el-calendar-day"><span>3</span></div></td><td class="current"><div class="el-calendar-day"><span>4</span></div></td></tr><tr class="el-calendar-table__row"><td class="current"><div class="el-calendar-day"><span>5</span></div></td><td class="current"><div class="el-calendar-day"><span>6</span></div></td><td class="current"><div class="el-calendar-day"><span>7</span></div></td><td class="current"><div class="el-calendar-day"><span>8</span></div></td><td class="current"><div class="el-calendar-day"><span>9</span></div></td><td class="current"><div class="el-calendar-day"><span>10</span></div></td><td class="current"><div class="el-calendar-day"><span>11</span></div></td></tr><tr class="el-calendar-table__row"><td class="current"><div class="el-calendar-day"><span>12</span></div></td><td class="current"><div class="el-calendar-day"><span>13</span></div></td><td class="current"><div class="el-calendar-day"><span>14</span></div></td><td class="current"><div class="el-calendar-day"><span>15</span></div></td><td class="current"><div class="el-calendar-day"><span>16</span></div></td><td class="current"><div class="el-calendar-day"><span>17</span></div></td><td class="current"><div class="el-calendar-day"><span>18</span></div></td></tr><tr class="el-calendar-table__row"><td class="current"><div class="el-calendar-day"><span>19</span></div></td><td class="current"><div class="el-calendar-day"><span>20</span></div></td><td class="current"><div class="el-calendar-day"><span>21</span></div></td><td class="current"><div class="el-calendar-day"><span>22</span></div></td><td class="current"><div class="el-calendar-day"><span>23</span></div></td><td class="current"><div class="el-calendar-day"><span>24</span></div></td><td class="current"><div class="el-calendar-day"><span>25</span></div></td></tr><tr class="el-calendar-table__row"><td class="current"><div class="el-calendar-day"><span>26</span></div></td><td class="current"><div class="el-calendar-day"><span>27</span></div></td><td class="current"><div class="el-calendar-day"><span>28</span></div></td><td class="current"><div class="el-calendar-day"><span>29</span></div></td><td class="current is-selected is-today"><div class="el-calendar-day"><span>30</span></div></td><td class="current"><div class="el-calendar-day"><span>31</span></div></td><td class="next"><div class="el-calendar-day"><span>1</span></div></td></tr></tbody></table></div></div>
</template>
<script setup></script><style></style>

App.vue:

<template><!-- 使用標簽 -->
<new/>
</template><script lang="ts">import New from './components/new.vue'export default{name: 'App',  //組件名components:{New},  //注冊}
</script><style></style>

打開終端，輸入：