安装vscode插件与安装vue项目

前提先安装nvm然后安装需要的nodejs

1:点击下载vscode,选择安装目录,一直点击安装就行

2:安装vue-cli脚手架

npm install -g vue@cli@5.0.4

查看vue版本

vue --version

卸载脚手架

npm uninstall @vue/cli
npm uninstall vue

创建vue2项目,注意:项目名字不可以包含大写字母,可以用下划线分隔开

vue create <project-name>
vue init webpack <project-name>

如果 npm install -g vue-cli 执行很慢,可能是由于网络原因或者下载源的问题导致的。以下是一些处理方法: 修改 npm
源为淘宝镜像:可以使用如下命令将 npm 源切换到淘宝镜像,以提高下载速度。 npm config set registry https://registry.npm.taobao.org/

3:安装vscode插件

  • 中文插件:Chinese (simplified) (简体中文)
  • 图标插件:vscode-icons
  • 区分代码块:Bracket Pair Colorization Toggler
  • ESLint:代码规范和错误检查工具
  • ESLint Chinese Rules:ESLint中文提示
  • Image Preview :图片预览
  • Indent-Rainbow:容易查看代码缩进
  • JavaScript (ES6) code snippets:支持ES6语法提示
  • Prettier - Code formatter:对代码进行快速格式化,html类型的格式化
  • Vue 3 Snippets:Vue语法高亮和格式化的 VS Code 插件,用来组件补全提示
  • VueHelper:vue代码提示插件
  • Vuter:用于为.vue单文件组件提供代码高亮以及语法支持
  • Auto Close Tag:自动闭合标签
  • One Dark Pro 主题
  • Live Server 启动服务,然后保存就即可更新
  • Vuter是vue2代码的格式化代码工具(prettier只是方便格式化html)

安装Vue VSCode Snippets后 通过按vb可在vue文件中快速创建基模板

在使用vue2项目时候,不要安装volar插件,这是vue3项目的语法检测,不然会报错

4:项目使用什么插件就安装什么插件,要在项目的目录下执行命令,就会只安装在相应的项目下了:

npm install axios;
npm install ladash;
npm install echarts;
  • public:静态资源目录,放一些静态文件,唯一的一个html文件存放在这个地方
  • API:存放封装的请求接口方法
  • assets:存放图片、css层叠样式表等
  • components:存放非路由组件,一般把需要复用的组件放在此处
  • layout:存放公共部分的组件
  • mixins:存放混入的js文件
  • request:存放二次封装的axios请求库
  • router:存放路由文件,在路由文件中定义路由与组件之间的对应规则
  • store:状态管理
  • utils:工具函数存放的地方
  • views:存放路由组件
  • App.vue:根组件
  • main.js:项目的入口文件,项目运行首先会运行这个文件
  • .eslintrc.js:eslint规则,可以在这增加修改删除eslint规则
  • packages.json:记录生产或开发环境用到的插件的版本信息
  • vue.config.js:可以在这配置webpack的配置项

在项目的根目录下新建文件.prettierrc ,里面内容为

{"printWidth": 120,"tabWidth": 2,"useTabs": false,"semi": false,"singleQuote": true,"trailingComma": "none","arrowParens": "avoid","bracketSpacing": true
}

在配置文件setting.json添加

 //  #让函数(名)和后面的括号之间加个空格"vetur.format.defaultFormatter.js": "vscode-typescript","javascript.format.insertSpaceBeforeFunctionParenthesis": true,// typescript"vetur.format.defaultFormatter.ts": "vscode-typescript","typescript.format.insertSpaceBeforeFunctionParenthesis": true,

vscode快捷键

常用快捷键
注释:单行注释: ctrl + k , ctrl + c 或 ctrl + /取消单行注释: ctrl + k , ctrl + u 多行注释: alt + shift + A多行注释: /**/
移动行: alt + up/down
显示/隐藏左侧目录栏 ctr + b
复制当前行: shift + alt + up/down
shift + ctrl + k删除当前行: 
控制台终端显示与隐藏: ctrl + ~ 
查找文件/安装 vscode 插件地址: ctrl + p
代码格式化: shift + alt + f
新建一个窗门: ctrl + shift + n
多行编辑: ctrl + alt + up/down

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

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

相关文章

记一次:Python的学习笔记二(Django项目1)

前言&#xff1a;书接上回&#xff0c;认识了Python项目环境&#xff0c;那么开始做一些案例了&#xff0c;笔者是Java出身&#xff0c;接触的也大都是web项目&#xff0c;那么Python的web项目有哪些呢&#xff1f;了解了一下有很多&#xff0c;37个之多&#xff0c;有 Django …

spring cloud gateway源码分析,一个请求进来的默认处理流程

1.前言 spring cloud gateway的基本组成和作用就不细赘述&#xff0c;此篇适合对此有一定了解的人阅读。 spring cloud gateway版本: Hoxton.SR1 spring cloud gateway的配置使用yml配置&#xff1a; server:port: 9527y#根据微服务名称进行动态路由的配置 spring:applicati…

Python实现pdf文件转word文件

日常生活中&#xff0c;当遇到需要将某个PDF文件转换为Word格式文件时&#xff0c;一般是通过一些在线格式转换的网站&#xff0c;或者软件来完成&#xff0c;但我们也可以使用python来完成这个需求&#xff08;当然&#xff0c;这种方法仅能够满足大部分的格式&#xff09;。 …

《Effective C++》条款28

避免返回handles指向对象内部成分 有这样一个类&#xff0c;用左上角和右下角的坐标表示一个矩形&#xff1a; class point { public:point(int a,int b):x(a),y(b){}point& changeX(int _x){point newpoint(_x, y);return newpoint;} private:int x;int y; }; struct Pdat…

人机协同

人机协同是指人和机器之间进行合作和协同工作的方式&#xff0c;人机协同是人工智能技术发展的一个重要方向&#xff0c;通过人机协同的方式&#xff0c;可以充分利用机器的智能和人的智慧&#xff0c;共同实现更高效、更智能的工作和生活方式。人机协同可以应用于各种领域和场…

Docker的常用基本命令(基础命令)

文章目录 1. Docker简介2. Docker环境安装Linux安装 3. 配置镜像加速4. Docker镜像常用命令列出镜像列表搜索镜像下载镜像查看镜像版本删除镜像构建镜像推送镜像 5. Docker容器常用命令新建并启动容器列出容器停止容器启动容器进入容器删除容器&#xff08;慎用&#xff09;查看…

基于Spring MVC的前后端交互案例及应用分层的实现

目录 分析程序报错的步骤 案例 一.加法计算器 二.实现用户登录 1.登录接口 2.获取用户的登录信息 三.留言板 1.接口定义 2.完成后端代码 3.测试后端代码 四.图书管理系统 1.定义接口 2.后端代码 3.测试后端代码 4.前端交互代码 应用分层 1.三层架构 分析程序报…

QT Creator 保存(Ctrl+S)时,会将Tab制表符转换为空格

今天在写makefile文件时&#xff0c;发现QT Creator 保存(CtrlS)时&#xff0c;会将Tab制表符转换为空格&#xff0c;之前没有发现&#xff0c;略坑&#xff0c;官网上也有说明&#xff0c;点这里 简单来说&#xff0c;解决办法如下 依次点击&#xff1a;Tools ->Options-&g…

JPA数据源Oracle异常记录

代码执行异常 ObjectOptimisticLockingFailureException org.springframework.orm.ObjectOptimisticLockingFailureException: Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1; nested exception is org.hibernate.StaleSta…

Linux 文件管理

内容概述 1 文件系统目录结构 存放的是内存中正在运行的系统状态信息&#xff0c;数据不在硬盘而是在内存中 echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all1.1 文件系统的目录结构 Linux 操作系统 ext / xfs 文件系统是区分大小写&#xff0c;大小写敏感 Linux的文件…

MySQL导出ER图为图片或PDF

目录 1、Navicat 生成ER图 1、选择数据库&#xff0c;逆向数据库到模型 2、查看ER图 3、导出ER图 2、使用MySQL官方工具&#xff1a;MySQL Workbench 1、首先连接MySQL数据库 2、点击Database&#xff0c;选择Reverse Engineer 3、填写数据库信息&#xff0c;点Next …

【鸿蒙应用ArkTS开发系列】-自定义底部菜单列表弹窗

文章目录 前言创建Demo工程创建dialog 文件夹创建ListMenu 接口创建自定义弹窗 ListMenuDialog使用自定义弹窗 打包测试效果演示默认效果菜单带图标效果设置文本颜色效果不同文本颜色效果无标题效果 前言 上一篇文章中我们实现了选择图片、选择文件、拍照的功能 。 链接在这里…

每日一练2023.12.1——输出GPLT【PTA】

题目链接&#xff1a;L1-023 输出GPLT 题目要求&#xff1a; 给定一个长度不超过10000的、仅由英文字母构成的字符串。请将字符重新调整顺序&#xff0c;按GPLTGPLT....这样的顺序输出&#xff0c;并忽略其它字符。当然&#xff0c;四种字符&#xff08;不区分大小写&#x…

对小程序的初了解

WXML和HTML的区别 标签名称不同 HTML&#xff1a;div、a、span、img WXML&#xff1a;view、text、image、navigator 属性节点不同 <a href"#">超链接</a> <navigator url"/pages/home/home"></navigator> 提供了类似vue的…

计算机视觉(OpenCV+TensorFlow)

计算机视觉&#xff08;OpenCVTensorFlow&#xff09; 文章目录 计算机视觉&#xff08;OpenCVTensorFlow&#xff09;前言7. 图像直方图绘制直方图绘制直方图有两种方式&#xff1a; 掩膜 8. 直方图均衡化直方图均衡化的介绍直方图均衡化的步骤自适应直方图均衡化 9. 图像转换…

SAP_ABAP_编程基础_数据集_创建并填充摘录数据集 / 处理摘录数据集

SAP ABAP 顾问&#xff08;开发工程师&#xff09;能力模型_Terry谈企业数字化的博客-CSDN博客文章浏览阅读494次。目标&#xff1a;基于对SAP abap 顾问能力模型的梳理&#xff0c;给一年左右经验的abaper 快速成长为三年经验提供超级燃料&#xff01;https://blog.csdn.net/j…

webshell之自建漏洞免杀

今天主要讲解&#xff0c;如何利用通用漏洞来进行命令执行&#xff0c;从而达到免杀效果 常规反序列化免杀 这种方式就相当于直接触发提供一个反序列化漏洞入口&#xff0c;但是能否被利用&#xff0c;还是在于服务端本身是否存在反序列化漏洞&#xff0c;下面给了一个例子&a…

自定义hook函数与toRef

hook 什么是hook? 本质是一个函数&#xff0c;把setup函数中使用的Composition API进行了封装。类似于 vue2 中的mixin。自定义hook的优势&#xff1a;复用代码&#xff0c;让setup中的逻辑更清除易懂。怎么用&#xff1f; hooks文件夹里面的usepoint.js&#xff08;相当于封…

基于机器学习的笔记本电脑导购系统

目 录 中英文摘要 第一章 概述 1 1.1 课题开发背景及意义 1 1.2 课题研究现状 2 1.3 课题主要研究内容 3 第二章 需求分析 4 2.1 功能需求分析 4 2.2 可行性分析 10 2.3 流程分析 11 2.4 数据流图 13 2.5 性能需求分析 15 第三章 开发技术及工具 16 3.1 系统开发模式技术 16 3…

《凤凰项目》读书笔记

文章目录 一、书名和作者二、书籍概览2.1 主要论点和结构2.2 目标读者和应用场景 三、核心观点与主题3.1 DevOps的核心原则与文化变革3.2 持续交付与自动化3.3 变更管理与风险控制3.4 关键绩效指标与持续改进 四、亮点与启发4.1 最有影响的观点4.2 对个人专业发展的启示 五、批…