​ 在上一篇博客中我们已经创建了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 ,这样我们就可以看见我们写的页面了。

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

Logo

前往低代码交流专区

更多推荐