1.安裝vscode
官網地址：https://code.visualstudio.com/
2.安裝一個插件，識別vue文件
插件庫中搜索Vetur，安裝
3.新建代碼片段
文件-->首選項-->用戶代碼片段-->點擊新建代碼片段--取名xx.json 確定
File-->preferences-->User Snippets-->New Global Snippets file..-->取名xx.json-->Enter
4.刪除不要的代碼
5.粘入自己寫的html模板
{ // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected. // Example: "Print to console": { // "scope": "javascript,typescript", "prefix": "v", //快捷鍵 "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "<head>", "<meta charset=\"UTF-8\">", "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", "<title>title</title>", "<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>", "</head>", "<style>", "", "</style>", "<body>", "<div id=\"app\">", "{{msg}}", "</div>", "<script>", "const obj = {", "msg:'Hello world!',", "count:0,", "};", "const app = new Vue({", "el: '#app',", "data: obj,", "methods: {", "", "},", "});", "</script>", "</body>", "</html>", ], // "description": "Log output to console" "description": "vue html template" } }
6.說明：
上面代碼中的 "prefix": "v", 就是快捷鍵；名稱可以自己更換
輸入v按鍵盤的tab就行
7.同理可生成自定義.vue文件模板
vue.json
{ "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" } }
輸入vue按鍵盤的tab就行