vscode+vue开发环境安装配置含vetur、eslint 插件-连载【2】-企业级系统开发实战连载系列 -技术栈:vue、element-ui、qt、c++、sqlite

• 作者背景描述：
• • 为什么写此系列文章？
  • 解决方案：
  • 预览Demo
  • 下载
  • 同意条款
  • 安装路径
  • 开始菜单文件夹
  • 快捷方式和path变量
  • 准备就绪
  • 完成
  • 欢迎界面
  • 打开项目
  • 项目结构
  • 代码编辑器
  • 安装vetur插件
  • 安装eslint 代码检测插件
• 总结

作者背景描述：

本人就职于外资IT企业，担任电商订单处理产品开发经理一职，领导过非常多次大小项目的开发工作，对电商平台订单处理流程非常熟悉。

公司专注鞋服行业相关软件开发和服务，公司规模100多人以上，在台北，广州，成都，上海，北京，国外等均有分公司。

为什么写此系列文章？

本人在学校至工作到现在十余年时间，使用.net C# 开发语言，结合在公司实际开发，和市场的需求中，NET.开发的商业企业级系统遇到的缺点有如下：

1. 程序首次加载慢，因为虚拟机编译的原因。
2. WINFORM界面开发不够炫丽，精美。
3. WINFORM界面设计人员难找。
4. 程序可以被反编译。
5. 安装包过大，部署麻烦，framework.
6. 跨平台不够好。

解决方案：

结合近年来前端设计的走向，最终选择了qt+vue+element UI+sqlite(数据库根据需要情况选择)

qt负责接口和硬件处理

sqlite做数据存储

vue+element UI 实现前端。

预览Demo

下载

下载vscode

https://code.visualstudio.com/Download

windows的， 选择如下：

同意条款

安装路径

开始菜单文件夹

快捷方式和path变量

准备就绪

完成

欢迎界面

打开项目

点击 OpenFolder 打开上一章节创建的项目 vue01

项目结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： • assets: 放置一些图片，如logo等。 • components: 目录里面放了一个组件文件，可以不用。 • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 • main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

代码编辑器

展开src ，打开App.vue文件，代码样式和记事本无异，如下：

安装vetur插件

代码没有高亮显示，修改代码也没有 智能提示，我们先安装vetur插件 。选择左下角的扩展（Extensions），如下图：

我们可以看到推荐插件为Vetur,点击install

安装完后，再切换回源代码，就会出现代码高亮和智能提示，尝试修改代码也有智能提示，如下图：

安装eslint 代码检测插件

在Search 输入eslint ，如下图：

打开一个js文件，胡乱修改一下查看错误检测，如下图：

总结

本节主要讲解了vscode环境安装，代码编辑器插件Vetur，错误检测插件eslint 的安装。下一节我们讲解vs2019 c++开发环境安装配置。