目录
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@latestvscode中打开终端快捷键：
Ctrl + ~可以看需求自行配置
在vscode中打开刚创建的文件夹
创建好的目录如下：
D:.
├─.vscode
├─public
└─src
├─assets
├─components
│ └─icons
├─router
├─stores
└─views
PS D:\vue_study\Review>
查看目录结构方式(终端输入)：
# 仅查看文件夹
tree
# 查看文件夹下的所有文件
tree /f
# 查看指定目录下的文件结构
tree /f srcVite官网：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>打开终端，输入：
npm run dev
打开页面如下：
感谢您的三连！！！
