vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)

VSCode中Vue开发推荐插件和VSCode快捷键都有哪些
发布时间：2020-08-10 16:02:52
来源：亿速云
阅读：108
作者：小新
这篇文章主要介绍VSCode中Vue开发推荐插件和VSCode快捷键都有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
首先这几个是VSCode推荐Vue开发必备的插件
Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F (格式化全文)，Ctrl+K Ctrl+F(格式化选中代码，两个Ctrl需要同时按着)
EsLint —— 语法纠错
Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试(配置有点麻烦，其实我没用这个)
Auto Close Tag —— 自动闭合HTML/XML标签
Auto Rename Tag —— 自动完成另一侧标签的同步修改
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisense —— 自动路劲补全
HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
VSCode快捷键
常用 General按 Press功能 FunctionCtrl + Shift + P，F1显示命令面板 Show Command Palette
Ctrl + P快速打开 Quick Open
Ctrl + Shift + N新窗口/实例 New window/instance
Ctrl + Shift + W关闭窗口/实例 Close window/instance
基础编辑 Basic editing按 Press功能 FunctionCtrl+X剪切行(空选定) Cut line (empty selection)
Ctrl+C复制行(空选定)Copy line (empty selection)
Alt+ ↑ / ↓向上/向下移动行 Move line up/down
Shift+Alt + ↓ / ↑向上/向下复制行 Copy line up/down
Ctrl+Shift+K删除行 Delete line
Ctrl+Enter在下面插入行 Insert line below
Ctrl+Shift+Enter在上面插入行 Insert line above
Ctrl+Shift+\跳到匹配的括号 Jump to matching bracket
Ctrl+] / [缩进/缩进行 Indent/outdent line
Home转到行首 Go to beginning of line
End转到行尾 Go to end of line
Ctrl+Home转到文件开头 Go to beginning of file
Ctrl+End转到文件末尾 Go to end of file
Ctrl+↑ / ↓向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[折叠(折叠)区域 Fold (collapse) region
Ctrl+Shift+]展开(未折叠)区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[折叠(未折叠)所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+]展开(未折叠)所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0折叠(折叠)所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J展开(未折叠)所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C添加行注释 Add line comment
Ctrl+K Ctrl+U删除行注释 Remove line comment
Ctrl+/切换行注释 Toggle line comment
Shift+Alt+A切换块注释 Toggle block comment
Alt+Z切换换行 Toggle word wrap
导航 Navigation按 Press功能 FunctionCtrl + T显示所有符号 Show all Symbols
Ctrl + G转到行... Go to Line...
Ctrl + P转到文件... Go to File...
Ctrl + Shift + O转到符号... Go to Symbol...
Ctrl + Shift + M显示问题面板 Show Problems panel
F8转到下一个错误或警告 Go to next error or warning
Shift + F8转到上一个错误或警告 Go to previous error or warning
Ctrl + Shift + Tab导航编辑器组历史记录 Navigate editor group history
Alt + ←/→返回/前进 Go back / forward
Ctrl + M切换选项卡移动焦点 Toggle Tab moves focus
搜索和替换 Search and replace按 Press功能 FunctionCtrl + F查找 Find
Ctrl + H替换 Replace
F3 / Shift + F3查找下一个/上一个 Find next/previous
Alt + Enter选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word
多光标和选择 Multi-cursor and selection按 Press功能 FunctionAlt +单击插入光标 Insert cursor
Ctrl + Alt +↑/↓在上/下插入光标 Insert cursor above / below
Ctrl + U撤消上一个光标操作 Undo last cursor operation
Shift + Alt + I在选定的每一行的末尾插入光标 Insert cursor at end of each line selected
Ctrl + I选择当前行 Select current line
Ctrl + Shift + L选择当前选择的所有出现 Select all occurrences of current selection
Ctrl + F2选择当前字的所有出现 Select all occurrences of current word
Shift + Alt + →展开选择 Expand selection
Shift + Alt + ←缩小选择 Shrink selection
Shift + Alt + (拖动鼠标)列(框)选择 Column (box) selection
Ctrl + Shift + Alt +(箭头键)列(框)选择 Column (box) selection
Ctrl + Shift + Alt + PgUp / PgDown列(框)选择页上/下 Column (box) selection page up/down
丰富的语言编辑 Rich languages editing按 Press功能 FunctionCtrl + 空格触发建议 Trigger suggestion
Ctrl + Shift + Space触发器参数提示 Trigger parameter hints
TabEmmet 展开缩写 Emmet expand abbreviation
Shift + Alt + F格式化文档 Format document
Ctrl + K Ctrl + F格式选定区域 Format selection
F12转到定义 Go to Definition
Alt + F12Peek定义 Peek Definition
Ctrl + K F12打开定义到边 Open Definition to the side
Ctrl + .快速解决 Quick Fix
Shift + F12显示引用 Show References
F2重命名符号 Rename Symbol
Ctrl + K Ctrl + X修剪尾随空格 Trim trailing whitespace
Ctrl + K M更改文件语言 Change file language
编辑器管理 Editor management按 Press功能 FunctionCtrl+F4, Ctrl+W关闭编辑器 Close editor
Ctrl+K F关闭文件夹 Close folder
Ctrl+\拆分编辑器 Split editor
Ctrl+ 1 / 2 / 3聚焦到第1，第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor group
Ctrl+K Ctrl+ ←/→聚焦到上一个/下一个编辑器组 Focus into previous/next editor group
Ctrl+Shift+PgUp / PgDown向左/向右移动编辑器 Move editor left/right
Ctrl+K ← / →移动活动编辑器组 Move active editor group
文件管理 File management按 Press功能 FunctionCtrl+N新文件 New File
Ctrl+O打开文件... Open File...
Ctrl+S保存 Save
Ctrl+Shift+S另存为... Save As...
Ctrl+K S全部保存 Save All
Ctrl+F4关闭 Close
Ctrl+K Ctrl+W关闭所有 Close All
Ctrl+Shift+T重新打开关闭的编辑器 Reopen closed editor
Ctrl+K输入保持打开 Enter Keep Open
Ctrl+Tab打开下一个 Open next
Ctrl+Shift+Tab打开上一个 Open previous
Ctrl+K P复制活动文件的路径 Copy path of active file
Ctrl+K R显示资源管理器中的活动文件 Reveal active file in Explorer
Ctrl+K O显示新窗口/实例中的活动文件 Show active file in new window/instance
显示 Display按 Press功能 FunctionF11切换全屏 Toggle full screen
Shift+Alt+1切换编辑器布局 Toggle editor layout
Ctrl+ = / -放大/缩小 Zoom in/out
Ctrl+B切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+F显示搜索 Show Search
Ctrl+Shift+G显示Git Show Git
Ctrl+Shift+D显示调试 Show Debug
Ctrl+Shift+X显示扩展 Show Extensions
Ctrl+Shift+H替换文件 Replace in files
Ctrl+Shift+J切换搜索详细信息 Toggle Search details
Ctrl+Shift+C打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U显示输出面板 Show Output panel
Ctrl+Shift+V切换Markdown预览 Toggle Markdown preview
Ctrl+K V从旁边打开Markdown预览 Open Markdown preview to the side
调试 Debug按 Press功能 FunctionF9切换断点 Toggle breakpoint
F5开始/继续 Start/Continue
Shift+F5停止 Stop
F11 / Shift+F11下一步/上一步 Step into/out
F10跳过 Step over
Ctrl+K Ctrl+I显示悬停 Show hover
集成终端 Integrated terminal按 Press功能 FunctionCtrl+`显示集成终端 Show integrated terminal
Ctrl+Shift+`创建新终端 Create new terminal
Ctrl+Shift+C复制选定 Copy selection
Ctrl+Shift+V粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown向上/向下滚动页面 Scroll page up/down
Ctrl+Home / End滚动到顶部/底部 Scroll to top/bottom
以上是VSCode中Vue开发推荐插件和VSCode快捷键都有哪些的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！

[vue] vue在组件中引入插件的方法有哪些？
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

    添加全局方法或者属性。如: vue-custom-element
    添加全局资源：指令/过滤器/过渡等。如 vue-touch
    通过全局混入来添加一些组件选项。如 vue-router
    添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
    一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

示例：安装 ElementUI

    安装：yarn add element-ui

    引入，在 main.js 中写入以下内容：

    import Vue from 'vue'
    import App from './App.vue'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

    Vue.config.productionTip = false
    Vue.use(ElementUI);
    new Vue({
      render: h => h(App),
    }).$mount('#app')

    在组件中使用：

    <template>
      <div>
        <Button>Button</Button>
      </div>
    </template>

    <script>
    import { Button } from 'element-ui';

    export default {
      components: {
        Button
      }
    };
    </script>



个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，

但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题

前端火热的框架层出不穷，作为码农的我们，依旧需要去学习，去探索新的问题，学习新技术，其实就是为了写一手好的，自认为是高质量的代码。今天主要分享一下前端最火的框架vue，也是我比较喜欢的框架。
vue上手可以说是比较轻松而且简单，如果你用过angular，react，你也会很喜欢vue。vue的核心思想依旧是：构建用户界面的渐进式框架，关注视图的变化。这也是为什么新建的文件是结构是template script style
vue的使用由很多种，可以直接引入vue.js就可以开启vue的开发。但是这是初级的使用。在vue官网中推荐vue-cli,这个会帮我们自动引入全家桶开发环境。这里不做过多的解释，下面主要分向vue使用的一些经验，如果有不对的地方，请大神指正。
在任何系统总我们都会涉及到用户需要登录的验证才可以去访问某个页面，这里我的做法是借助vue的router组件，实现我的页面验证功能。在面试中，有可能面试官会问到我们有关于用户的权限设置。用户权限是基于角色的设计的，对于我们而言，就是在不同的用户访问我们的系统的时候，你需要根据用户的不同显示不同的组件状态(个人习惯把整个页面作为模块化，组件化区分)；这里我们将进一步讨论组件的使用
在vue中我们常用的组件是父子组件，父子组件可以通过prop,而自组件是用自定义事件，$on(eventName) 监听事件 ，使用 $emit(eventName)触发事件 详细见教程 面试的时候提到这个一定要说到组件的通信，非组件通信手段状态管理。
vue的生命周期有哪些 beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前)，destroyed(销毁后)。
vue中es6的使用，这里需要注意下es6语法的一些新特性：比如箭头函数，变量命名，如果你的简历中涉及到es6那么推荐去看看这个es6特性。这个对于自己的提升可以说是相当大的。对于日后的快速开发，优雅代码会比较好。
vuex的掌握需要注意以下几点：
1.为什么用vuex?
2.vuex怎么用
3.vuex的插件的用法
针对上面这几点：很多前端入门者，很迷茫，做几点解释
1.vue什么时候用vuex,首先推荐不知道vuex的同学去看看vuex； 1)简单的单页面应用不用它2)能用store解决就不用它vuex
2.vuex的使用需要掌握state,getter(接收state),mutations(同步操作,组件中提交this.$store.commit('xxx')),action(Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。),module(模块化state),其中state是基础，module是对于state过大时的划分模块，需要之一命名空间
3.vuex插件在插件中不允许直接修改状态——类似于组件，只能通过提交 mutation 来触发变化
最后，vue的学习是要不断去实践的，尝试的，包括脚手架的使用需要自己去掌握，开发环境的可配置化，多个不同环境对应api的修改。
原文出处：https://www.cnblogs.com/starryqian/p/8417304.html