之前一直采用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如何实现项目代码的调试处理。

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  2. 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  3. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  4. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  5. 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

    我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...

  6. 循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

    在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...

  7. 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  8. 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...

  9. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  10. 循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理>中介绍了用户管理模块的内容,包括用户列表的展示,各种查看.编辑.新增对话框的界面处理和后台数据处 ...

随机推荐

  1. 快速上手最新的 Vue CLI 3

    翻译:疯狂的技术宅 原文:blog.logrocket.com/getting-sta- 概要:本文将指导你快速上手 Vue CLI 3,包括最新的用户图形界面和即时原型制作功能的使用步骤. 介绍 尤 ...

  2. BootStrap的栅格式布局

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  3. zabbix3.x.x升级教程

    1:停掉正在运行的zabbix服务,确保没有新数据写入数据库. /etc/init.d/zabbix_server stop 2:备份原zabbix的数据库数据,以及相关文件. mysqldump - ...

  4. Eclipse新建类的时候如何自动添加注释(作者,时间,版本等信息)

    为什么80%的码农都做不了架构师?>>>   方法一:Eclipse中设置在创建新类时自动生成注释 windows–>preference  Java–>Code Sty ...

  5. Visual Studio Code插件安装步骤

    1.进入扩展视图视图安装或卸载(快捷键Ctrl+shift+x) 转载于:https://www.cnblogs.com/SakalakaZ/p/7725159.html

  6. 一份中外结合的 Machine Learning 自学计划

    看了Siraj Raval的3个月学习机器学习计划的视频,感觉非常好,地址:https://www.youtube.com/watch?v=Cr6VqTRO1v0 结合一些我们学习中的经验得出一份Hy ...

  7. JavaWeb开发规范

    以下的建议将帮助你更有效地使用本文所描述的 Java 编程标准: ******************************************************* 当你写代码时就应该遵守 ...

  8. andorid jar/库源码解析之Bolts

    目录:andorid jar/库源码解析 Bolts: 作用: 用于链式执行跨线程代码,且传递数据 栗子: Task.call(new Callable<Boolean>() { @Ove ...

  9. PLAI那些事_06 FAE

    没有了with表达,with,exp,body的id换成exp的lambda函数,从而可以没有with来进行实现.即,{with {id exp} body}换成了{{fun {id} body} e ...

  10. 简单ajax跨域请求

    最近遇到需要ajax跨域的需求 首先看下不做任何处理特别处理的ajax跨域请求会出现什么样的错误 客户端代码: <script type="text/javascript"& ...