使用vs code自动生成vue2.0初始化模板

简介: 使用vs code自动生成vue2.0初始化模板

打开vscode, 文件-首选项-用户代码片段,选择代码片段文件或创建代码片段,选择或新建vue.json

复制以下代码,保存

{
  "Print to console": {
    "prefix": "vue2.0",
    "body": [
      "<!--",
      "  功能:${1:初始化功能描述}",
      "  作者:zichen-jiang",
      "  邮箱:18307106535@163.com",
      "  时间:$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
      "  版本:v1.0",
      "  修改内容:vue2.0初始化模板",
      "  修改人员:zicheng-jiang",
      "  修改时间:2020.10.01",
      "-->",
      "<template>",
      "  <div class='${2:该组件名称}'>$5</div>",
      "</template>",
      "<script>",
      "//import(导入)其他文件(如:组件,工具js,第三方插件js,json文件,图片文件等)",
      "",
      "export default {",
      "  /**注册组件*/",
      "  components: {},",
      "  /**接受父组件传值*/",
      "  props:{},",
      "  name:'${2:该组件名称}',",
      "  data() {",
      "    return {",
      "",
      "    };",
      "  },",
      "  /**计算属性*/",
      "  computed: {},",
      "  /**监听data数据变化*/ ",
      "  watch: {},",
      "  /**所有方法*/",
      "  methods: {",
      "",
      "  },",
      "  /**创建组件时执行(有VM对象this)*/",
      "  created() {",
      "",
      "  },",
      "  /**加载完组件时执行(主要预处理数据)*/ ",
      "  mounted() {",
      "",
      "  },",
      "  beforeCreate() {/**生命周期 - 创建之前*/},",
      "  beforeMount() {/**生命周期 - 挂载之前*/},",
      "  beforeUpdate() {/**生命周期 - 更新之前*/},",
      "  updated() {/**生命周期 - 更新之后*/},",
      "  beforeDestroy() {/**生命周期 - 销毁之前*/},",
      "  destroyed() {/**生命周期 - 销毁完成*/},",
      "  activated() {/**keep-alive组件激活时调用。仅针对keep-alive组件有效*/ },",
      "  deactivated() {/**keep-alive组件停用时调用。仅针对keep-alive组件有效*/ },",
      "}",
      "</script>",
      "<style scoped lang='less'>",
      " /* @import url(); 引入css类 */",
      "$4",
      "</style>"
    ],
    "description": "自动生成VUE模板"
  }
}
目录
相关文章
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
296 2
|
7月前
|
JSON JavaScript 数据格式
vue在vscode代码格式化
vue在vscode代码格式化
288 2
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
652 4
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
334 1
|
3月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
785 2
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
132 2
|
5月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
681 1
|
6月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
435 3
|
6月前
|
JavaScript 索引
vscode中快捷生成自定义vue3模板
vscode中快捷生成自定义vue3模板
406 1
|
7月前
|
JavaScript C++ 应用服务中间件
vs code 搭建 vue 开发环境
vs code 搭建 vue 开发环境
58 4