网站如何做反爬,博山专业网站优化哪家好,平面设计优秀作品解析,专业做简历用什么软件目录 vue介绍 创建vue项目 vue页面介绍 element-plus组件库 启动项目 vue介绍 Vue.js 是一款轻量级、易于上手的前端 JavaScript 框架#xff0c;旨在简化用户界面的开发。它采用了响应式数据绑定和组件化的设计理念#xff0c;使得开发者可以通过声明式的方式轻松管理数据和… 目录 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 vuelatest
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 中 idapp 的 DOM 元素上从而将整个 Vue 应用渲染到页面上。 vscode一些常用快捷键
快速复制改行到下一行shiftalter向上
vscode中打开终端快捷键Ctrl ~ vue页面介绍
一般的页面结构是这样的
template/templatescript setup langts/scriptstyle/style
template里面用来写html标签。
script 标签用于引入文件、定义数据和编写功能等。在 script 中加上 setup 是 Vue 3 的简写语法使用它可以避免手动导入并通过 export 暴露内容从而简化代码。langts 用来指定脚本语言为 TypeScript这样就能同时支持 JavaScript 和 TypeScript。如果不写 langts默认只支持 JavaScript。
style里则是用来写一些css样式。 App组件连接各组件 一般的项目用一个vue文件实现是不太可能的或者说可视性不高这就需要使用多组件将多个组件连接到App.vue上每个组件又可以再有子组件整体vue结构类似于树结构。
对于新创建的vue文件在App.vue中进行引入并注册就可以使用标签了
template
!-- 使用标签 --
Person/
Object_/
/template
script langtsimport Person from ./components/Person.vueimport Object_ from ./components/object_.vueexport default{name: App, //组件名components:{Person,Object_}, //注册}
/script
style
/style element-plus组件库 element-plus和Bootstrap一样都是高人编写的一些封装的组件在Django中需要下载文件引入在vue中就比较简单在终端中输入
npm install element-plus --save
在index.html文件中加入配置代码即可
link relstylesheet href//unpkg.com/element-plus/dist/index.css /
script src//unpkg.com/vue3/script
script src//unpkg.com/element-plus/script
接下来就可以ctrlcv了。
找到想要的组件 打开开发者工具右键复制outerHTML到自己页面即可 官网如下可自行学习安装 | Element Plus 启动项目
这里给个示例
新建new.vue文件
templateh2我的第一个vue项目/h2div classel-calendardiv classel-calendar__headerdiv classel-calendar__title2025 January/divdiv classel-calendar__button-groupdiv classel-button-groupbutton aria-disabledfalse typebutton classel-button el-button--small!--v-if--span classPrevious Month/span/buttonbutton aria-disabledfalse typebutton classel-button el-button--small!--v-if--span classToday/span/buttonbutton aria-disabledfalse typebutton classel-button el-button--small!--v-if--span classNext Month/span/button/div/div/divdiv classel-calendar__bodytable classel-calendar-table cellspacing0 cellpadding0theadtrth scopecolSun/thth scopecolMon/thth scopecolTue/thth scopecolWed/thth scopecolThu/thth scopecolFri/thth scopecolSat/th/tr/theadtbodytr classel-calendar-table__rowtd classprevdiv classel-calendar-dayspan29/span/div/tdtd classprevdiv classel-calendar-dayspan30/span/div/tdtd classprevdiv classel-calendar-dayspan31/span/div/tdtd classcurrentdiv classel-calendar-dayspan1/span/div/tdtd classcurrentdiv classel-calendar-dayspan2/span/div/tdtd classcurrentdiv classel-calendar-dayspan3/span/div/tdtd classcurrentdiv classel-calendar-dayspan4/span/div/td/trtr classel-calendar-table__rowtd classcurrentdiv classel-calendar-dayspan5/span/div/tdtd classcurrentdiv classel-calendar-dayspan6/span/div/tdtd classcurrentdiv classel-calendar-dayspan7/span/div/tdtd classcurrentdiv classel-calendar-dayspan8/span/div/tdtd classcurrentdiv classel-calendar-dayspan9/span/div/tdtd classcurrentdiv classel-calendar-dayspan10/span/div/tdtd classcurrentdiv classel-calendar-dayspan11/span/div/td/trtr classel-calendar-table__rowtd classcurrentdiv classel-calendar-dayspan12/span/div/tdtd classcurrentdiv classel-calendar-dayspan13/span/div/tdtd classcurrentdiv classel-calendar-dayspan14/span/div/tdtd classcurrentdiv classel-calendar-dayspan15/span/div/tdtd classcurrentdiv classel-calendar-dayspan16/span/div/tdtd classcurrentdiv classel-calendar-dayspan17/span/div/tdtd classcurrentdiv classel-calendar-dayspan18/span/div/td/trtr classel-calendar-table__rowtd classcurrentdiv classel-calendar-dayspan19/span/div/tdtd classcurrentdiv classel-calendar-dayspan20/span/div/tdtd classcurrentdiv classel-calendar-dayspan21/span/div/tdtd classcurrentdiv classel-calendar-dayspan22/span/div/tdtd classcurrentdiv classel-calendar-dayspan23/span/div/tdtd classcurrentdiv classel-calendar-dayspan24/span/div/tdtd classcurrentdiv classel-calendar-dayspan25/span/div/td/trtr classel-calendar-table__rowtd classcurrentdiv classel-calendar-dayspan26/span/div/tdtd classcurrentdiv classel-calendar-dayspan27/span/div/tdtd classcurrentdiv classel-calendar-dayspan28/span/div/tdtd classcurrentdiv classel-calendar-dayspan29/span/div/tdtd classcurrent is-selected is-todaydiv classel-calendar-dayspan30/span/div/tdtd classcurrentdiv classel-calendar-dayspan31/span/div/tdtd classnextdiv classel-calendar-dayspan1/span/div/td/tr/tbody/table/div/div
/template
script setup/scriptstyle/style
App.vue:
template!-- 使用标签 --
new/
/templatescript langtsimport New from ./components/new.vueexport default{name: App, //组件名components:{New}, //注册}
/scriptstyle/style
打开终端输入
npm run dev打开页面如下 感谢您的三连
