用VSCode搭建Vue.js开发环境及Vue.js第一个应用

女爷i 2024-03-27 17:45 71阅读 0赞

**目录**

一、VSCode安装

二、VSCode简单配置

三、Vue.js的下载和引入

四、Vue.js第一个应用

--------------------

## 一、VSCode安装 ##

Visual Studio Code是一个轻量级但功能强大的源代码编辑器，可在您的桌面上运行，可用于Windows，macOS和Linux。它内置了对JavaScript，TypeScript和Node的支持.js并具有针对其他语言和运行时（如C++，C\#，Java，Python，PHP，Go，.NET）的丰富扩展生态系统。

VSCode官网：

[Visual Studio Code - Code Editing. Redefined![icon-default.png_t_N176][]https://code.visualstudio.com/][Visual Studio Code - Code Editing. Redefined_icon-default.png_t_N176_https_code.visualstudio.com]在官网选择自己电脑对应的操作系统进行安装

![d97b9359961f42ba98cc23f3a8efc982.png][]

选择我同意点击下一步

![b52da42c7f6e4120ad2794e780a8d129.png][]

选择安装路径，建议安装在非C盘

![9a95bd4bd5474679b3247fb98d7e6f90.png][]

默认下一步即可

![698114aeb2784f81a2da7e0ece1dcd95.png][]

![3118160877c64ecbad6a158808d59523.png][]

安装中--

![4da501a7738c4c64b5ae937ce4d9ed49.png][]

## 二、VSCode简单配置 ##

在VSCode中安装这三个组件，第一个是汉化包，第二个是可以支持编写html和css的组件，第三个可是可在VSCode中直接打开浏览器的组件

![739613ed80834c40bd6c1be2d80001e4.png][]

然后选择对应的文件夹，就能编写对应的代码了！

## 三、Vue.js的下载和引入 ##

Vue.js的下载引入有三种方法：

> 1、在vue官网下载独立版本直接引入
> 
> 2、使用CDN引入Vue.js
> 
> 3、使用node.js的npm安装Vue.js

在本篇博客直接使用第一种最简单的方法进行引入

Vue.js下载地址：

[安装 — Vue.js (vuejs.org)![icon-default.png_t_N176][]https://v2.cn.vuejs.org/v2/guide/installation.html][_ Vue.js _vuejs.org_icon-default.png_t_N176_https_v2.cn.vuejs.org_v2_guide_installation.html]选择开发版本进行下载

![b0c5fc1baf9244de8ca00afb9d12c2b4.png][]

下载完成后把Vue.js复制粘贴到对应的路径中，我粘贴到了当前路径 ，在引入的时候就能直接用当前路径进行引入

![f1c22cd21ead4842be3f0bb7f77fb1e4.png][]

## 四、Vue.js第一个应用 ##

Vue.js应用的开发离不开Vue实例，第一个应用代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="vue-2.7.14.js"></script>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            
            <p>{
       {msg}}</p >
            </div>
            <script>
            //创建vue实例
            var vm=new Vue({
               el:"#app",
            data:{
                msg:"Hello Vue.js"
                }
            })
            </script>
    </body>
    </html>

执行结果：

![22eb8a64695a42eaa7edd00188d1b697.png][]

**注意：**Vue.js的核心允许采用简介的模板语法来声明式的将数据渲染进DOM，所以可以直接双击打开demo01.html页面，无需在服务器条件下访问，便于实现数据绑定的显示效果。

[icon-default.png_t_N176]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2af0895b7a1249d2b4b486ed21875289.png
[Visual Studio Code - Code Editing. Redefined_icon-default.png_t_N176_https_code.visualstudio.com]: https://code.visualstudio.com/
[d97b9359961f42ba98cc23f3a8efc982.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e98bfe198eb24626805af6a046047854.png
[b52da42c7f6e4120ad2794e780a8d129.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8336ebc510fb47d281dcc6b4923ff615.png
[9a95bd4bd5474679b3247fb98d7e6f90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9343790f7f6540f287f4ad3869006545.png
[698114aeb2784f81a2da7e0ece1dcd95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/cf9a8786548e407795075db54ccda9a6.png
[3118160877c64ecbad6a158808d59523.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ee1e62dcdc66454b9338a9c5575d989e.png
[4da501a7738c4c64b5ae937ce4d9ed49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/387cab439ed44de0b0e357e8c5706471.png
[739613ed80834c40bd6c1be2d80001e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/84c8d0aa6bba40af80b9b932ead243d0.png
[_ Vue.js _vuejs.org_icon-default.png_t_N176_https_v2.cn.vuejs.org_v2_guide_installation.html]: https://v2.cn.vuejs.org/v2/guide/installation.html
[b0c5fc1baf9244de8ca00afb9d12c2b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c8e4051b5cbf49a9918b2f83688ab9ae.png
[f1c22cd21ead4842be3f0bb7f77fb1e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/593d7c4b9e184e18ade8de5eff834b67.png
[22eb8a64695a42eaa7edd00188d1b697.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f2aeaa55e75e4cd7862f5df700beab06.png