安装vscode
官网:https://code.visualstudio.com/
安装 Vetur 插件,识别 vue 文件
插件库中搜索Vetur,点击安装,安装完成之后点击重新加载
新建代码片段
文件 ? 首选项 ? 用户代码片段 ? 点击新建全局代码片段 ? 取名 vue ? 确定
粘入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 scoped>", "//@import url($3); 引入公共css类", "$4", "</style>" ], "description": "生成vue模板" }, "http-get请求": { "prefix": "httpget", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(‘‘),", "method: ‘get‘,", "params: this.\\$http.adornParams({})", "}).then(({ data }) => {", "})" ], "description": "httpGET请求" }, "http-post请求": { "prefix": "httppost", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(‘‘),", "method: ‘post‘,", "data: this.\\$http.adornData(data, false)", "}).then(({ data }) => { });" ], "description": "httpPOST请求" } }
配置中:"prefix": "vue"
、"prefix": "httpget"
、"prefix": "httppost"
就是快捷输入名称