网站首页 > 技术文章 正文
本文节选自霍格沃兹测试学院内部教材
Vue.js 是一套用于构建用户界面的渐进式框架,在目前的前端开放中比较流行的前端框架。
Vue 被设计成自底向上的逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或已有项目整合。但是学习 Vue.js 需要一定的 HTML、CSS、和 JavaScript 基础,所以本章节将不对这些基础内容进行讲解。
Vue的组件化开发
介绍
目前的前端开发中组件化开发成为了潮流,而所谓的组件化开发就是把页面拆分成多个组件,最后将每一个组件进行罗列,形成我们看到的网页。
例如:百度的首页,可以简单的分为以下图中的四个组件
先将这四块的组件开发完成之后,再将这些组件组装成一个完整的页面。
组件开发的优点
- 在维护网页时,不需要在一个大的页面中去修改,而是去对应的组件中去修改数据。
- 组件的资源是独立的,可以提高每个模块的重用性。比如上图的搜素框,在首页使用到了,在其他的地方也要用到同样的搜索框,就可以原封不动的将组件拿过来直接用。
- 组件之间可以相互嵌套。
环境介绍和准备
编译器
这里选用的是 vscode,其他编译器也可,vscode 下载地址:https://code.visualstudio.com/。 1
vscode 插件的选择:
- JavaScript (ES6) code snippets:包含 VSCode 的 ES6 语法中的 JavaScript 代码段。
- Vetur:VSCode 支持 VUE 的工具,有语法高亮、格式化、错误检查、自动完成等功能。
- (推荐)Auto Close Tag:自动添加 HTML/XML 结束标签。
- (推荐)Auto Rename Tag:自动重命名对应的 HTML/XML 标签。
- Highlight Matching Tag:突出显示匹配的开始和结束标签。
这些只是推荐需要用到的插件,可以根据自己的爱好进行选择,其他的插件也可以。
组件库
随着 Vue 的流行,其他公司也形成了自己独有的组件库,比如 ElementUI、BootstrapVue、Vuetify,这些组件可都是可以拿来直接使用的,这里体现出了 Vue 组件化开发的优势。
- ElementUI:Element - The world's most popular Vue UI framework
- BootstrapVue:https://bootstrap-vue.org/
- Vuetify:Vuetify — A Material Design Framework for Vue.js
这里主要使用的组件库是 vuetify。
比如项目中需要一个按钮时,就可以到对用的组件下面找到它,将代码拿出来即可,里面有各式各样风格的组件:Button component — Vuetify
Vue.js安装
1、通过下载 Vue.js 包
使用 <script> 标签进行引入, Vue 会被注册为全局变量。
<script src="../vuejs/vue.js"></script>
2、在线引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
指定一个明确的版本进行使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
这是一个更小的构建,可以带来比开发环境下更快的速度体验,但是在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
npm安装Vue
环境准备:本次使用的 node 和 npm 的版本是
C:\Users\16478>node -v
v12.15.0
C:\Users\16478>npm -v
6.13.4
安装命令
npm install -g @vue/cli
C:\Users\16478>vue --version
@vue/cli 4.5.12
大家先把环境安装好,有的环境后,下一篇我们接着说Vue.js框架的使用哦~
关注我公众号TestingStudio,霍格沃兹的干货都很硬核
- 上一篇: 新手自学前端开发的六个阶段
- 下一篇: 初学Vue(一) -- Vue简单入门
猜你喜欢
- 2024-11-21 初学Vue(一) -- Vue简单入门
- 2024-11-21 新手自学前端开发的六个阶段
- 2024-11-21 Vue Shop Vite:轻量级前端开发的新神器
- 2024-11-21 实战 | 基于Vue语言的企业级前端开发框架Hui的应用研究
- 2024-11-21 前端图形学实战:从零开发几何画板(vue3 + vite版)
- 2024-11-21 循序渐进Vue+Element前端开发(14)—根据ABP后端接口实现前端界面
- 2024-11-21 1.8K Star!Cool-Admin-Vue:AI编码+流程编排,重新定义后台开发
- 2024-11-21 VUE3前端开发入门系列教程三:VITE热更新配置及WSL填坑
- 2024-11-21 后端Springboot+前端Vue开发的角色权限管理系统,源码免费分享
- 2024-11-21 Vue 非常实用的自定义指令
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)