Vue Element前端应用开发之开发环境的准备工作

概述

之前一直采用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前端应用开发之开发环境的准备工作的详细内容，更多关于Vue Element前端应用开发之开发环境的准备工作的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 前端vue+elementUI如何实现记住密码功能

    我们这回使用纯前端保存密码 既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取 先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔.就像这样: "key1=value1; key2=value2; key3=value3" // 使用document.cookie 来获取所有cookie docuemnt.cookie = "id="

  • vue+element+oss实现前端分片上传和断点续传

    vue+element+oss实现前端分片上传和断点续传

    纯前端实现: 切片上传 断点续传 .断点续传需要在切上上传的基础上实现 前端之前上传OSS,无需后端提供接口.先上完整代码,直接复制,将new OSS里的参数修改成自己公司OSS相关信息后可用,如遇问题,请继续往下看. oss官方文档 https://help.aliyun.com/document_detail/111268.html?spm=a2c4g.11186623.6.1111.5a583a07LknRUO 代码允许所需环境:vue + element + ali-oss 安装ali-

  • Vue模仿ElementUI的form表单实例代码

    实现要求 模仿 ElementUI 的表单,分为四层结构:index 组件.Form 表单组件.FormItem 表单项组件.Input 和 CheckBox 组件,具体分工如下: index 组件: 实现:分别引入 Form 组件.FormItem 组件.Input 组件,实现组装: Form 表单组件: 实现:预留插槽.管理数据模型 model.自定义校验规则 rules.全局校验方法 validate: FormItem 表单项组件: 实现:预留插槽.显示 label 标签.执行数据校验.

  • 搭建element-ui的Vue前端工程操作实例

    一.安装npm镜像 (1)下载node.js, 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js,点击开始=>运行=>输入"cmd" => 输入命令"path" 检查Node.js版本 在命令窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org 二.安装全局vue-cli (1)npm install -g vue-cli 回车,验证是否安装成

  • 详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa

  • 利用vue + element实现表格分页和前端搜索的方法

    前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理

  • vue+elementUI组件table实现前端分页功能

    前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据 :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"   //不多解释 再就是设置分页器total等于table数据的长度 :total="tableData.length" 点击分页器的操作 methods: { handleSizeChange(val) { con

  • vue3.0中使用element的完整步骤

    vue3.0中使用element的完整步骤

    前言: 在vue3.0中使用element框架,因为element是支持vue2.0的,他推出的支持vue3.0的版本叫 element-plus 官网入口:点我进入 一.个人遇到的问题与解决办法: 遇到的问题: 我直接用cnpm  i element-plus -S 装的版本,不知道为啥,一直报错 图1,版本型号 图2 ,我的代码中使用图3 解决办法: 我把package.json中的element-plus的版本更换成    下面这句话,解决了问题(是否为最新版本问题,还在求证中) "ele

  • vue+Element-ui前端实现分页效果

    本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码,供大家参考,具体内容如下 分页技术 分页技术的概念 分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据 分页的意义 分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数

  • Vue Element前端应用开发之开发环境的准备工作

    Vue Element前端应用开发之开发环境的准备工作

    概述 之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现方式.采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变,以及需要接触更多的相关知识,本系列随笔基于循序渐进的学习研究方式,对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍,并结合我对BS前端已有的框架功能,进行两

  • Vue Element前端应用开发之常规的JS处理函数

    1.常规集合的filter.map.reduce处理方法 filter函数的主要用途是对数组元素进行过滤,并返回一个符合条件的元素的数组 const nums = [10,20,30,111,222,333] let newNums=nums.filter(function(n){ return n<100 }) 输出: [10,20,30] map函数是对数组每个元素的映射操作,并返回一个新数组,原数组不会改变将newNums中每个数字乘2 const nums = [10,20,30,111

  • Vue Element前端应用开发之树列表组件

    Vue Element前端应用开发之树列表组件

    1.常规树列表控件的使用 众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加直观. 在Element里面也有一个el-tree的控件,如下所示,这里主要对它的各种属性和方法进行介绍. 简单的代码如下所示 <el-tree :data="data" @node-click="handleNodeClick"></el-tree> 主要在script部分里面指定它的d

  • Vue Element前端应用开发之根据ABP后端接口实现前端展示

    Vue Element前端应用开发之根据ABP后端接口实现前端展示

    概述 ABP(ASP.NET Boilerplate)框架主要是基于.net core 进行的后端Web API的开发,结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息,这样前端技术人员可以很容易整合前端的API应用.Vue + Element的前端应用,是目前较为流行的前端技术整合,Vue提供了前端框架很好的支持,Element提供了非常不错的界面组件封装和处理,通过ABP后端API接口和前端Vue+Element的整合,可以很好实现前后端的分离处理,同时又极大提高各自开

  • Vue Element前端应用开发之前端API接口的封装

    Vue Element前端应用开发之前端API接口的封装

    1.ABP框架API接口的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型. 启动Host的项目,我们可以看到Swagger的管理界面如下所示. 上图就是ABP后端框架的API接口的查看页面,从上图可以看到,一般业务对象,都有Get.GetAll.Create.Update.Delete等常见接口,由于这些接口是给前端进行调用的. Vue + Elemen

  • Vue Element前端应用开发之整合ABP框架的前端登录

    Vue Element前端应用开发之整合ABP框架的前端登录

    概述 ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模式了.本篇随笔主要介绍Vue+Element+ABP的整合方式,先从登录开始介绍. 1.ABP开发框架的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.AB

  • Vue Element前端应用开发之用户管理模块的处理

    Vue Element前端应用开发之用户管理模块的处理

    1.权限管理模块的设计 我们知道,权限管理一般都会涉及到用户.组织机构.角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示. 权限模块里面包含的一些主对象表和中间表,中间表主要用来存储两个对象之间的多对多关系,如角色包含多个用户,用户属于多个机构,机构包含多个角色等等. 结合ABP后端提供的接口,Vue前端我们要实现基础的用户.组织机构.角色.功能权限等内容的管理,以及维护它们之间的关系.Vue前端对于权限管理

  • Vue Element前端应用开发之组织机构和角色管理

    Vue Element前端应用开发之组织机构和角色管理

    1.组织机构管理模块界面 组织机构管理模块界面如下所示,包括组织机构的成员管理和角色管理,在ABP基础领域里面,组织机构可以包含0到多个成员,也可以包含0到多个角色,因此界面设计如下所示. 在对象UML的图例中,应该是如下所示的效果图,组织机构包含组织成员和角色的内容. 在界面上,组织成员还需要添加成员的功能,同理角色也需要添加角色的处理,如下UML图示. 由于添加成员也是一个界面功能,一般情况下,如果我们放在一个页面里面,可能会增加代码量,增加代码维护难度和降低可读性,因此我们可以考虑把这些添

  • Vue Element前端应用开发之动态菜单和路由的关联处理

    Vue Element前端应用开发之动态菜单和路由的关联处理

    概述 在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图标.顺序.URL连接等相关信息,对于VUE+Element 前端应用来说,应该原理上差不多,本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理,实现动态菜单的维护和展示的处理. 1.菜单和路由的处理过程 由于Vue前端还需要引入路由这个概念,路由是我们前端可以访问到的对应路径集合,路由定

  • Vue Element前端应用开发之获取后端数据

    Vue Element前端应用开发之获取后端数据

    概述 在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以

随机推荐