VScode开发工具（推荐使用）

1. 技术目标

2. 环境配置

2.1 开发配置

3. 技术介绍

3.1 vscode介绍

3.2 关键字

3.3 技术栈

4. 技术实践

4.1 官方下载vscode编辑器

官网下载地址

4.2 git环境的配置

File----首选项----设置

{
    "git.path": "D:/2018dev/soft/Git/cmd/git.exe",
    "workbench.statusBar.feedback.visible": false,
    "git.enableSmartCommit": true,
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"//在这里加上vue
        ]
    },
    "git.autofetch": true,
    "git.confirmSync": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.validation.template": false,
    "files.exclude": {
        "node_modules/": true
    },
    "workbench.editor.enablePreview": false
}

4.3 快捷键的使用配置

Ctrl+tab：文件切换

4.4 vscode插件配置

4.5 搭建本地服务

4.6 模板文件生成代码

File----首选项----用户代码片段
创建demo.vue文件为例子：进入用户代码片段后，搜索vue，打开vue.json文件，进行自定义文档的编辑！

{
    "Print to console": {
      "prefix": "vue",
      "body": [
        "<!-- $0 -->",
        "<template>",
        "  <div></div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  data () {",
        "    return {",
        "    };",
        "  },",
        "",
        "  components: {},",
        "",
        "  computed: {},",
        "",
        "  mounted: {},",
        "",
        "  methods: {}",
        "}",
        "",
        "</script>",
        "<style lang='scss' scoped>",
        "</style>"
        ],
      "description": "Log output to console"
    }
}