使用VSCode配置简单的vue项目

news2024/9/27 21:21:54

由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的。因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习。今天技术主管说让大家熟悉下VSCode开发vue,所以自己摸索了好久,才算是把简单的项目配置成功了。后续还得自己多了解这方面的知识。想着怕时间长了自己会忘记,所以写下来也供有需要的人一起学习。

一.配置环境

1.1 下载VSCode,官网直接下载就行。https://code.visualstudio.com/Download

1.2 汉化VSCode

configure display language

Ctrl+Shift+P 输入 "configure display language" 然后点击确定后,修改locale.json文件下的属性"locale"为"zh-CN". 重启VSCode工具

选择自己的语言就好!然后重启工具

若重启后VSCode仍为英文版,在商店中搜索 Chinese 安装中文插件,再重新启动VSCode即可.

1.3 安装vue插件vetur,实现支持vue文件的代码高亮

安装插件:ctrl+Shift+X 在商店中查找 vetur 或者  Ctrl + P 然后输入 ext install vetur 然后回车点安装即可 

然后在文件->首选项->设置 找到用户设置,点开 userSettings 添加如下的设置

"emmet.syntaxProfiles": {"vue-html":"html","vue":"html"

}

1.4安装ESLint 插件

安装插件:ctrl+Shift+X 在商店中查找 eslint或者  Ctrl + P 然后输入 ext install eslint然后回车点安装即可 

同样的需要在配置文件中添加如下设置信息:

"javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"]

    },

最终的配置信息如下所示: 

{
    "emmet.syntaxProfiles": {

        "vue-html":"html",
        "vue":"html"

    },
    "eslint.validate": [
        "javascript","javascriptreact","html","vue" 
    ],
    "eslint.options": {

        "plugins": ["html"]
    },
   "git.autofetch": true
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/907061.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年7月京东扫地机器人行业品牌销售排行榜(京东数据产品)

伴随消费者解放双手的消费需求,我国清洁电器行业快速发展。且随着消费回暖,我国扫地机器人市场也开始慢慢走出寒冬,止跌回升。 根据鲸参谋电商数据分析平台的相关数据显示,今年7月份,京东平台扫地机器人的销量为16万&…

正中优配:港股迎来估值“黄金坑” 哪个点位介入胜率高?

近两周,港股向下突破了一切技能短线支撑信号。在新的技能信号构成前,港股有望迎来估值压力的开释,带来一个估值“黄金坑”。当估值回到“轻视”区间时,咱们信任港股对全球资本的吸引力将再次凸显。详细而言,咱们用两种…

eDP接口的PCB布局布线要求

eDP接口是一种基于DisplayPort架构和协议的一种全数字化接口,传递高分辨率信号只需要较简单的连接器以及较少的引脚就可以实现,同时还能够实现多数据同时传输。 图1 EDP接口 eDP接口的PCB设计布局布线注意事项: 1、远离干扰源,防…

让eslint的错误信息显示在项目界面上

1.需求描述 效果如下 让eslint中的错误,显示在项目界面上 2.问题解决 1.安装 vite-plugin-eslint 插件 npm install vite-plugin-eslint --save-dev2.配置插件 // vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import e…

vue3 中wangEditor富文本编辑器上传图片功能

前端代码: wangEditor中要实现上传图片功能需要在editorConfig中添加一个对象属性。 const editorConfig { placeholder: "请输入内容...", MENU_CONF: {} }; 然后根据官方文档上的方法,填写uploadImage的上传地址 editorConfig.MENU_CONF[&q…

安卓主板定制_电磁屏/电容屏安卓平板基于MTK联发科方案定制

定制化行业平板 在各行各业中的地位越来越重要,甚至在行业转型和发展中发挥着不可替代的作用。随着工业化社会的快速发展,工业生产对智控设备要求越来越高,运用的范畴也越来越普遍广泛,工业级平板就是其中一种应用广泛的设备。 新…

什么是CSS中的BFC?

①什么是BFC BFC 全称:Block Formatting Context, 名为 “块级格式化上下文”。 W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Forma…

Python2 和Python3的共存和切换

1、电脑中安装python2和python3,将python2,python3的路径都添加到环境变量中 2、修改python2目录中的Python.exe为python2.exe,使用python2命令启动 3、修改python3目录中的python.exe为python3.exe,使用python3命令启动 4、更新pip命令 修…

item_search_seller-搜索店铺列表

一、接口参数说明: item_search_seller-搜索店铺列表,点击更多API调试,请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_search_seller 名称类型必须描述keyString是调用key&#x…

哪些人适合参加大数据培训班?

互联网加速职场变革,大数据浪潮席卷全球。日前,Python、大数据、人工智能是当今最热门的话题。大数据存储、大数据分析、 人工智能等开发人才需求旺盛。 大数据培训班有大数据分析培训班、大数据开发培训班,JAVA培训班 大数据班适学人群…

单点登陆案例实现

一 单点登陆系统简介 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。 例如:QQ、…

exe指定自带jre环境执行--exe4j使用注意点

不要打钩,允许使用jre运行而不仅仅是jdk 将jre复制粘贴到exe目录下,和我吗的exe在同一文件夹

Flowable学习[一]

一、参考CSDN博主[水中加点糖]的博客[采用springbootflowable快速实现工作流],文章地址:https://puhaiyang.blog.csdn.net/article/details/79845248,下载其发布在github上的代码 二、本地解压代码,并加载到idea中 三、使用docke…

使用three.js与WebGL相比有什么优势?

推荐:使用 NSDT场景编辑器 助你快速搭建可二次编辑的3D应用场景 特点 WebGL和Three.js是两个与网页3D图形渲染相关的技术。以下是它们的一些特点: WebGL: 基于OpenGL ES标准,为网页提供了一种基于GPU加速的图形渲染API。具有高性能的图像处…

期权攻略:手续费、保证金、期权账户租赁、零门槛开户哪家强?

期权开户的手续费和保证金收取方式可能因不同的券商和期权分仓平台而异。一般来说,期权手续费是根据交易的类型和数量张数来计算的,可以是固定费用或按比例收取,下文介绍期权攻略:手续费、保证金、期权账户租赁、零门槛开户哪家强…

[ubuntu]ubuntu18.04使用自带共享桌面实现vncserver连接

vncserver有很多方法比如你安装vnc4server,tightvncserver,x11vnc等都可以实现vnc局域网连接,今天使用系统共享桌面设置vnc连接 Ubuntu开启远程桌面 Ubuntu18.04使用gnome桌面环境,系统自带屏幕共享和远程登录功能,默认使用的是vino作为VNC…

PyTorch深度学习实战(12)——数据增强

PyTorch深度学习实战(12)——数据增强 0. 前言1. 图像增强1.1 仿射变换1.2 亮度修改1.3 添加噪音1.4 联合使用多个增强方法 2. 对批图像执行图像增强3. 利用数据增强训练模型小结系列链接 0. 前言 数据增强是指通过对原始数据进行一系列变换和处理&…

三款远程控制软件对比,5大挑选指标:安全、稳定、易用、兼容、功能

陈老老老板🤴 🧙‍♂️本文专栏:生活(主要讲一下自己生活相关的内容)生活就像海洋,只有意志坚强的人,才能到达彼岸。 🧙‍♂️本文简述:三款远程控制软件对比,5大挑选指标&#xff1…

两款开箱即用的Live2d

目录 背景第一款:开箱即用的Live2d在vue项目中使用html页面使用在线预览依赖文件地址配置相关参数成员属性源码 模型下载 第二款:换装模型超多的Live2d在线预览代码示例源码 模型下载 背景 从第一次使用服务器建站已经三年多了,记得那是在2…

App Tamer for Mac CPU智能控制管理

App Tamer是一款针对 macOS 平台的软件,它可以帮助用户有效地管理和控制正在运行的应用程序。通过优化 CPU 使用率,减少电池消耗和降低系统负载,App Tamer 提供了更加流畅和高效的计算体验。 App Tamer 的主要特点包括: 智能控制&…