当前位置:网站首页 > Vue.js开发 > 正文

用VSCode搭建Vue.js开发环境及Vue.js第一个应用_使用vscode开发vue例子

目录

一、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. Redefinedhttps://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)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">
        <!--将msg的值绑定到p元素-->
        <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页面,无需在服务器条件下访问,便于实现数据绑定的显示效果。 

 

版权声明


相关文章:

  • Vue.js 3 项目开发:迈向现代化前端开发的必经之路2024-10-30 14:28:22
  • Vue.js 快速入门实战2024-10-30 14:28:22
  • 常见的web前端开发框架:Vue.js2024-10-30 14:28:22
  • vue.config.js 配置_vueconfigjs配置打包不压缩2024-10-30 14:28:22
  • Vue.js高效前端开发 • 【初识Vue.js】2024-10-30 14:28:22
  • Vue.js(一) Vue.js + element-ui 扫盲2024-10-30 14:28:22
  • 【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通2024-10-30 14:28:22
  • Vue.js学习总结_vue.js基础知识点2024-10-30 14:28:22
  • 【前端Vue】——初识Vue.js_vuejs前端开发实战2024-10-30 14:28:22
  • Vue.js简要介绍_vue.js.2024-10-30 14:28:22
  • 全屏图片