网站首页 > 技术文章 正文
之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现方式。采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变,以及需要接触更多的相关知识,本系列随笔基于循序渐进的学习研究方式,对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍,并结合我对BS前端已有的框架功能,进行两者的融合。本篇随笔主要介绍开发环境的准备工作,包括需要准备好相关的开发工具,插件辅助等,以及对开发保存的自动修正处理,调试的配置的内容等。
1、开发所需的软件环境
有别于之前的Asp.net的开发,纯前端的开发,一般不会再采用笨重的VS进行前端的开发,而改用VS Code或者WebStorm等轻型的开发工具来进行前端代码的开发和维护,虽然是轻型开发工具,不过功能也是非常强大的,而且开发环境可以在Windows系统,也可以在Mac系统等,实现多平台的开发环境。
1)VS code的安装
VS Code(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器。几乎完美的编辑器。
官网:https://code.visualstudio.com
文档:https://code.visualstudio.com/docs
源码:https://github.com/Microsoft/vscode
VS Code的界面大概如下所示,一般安装后,如果为英文界面,则安装它的中文包即可。
VS Code安装后,我们一般还需要搜索安装一些所需要的插件辅助开发。安装插件很简单,在搜索面板中查找到后,直接安装即可。
一般我们需要安装这些vs code 插件:
Vetur
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
ESLint
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好,安装后即可使用,对于代码格式与规范的细节还可以自定义,并且一个团队可以共享同一个配置文件,这样一个团队所有人写出的代码就可以使用同一个代码规范,在代码签入前每个人可以完成自己的代码规范检查。
VS Code - Debugger for Chrome 结合Chrome进行调试的插件
此工具简直就是前端开发必备,将大大地改变你的开发与调试模式。
以往的前端调试,主要是 JavaScript 调试,你需要在 Chrome 的控制台中找到对应代码的部分,添加上断点,然后在 Chrome 的控制台中单步调试并在其中查看值的变化。
而在使用了 Debugger for Chrome 后,当代码在 Chrome 中运行后,你可以直接在 VSCode 中加上断点,点击运行后,Chrome 中的页面继续运行,执行到你在 VSCode 中添加的断点后,你可以直接在 VSCode 中进行单步调试。
Beautify
Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整,代码强迫症必备,较好的代码格式在后期维护以及他人阅读时都会有很多的便利。
2) 安装node开发环境
利用VS Code开发,我们很多时候,需要使用命令行npm进行相关模块的安装,这些需要node环境的支持,安装好node后,npm也就一起安装好了。
node 下载:https://nodejs.org/en/
安装后,我们可以通过命令行或者VS Code 里面的Shell 进行查看node 和npm 的版本号了
node -v
npm -v
3)vue脚手架的安装
Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。
全局安装:npm install vue-cli -g (全局卸载:npm uninstall vue-cli -g)
4)Vue DevTool Chrome插件的安装
这个插件也是开发Vue必备的Chrome插件,一般没有外网,不能直接在Chrome的插件官网上进行安装,而通过GitHub下载进行编译在安装又显得太过麻烦,后来在一个网站上下载安装成功。
https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd
2、开发环境的配置使用
对于 Vetur 等代码自动修正处理,我们需要在VS Code里面进行设置好,在【文件】【首选项】【设置】中,然后单击Settings.json进行编辑即可。
我这里主要设置保存代码后能够对代码进行缩进排版的常规的处理
调试环境的处理,为了结合Chrome调试VScode,我们需要安装插件Debugger for Chrome ,然后进行Vue项目代码的设置处理即可。
打开项目根目录的Vue.Config.js文件,在合适的位置,加入 productionSourceMap: true 以及 devtool: 'source-map' 如下所示
然后再在运行面板里面,进行调试参数设置的处理,如下所示
指定这些设置后,我们就可以以调试模式进行调试VS Code里面的代码了,代码只需要设置对应的断点即可跟踪对象的数据。
调试前,记得先使用npm run dev 启动项目,项目完全启动后会在Chrome浏览器打开项目地址,再使用F5进行项目代码的调试。
Vue DevTools也是用来跟踪Vue项目路由、状态等信息的,可以信息很好的跟踪处理。
为了点亮Chrome浏览器上面Vue DevTools图标,我们可以在Vue项目的main.js里面加入一行代码。
Vue.config.devtools = process.env.NODE_ENV === 'development'
如下界面所示
这篇随笔作为一个简单的开篇,主要介绍VS Code环境的安装,以及对应插件的配置,并联合Chrome如何实现项目代码的调试处理。
原文地址:https://www.cnblogs.com/wuhuacong/p/12955579.html
猜你喜欢
- 2024-11-21 初学Vue(一) -- Vue简单入门
- 2024-11-21 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- 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开发的角色权限管理系统,源码免费分享
你 发表评论:
欢迎- 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)
本文暂时没有评论,来添加一个吧(●'◡'●)