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

最新推荐文章于 2024-06-06 16:19:27 发布

青柚1943

最新推荐文章于 2024-06-06 16:19:27 发布

阅读量2.9k

点赞数

分类专栏： ASP.NET MVC Vue.js 前端文章标签： Vue.js 前端

本文链接：https://blog.csdn.net/Stefan_J/article/details/84863481

版权

MVC 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

ASP.NET

7 篇文章 0 订阅

订阅专栏

Vue.js

5 篇文章 0 订阅

订阅专栏

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

青柚1943

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习之路(一)：VSCode创建第一个Vue实例

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

扫一扫