精华内容
下载资源
问答
  • vue-cli: vue 脚手架 vue-resource(axios): ajax 请求 vue-router: 路由 vuex: 状态管理 vue-lazyload: 图片懒加载 ...mint-ui: 基于 vue UI 组件库(移动端) element-ui: 基于 vue UI 组件库(PC 端) ...
    1. vue-cli: vue 脚手架
    2. vue-resource(axios): ajax 请求
    3. vue-router: 路由
    4. vuex: 状态管理
    5. vue-lazyload: 图片懒加载
    6. vue-scroller: 页面滑动相关
    7. mint-ui: 基于 vue 的 UI 组件库(移动端)
    8. element-ui: 基于 vue 的 UI 组件库(PC 端)
    展开全文
  • VSCode中Vue开发推荐插件和VSCode快捷键都有哪些发布时间:2020-08-10 16:02:52来源:亿速云阅读:108作者:小新这篇文章主要介绍VSCode中Vue开发推荐插件和VSCode快捷键都有哪些,文中介绍非常详细,具有一定...

    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 智能提示当前项目所支持的样式

    cd4968a6c599228a1a5b5d61f6eec457.png

    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] 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的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template s...

    前端火热的框架层出不穷,作为码农的我们,依旧需要去学习,去探索新的问题,学习新技术,其实就是为了写一手好的,自认为是高质量的代码。今天主要分享一下前端最火的框架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

    展开全文
  • 什么是SPA应用,SPA页面和传统页面什么...什么是vuex,vuerouter,如何避免vuex中函数造成全局污染vuex 为状态管理,它集中存储管理应用所有组件状态,可以理解成一个全局仓库。VueRouter是路由(spa)单页面...
  • 1. Vue.js介绍Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常...Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已项目整合。另一方面,Vue 完全能力驱动采用单文件组件和 Vue生态...
  • vue的底层原理?vue组件之间的通信?JS中判断数据类型的方法几种?最常见的判断方法:typeof判断已知对象类型的方法: instanceof根据对象的constructor判断: constructor无敌万能的方法:jquery.type()vue与...
  • 2019 VUE前端面试题1、active-class是哪个组件属性?嵌套路由怎么定义?答:vue-router模块router-link组件。...使用router对象params.id3、vue-router哪几种导航钩子?答:三种,一种是全局导...
  • Vue框架常见面试题1、active-class是哪个组件属性?嵌套路由怎么定义?答:vue-router模块router-link组件。... 使用router对象params.id3、vue-router哪几种导航钩子?答:三种,一种是全局导航...
  • 基于vue的框架有哪些

    千次阅读 2018-10-08 14:59:11
    Vue开发使用的插件 Vux https://doc.vux.li/zh-CN/   VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。 基于webpack + vue-loader + vux可以快速...
  • 1 active-class是哪个组件属性。...解、在router目录下index.js文件中,对path属性jiashang/:id 使用router对象params.id3 Vue-router几种导航钩子?解,三种。第一种是全局导航钩子。rout...
  • 2018前端VUE面试题总结发布时间:2018-06-08 05:41,浏览次数:1547, 标签:VUE1、active-class是哪个组件属性?嵌套路由怎么定义?答:vue-router模块router-link组件。2、怎么定义vue-router动态路由?怎么...
  • 前言 之前我们在 《 vue-cli创建项目后优化更...我们导出看一下 vue-cli 默认都给我们配置了哪些插件 ~ 默认插件 默认插件情况(由上至下按顺序加载): 插件名 位置 环境 作用 VueLoaderPlugin vue-loader dev
  • Vue.js面试题整理一、什么是MVVM?MVVM是Model-View-ViewModel缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现...
  • 1、active-class是哪个组件属性?嵌套路由怎么定义?答:vue-router模块router-link组件。... 使用router对象params.id3、vue-router哪几种导航钩子?答:三种,一种是全局导航钩子:router....
  • 1. 双向绑定详解2.computed 实现原理1)为什么需要computed?template 使用大量复杂逻辑表达式处理数据,使得代码维护性差,且相同数据重复计算对性能开销大2)计算属性实现原理?1.初始化 data 和 computed,分别...
  • MVVM是Model-View-ViewModel缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View ...
  • MVVM 是 Model-View-ViewModel 缩写,MVVM 是一种设计思想。Model 层代表数据模式,也可以在 Model 中定义数据修改和操作业务逻辑;View 代表 UI 组件,它负责将数据模型转化为 UI 展现出来,ViewModel 是一个...
  • 从面试到入职,这些问题都是我面试被问到,希望能够帮到你Vue中computed 和 watch 区别?什么是原型链,举个例子,并说明?什么是闭包,举个例子说明,它什么作用?1rem等于多少px?Vue通信方式?Vuex 中...
  • 不然,稍微水平面试官一看就能看出,是否真才实学还是刚好背中了这道面试题。(都是一些基础的vue面试题,大神不用浪费时间往下看)一、对于MVVM理解?MVVM是Model-View-ViewModel缩写。Model :代表数据...
  • 这年头,程序员面试都讲究坐姿,姿势不对,努力白费。参照下图,请同学们对号入座。回想一下,自己平时面试坐姿,你在面试官眼里,大概是什么形象,可能是工程师,也可能是键盘...01.粉丝来信前段时间,小伙伴在...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 127
精华内容 50
关键字:

vue的插件有哪些

vue 订阅