Vue.js学习之路(一)：VSCode创建第一个Vue实例

VSCode是微软旗下的一良心之作，界面太好看了，五星好评！接下来，用VSCode搭建Vue.js的环境，并创建第一个Vue实例。基本流程如下： 1、官网下载好VSCode，设置中文菜单栏 2、BootCDN把Vue.js文件download到本地 3、安装扩展程序：Eslint、veTur、Prettier-Code formatter 、Javascript Standard...

青柚1943

2977人浏览 · 2018-12-06 20:50:22

青柚1943 · 2018-12-06 20:50:22 发布

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(浏览)

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^