【玩转全栈】--创建一个自己的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>

打开终端，输入：