vue学习+vscode

最新推荐文章于 2024-06-04 22:13:41 发布

marsman2010

最新推荐文章于 2024-06-04 22:13:41 发布

阅读量342

点赞数

文章标签： vue.js 学习 vscode

本文链接：https://blog.csdn.net/marsman2010/article/details/127793589

版权

本文介绍了如何在VSCode中配置Vue.js开发环境，包括安装必要的扩展，如Chinese(Simplified) Language Pack, Auto Rename Tag, Vetur等。还讲解了Emmet语法、CMD操作、Vue开发服务器的使用，以及Vue CLI的安装与项目创建，详细阐述了Webpack的打包原理和配置。此外，还提及了Vue3项目实战中涉及的组件库、第三方模块安装和配置。" 117307309,10916758,Java核心技术与面试指南：从基础到高级,"['Java', '后端开发', '面试', 'Spring框架', 'JVM调优']

摘要由CSDN通过智能技术生成

一、增加扩展
1. Chinese(Simplified) Language Pack for VS Code 中文（简体）语言包
2. open in browser 右击选择浏览器打开html文件
3. Auto Rename Tag 自动重命名配对的html/xml标签
4. CSS Peek 追踪到样式
5. JS-CSS-HTML Formatter 每次保存都会自动格式化js css和html代码
6. Easy LESS 插件用来把less文件编译为css文件
7. vetur .vue文件插件，让.vue文件高亮显示
8. vueHelper
Vue谷歌浏览器调试工具VueTools安装地址： wjhsh.net/Object-L-p-12986211.html

8. PHP Intelephense 提示工具，支付代码提示、查找定义、类搜索等功能
9. PHP IntelliSense 函数跳转跟踪
【eclipse中或者vc code中跳转到其它函数方法后如何快速返回原处？
快捷键：ctrl + 鼠标左键：跳转到引用的方法。alt + left ：从所跳转到引用的方法返回原方法。
alt + right：从原处返回到引用的方法。】
10. PHP Formatter php代码缩进、代码美化工具

二、Emmet语法
html:
1. div 再按tab键
2. div*3 再按tab键
3. ul > li 再按tab键 (父子)
4. div+p 再按tab键 (兄弟)
5. .demo或#two 再按tab键 (p.demo,默认就是div)
6. 生成div类名是有顺序的，可以用自增符号 $

css:
1. ta 再按tab键(text-align)
2. ti 再按tab键(text-indent)
3. w200 再按tab键(width:200px)
4. td 再按tab键(text-decoration)
5. lh 再按tab键(line-height)

三、cmd操作
按 Ctrl+C 退出当前运行的指令

/* 1. 加一个过渡效果会很好过渡样式、过渡时间、速度曲线、等待时间 */
transition: all 0.3s;

/* 2. 2D之水平移动(有3D)、旋转(有3D)、缩放、倾斜。倾斜skew(x-