VSCode 初次写vue项目并一键生成.vue模版
VSCode 写vue项目一键生成.vue模版
1.新建代码片段
文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定
2.配置快捷生成的vue模板
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前this实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
----上面代码中的 “prefix”: “vue”, 就是快捷键;保存好之后,新建.vue结尾的文件试试!!
输入vue 按键盘的tab就行
VSCode 初次写vue项目并一键生成.vue模版的更多相关文章
- (英文版)VScode一键生成.vue模板
1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...
- 【vsCode】识别.vue/一键生成.vue模板文件
1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...
- vue项目打包,生成dist文件夹,如何修改文件夹的名字
vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- 命令行创建 vue 项目(仅用于 Vue 2.x 版本)
1 .安装 Node.js 和 npm ( 验证安装成功输入下图 1 命令行可得 2:输入命令行 3 可得 4 即安装成功) 2.安装全局 webpack (安装依照下图输入命令行 1 耐心等待至到出 ...
- vue项目使用qrcodejs2生成二维码
最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用 1. 安装包 cnpm i qrcodejs ...
- 从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
前言 最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出 ...
- ABP 集成 nswag 到 VUE 项目, 自动生成操作类代码
记录日期: 2019-9-22 23:12:39 原文链接:https://www.cnblogs.com/Qbit/p/11569906.html 集成记录: npm install nswag - ...
- Vue项目搭建基础之Vue-cli模版测试
第一步安装node,nodejs.org下载node稳定版安装包.node -v (查看node版本)npm install -g vue-cli(安装Vue脚手架环境)vuevue listvu ...
随机推荐
- LeetCode-矩形重叠
题目描述: 矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左下角的坐标,(x2, y2) 是右上角的坐标. 如果相交的面积为正,则称两矩形重叠.需要明确的是,只在 ...
- Ext.grid 分页
1. 定义变量,存储,每页显示多少条数据 var itemsPage = 25; 2.grid数据源 //列表源 var oStore = Ext.create('Ext.data.Store', { ...
- JAVA和C#中数据库连接池原理与应用
JAVA和C#中数据库连接池原理 在现在的互联网发展中,高并发成为了主流,而最关键的部分就是对数据库操作和访问,在现在的互联网发展中,ORM框架曾出不穷, 比如:.Net-Core的EFCore.Sq ...
- 2. weddriver的定位方法
一. find_element_by_****的方式 首页在网页上鼠标右键选择检查并点击,查看需要定位的元素. https://www.baidu.com 以百度为例 导入模块的: from sel ...
- CTF_WriteUp_HTTP——302临时重定向问题
HTTP--302临时重定向 题目描述 点击给出的链接后,没有发生任何变化. 解决方案 通过擦好看网络请求,可以发现发生了302临时跳转,所以我们无法通过浏览器直接访问未跳转的页面,而flag 可能藏 ...
- 远程调试docker构建的weblogic
环境信息 OSType: CentOS Linux 7 (Core) x86_64 3.10.0-957.21.3.el7.x86_64 DockerVersion: 19.03.8 Mirrors: ...
- javaAPI操作ES分组聚合
连接es的客户端使用的 TransportClient SearchRequestBuilder requestBuilder = transportClient.prepareSearch(indi ...
- 李宏毅老师机器学习课程笔记_ML Lecture 2: Where does the error come from?
引言: 最近开始学习"机器学习",早就听说祖国宝岛的李宏毅老师的大名,一直没有时间看他的系列课程.今天听了一课,感觉非常棒,通俗易懂,而又能够抓住重点,中间还能加上一些很有趣的例子 ...
- Python数据处理(持续更新)
#打开txt文件 #打开txt文件 with open('day02.txt') as f: for line in f.readlines(): aline=line.strip() bline=a ...
- 《利用Hyper-V搭建虚拟机》一篇管够,持续更新
开门见山:win10+Hyper-V+ContOS7.X 万物皆有目的:没钱买云服务器,但平时在家想持续学习,可以考虑在自己windows上搭建一台虚拟机,然后装上Linux,调试通网络进行开发. 涉 ...