在上一篇博客中我们已经创建了Vue项目并且分析了Vue的目录结构，我们主要开发的地方在src文件夹中，今天我们就来讲一下然后创建Vue文件并且在浏览器中运行出来。

更改vscode settings.json文件

首先我们要知道的是，因为我们是使用npm新建的项目，所以在一些配置文件中规定了Vue的代码格式，也就是说不按照这种格式来书写的话，终端就会报错，一些可能还会运行不出来。

下面做一个示范：

export default {
  name: 'tname',
  data(){
    return{
      msg:'这是首页'
    }
  },
}

上面这段代码是Vue文件中的代码，我们可以看到这并没有什么错误，但运行的时候就会报错，有人会说是第7行多的一个逗号，是的，这是一个错，在最后的一个方法中结尾是不能有逗号的，也就是说之后在两个方法的连接处才需要有。

那大家还注意到哪里有错吗，在第3行的 data(){这个地方，括号前和括号后是需要有空格隔开的，下一行的return后面也是需要空格隔开，由此我们可以知道Vue代码是要用空格来隔开，便于美观，可是我们有时候忘记敲空格了怎么办呢，那就会报错，而且错误还非常多。

所以我们把vscode的设置文件改一下，要是Vue文件保存的时候就会自动为我们格式化代码，很方便。

在vscode中按住Ctrl+shift+p，在输入框中输入open settings(json)，打开这个文件，然后在这个文件中添加入选代码，然后自动保存Vue文件就可以格式化代码了。

// vscode默认启用了根据文件类型自动设置tabsize的选项
        "editor.detectIndentation": false,
        // 重新设定tabsize
        "editor.tabSize": 2,
        // #每次保存的时候自动格式化
        "editor.formatOnSave": true,
        // #每次保存的时候将代码按eslint格式进行修复
        "eslint.autoFixOnSave": true,
        // 添加 vue 支持
        "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
        ],
        // #让prettier使用eslint的代码格式进行校验
        "prettier.eslintIntegration": true,
        // #去掉代码结尾的分号
        "prettier.semi": false,
        // #使用带引号替代双引号
        "prettier.singleQuote": true,
        // #让函数(名)和后面的括号之间加个空格
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        // #这个按用户自身习惯选择
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // #让vue中的js按编辑器自带的ts格式进行格式化
        "vetur.format.defaultFormatter.js": "vscode-typescript",
        "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
        },
        // 格式化stylus, 需安装Manta's Stylus Supremacy插件
        "stylusSupremacy.insertColons": false, // 是否插入冒号
        "stylusSupremacy.insertSemicolons": false, // 是否插入分好
        "stylusSupremacy.insertBraces": false, // 是否插入大括号
        "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
        "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行

为了使Vue文件中的代码可以高亮，我们可以在vscode中安装vetur插件，这样就可以使得代码高亮了。

推荐一个vscode插件， Vue 3 Snippets，可以快速补全Vue代码。

创建Vue文件

在src.components文件夹中新建一个Vue文件，我的叫test.vue，然后写入如下代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="clickme">点我</button>
  </div>
</template>

<script>
export default {
  name: 'tname',
  data () {
    return {
      msg: '这是首页'//这是h1标签哟啊显示的文字
    }
  },
  methods: {
    clickme () {//这是按钮实现的方法
      alert(1)
    }
  }
}
</script>

保存之后我们打开src.components.index.js文件，在第三行后面导入test文件

import tname from '@/components/test'

然后在routes中加入如下代码

    {
      path: '/tname',
      name: 'tname',
      component: tname
    }

就完成页面的制作了，保存一下到浏览器，然后就会发现页面没有改变，我们把网页的链接改为 http://localhost:8080/#/tname ，这样我们就可以看见我们写的页面了。

刚刚入门，有错误的请在评论中提出，共同学习，谢谢。