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

打开终端,输入:

复制代码
npm run dev

打开页面如下:

感谢您的三连!!!

相关推荐
江号软件分享1 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长10 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商18 分钟前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
江号软件分享19 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM26 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang