在項(xiàng)目中遇到的問題，記錄下來，方便日后查閱和復(fù)習(xí)??

什么是VSCode？

Visual Studio Code（以下簡稱VSCode）是一個(gè)輕量且強(qiáng)大的代碼編輯器，支持Windows，OSX和Linux。內(nèi)置JavaScript、TypeScript和Node.js支持，而且擁有豐富的插件生態(tài)系統(tǒng)，可通過安裝插件來支持C++、C#、Python、PHP等其他語言官網(wǎng)下載地址，對(duì)我來說感覺這是前端最好用的編輯器啦，很多插件應(yīng)有盡有。

接下來就進(jìn)入到正題了。。。

1、安裝一個(gè)插件，識(shí)別vue文件

插件庫中搜索Vetur，點(diǎn)擊安裝，安裝完成之后點(diǎn)擊重新加載，即可使用

2、新建代碼片段

mac的步驟如下，由于我安裝了轉(zhuǎn)中文插件，所以接下來會(huì)是中文的：
code -> 首選項(xiàng) -> 用戶代碼片段 -> (新建代碼片段取名vue.json）
新建代碼片段這塊可以直接往下找就能找到vscode上帶的vue.json

vuejson.png

3、在vue.json里寫下自己想要生成的vue模版

{
  "Print to console": {
    "prefix": "vue",  
    "body": [
      "<!-- $1 -->",
      "<template>",
      "<div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "data() {",
      "return {",
      "",
      "}",
      "},",
      "http://生命周期 - 創(chuàng)建完成（訪問當(dāng)前this實(shí)例）",
      "created() {",
      "",
      "},",
      "http://生命周期 - 掛載完成（訪問DOM元素）",
      "mounted() {",
      "",
      "}",
      "}",
      "</script>",
      "<style scoped>",
      "/* @import url(); 引入css類 */",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

4、粘貼以上代碼復(fù)制到vue.json里效果如下

此處說明一下："prefix": "vue", 就是快捷鍵，（vue名稱可隨意修改）
新建vue文件，輸入vue 按鍵盤的tab件生成vue模版

image.png