VSCode是微软旗下的一良心之作,界面太好看了,五星好评!接下来,用VSCode搭建Vue.js的环境,并创建第一个Vue实例。

 基本流程如下:

 1、官网下载好VSCode,设置中文菜单栏

 2、BootCDN把Vue.js文件download到本地

 3、安装扩展程序:Eslint、veTur、Prettier-Code formatter 、Javascript Standard Style、View In Browser

 4、配置settings.json

{
    "editor.fontSize": 16,
    "editor.formatOnSave": false, // 为了避免data () ,data后面的空格save时被删除
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate":[
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true   
        }
    ],
    "eslint.autoFixOnSave": true,  // 保存时自动格式化
    "prettier.eslintIntegration": true,  // prettier 按照eslint进行格式化
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

5、新建html页面(重点还是关注用Vue.js代码)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--导入Vue的包-->
    <script src="../VSCode/2.5.1.8-Vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        //创建一个Vue实例
        //当导入Vue的包之后,在浏览器的内存中就多了一个Vue构造函数
        var vm=new Vue({
            el:'#app',//指定当前实例vm控制页面哪块区域
            data:{
                msg:'欢迎来到德莱文联盟!'
            }//data属性存的是el中要用的数据
        });
    </script>
</body>
</html>

6、View In Browser(浏览) 

 

 

Logo

前往低代码交流专区

更多推荐