位置: IT常识 - 正文

用VSCode搭建Vue.js开发环境及Vue.js第一个应用(vscode搭建vue项目)

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

目录

一、VSCode安装

二、VSCode简单配置

三、Vue.js的下载和引入

四、Vue.js第一个应用


一、VSCode安装

推荐整理分享用VSCode搭建Vue.js开发环境及Vue.js第一个应用(vscode搭建vue项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vscode+vue,vscode如何创建vue文件,vscode如何运行vue代码,vscode如何运行vue代码,用vscode搭建后端环境,vscode使用教程vue,vscode搭建vue项目,用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/在官网选择自己电脑对应的操作系统进行安装

 选择我同意点击下一步

 

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

默认下一步即可 

 

 

 安装中--

 

二、VSCode简单配置用VSCode搭建Vue.js开发环境及Vue.js第一个应用(vscode搭建vue项目)

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

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

三、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选择开发版本进行下载

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

四、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>

执行结果:

注意:Vue.js的核心允许采用简介的模板语法来

本文链接地址:https://www.jiuchutong.com/zhishi/299995.html 转载请保留说明!

上一篇:IDEA2022版本创建maven web项目(两种方式)(新版本idea怎么创建javaweb)

下一篇:JavaScript-匿名函数(js匿名函数和命名函数)

  • 如何更改群个人名称备注(如何更改qqip)(怎样修改群里个人昵称)

    如何更改群个人名称备注(如何更改qqip)(怎样修改群里个人昵称)

  • 手机如何投屏到电脑(手机如何投屏到ipad)

    手机如何投屏到电脑(手机如何投屏到ipad)

  • 拼多多如何取消绑定电话号码(拼多多如何取消订单申请退款)

    拼多多如何取消绑定电话号码(拼多多如何取消订单申请退款)

  • 微信能发多长的视频朋友圈(微信能发多长的文字)

    微信能发多长的视频朋友圈(微信能发多长的文字)

  • airpods连不上蓝牙(airpods连不上蓝牙手机怎么回事)

    airpods连不上蓝牙(airpods连不上蓝牙手机怎么回事)

  • 下载了钉钉为什么还显示未激活(下载了钉钉为什么安装不了)

    下载了钉钉为什么还显示未激活(下载了钉钉为什么安装不了)

  • 云课堂有摄像头吗(云课堂摄像头怎么打开)

    云课堂有摄像头吗(云课堂摄像头怎么打开)

  • 格式刷可以复制什么(格式刷可以复制艺术字样式吗)

    格式刷可以复制什么(格式刷可以复制艺术字样式吗)

  • 华为nova7有没有指纹解锁(华为nova7有没有红外遥控功能)

    华为nova7有没有指纹解锁(华为nova7有没有红外遥控功能)

  • 苹果打不开接收的录音(苹果手机无法接收信息是什么原因)

    苹果打不开接收的录音(苹果手机无法接收信息是什么原因)

  • b站视频如何下载(b站视频如何下载到手机本地)

    b站视频如何下载(b站视频如何下载到手机本地)

  • 抖音视频审核不通过的原因(抖音在线刷视频网页)

    抖音视频审核不通过的原因(抖音在线刷视频网页)

  • 华为p20支持OTG吗(华为p20有没有ot g功能)

    华为p20支持OTG吗(华为p20有没有ot g功能)

  • 云台和稳定器的区别(云台和稳定器的哪个好)

    云台和稳定器的区别(云台和稳定器的哪个好)

  • 爱剪辑可以录屏吗(爱剪辑可以录屏吗视频)

    爱剪辑可以录屏吗(爱剪辑可以录屏吗视频)

  • 4g独显和8g独显的区别(4g和4g独显)

    4g独显和8g独显的区别(4g和4g独显)

  • 过期的文件怎么打开(过期的文件怎么样才能恢复微信)

    过期的文件怎么打开(过期的文件怎么样才能恢复微信)

  • 星标朋友动态有提示吗(设置了星标朋友是什么意思)

    星标朋友动态有提示吗(设置了星标朋友是什么意思)

  • 怎么删除淘宝人生(怎么删除淘宝人生的好友)

    怎么删除淘宝人生(怎么删除淘宝人生的好友)

  • 哈罗单车为什么扫不了(哈罗单车为什么显示该车不可用)

    哈罗单车为什么扫不了(哈罗单车为什么显示该车不可用)

  • 荣耀手机如何关掉新闻(荣耀手机如何关闭纯净模式)

    荣耀手机如何关掉新闻(荣耀手机如何关闭纯净模式)

  • 荣耀v20有nfc吗(荣耀v20的nfc在手机哪个位置)

    荣耀v20有nfc吗(荣耀v20的nfc在手机哪个位置)

  • 抖音null的作品怎么都没有(抖音null视频为什么都删了)

    抖音null的作品怎么都没有(抖音null视频为什么都删了)

  • 淘宝未读是拉黑了吗(淘宝信息未读是真的未读吗)

    淘宝未读是拉黑了吗(淘宝信息未读是真的未读吗)

  • 打95188可以解封花呗么(打95188有协商成功的吗)

    打95188可以解封花呗么(打95188有协商成功的吗)

  •  苹果6plus像素多少万(苹果6plus像素多少)

    苹果6plus像素多少万(苹果6plus像素多少)

  • 电脑网页密码不能保存怎么办?(电脑网页密码不正确)

    电脑网页密码不能保存怎么办?(电脑网页密码不正确)

  • python get获取指定键值(python__get__)

    python get获取指定键值(python__get__)

  • 没有申报个税的工资怎么入账
  • 去税务局开增值税专用发票需要缴费吗
  • 代加工可靠吗
  • 发票校验码看不清怎样查真伪
  • 中小型企业库存的问题及对策
  • 工业企业会计报告
  • 确认社保局工伤赔款会计分录
  • 工会经费计入应付职工薪酬
  • 产品成本的归集和分配是什么意思
  • 契税可以银行转让吗
  • 劳务发票可以做费用吗怎么做
  • 电子普通发票需要盖章吗
  • 土地闲置费可以税前扣除吗
  • 防伪开票系统税票如何抵扣
  • 公司注销银行账户流程
  • 当月作废的发票是否需要报税
  • windows右键刷新总是卡住
  • txp1atform.exe
  • 增值税抵扣怎么操作
  • 失业稳岗补贴要交社保吗
  • 直线法计提折旧每年都一样吗
  • Vue3 + Vite + TypeScript + dataV 打造可视化大屏
  • Laravel5.5新特性之友好报错以及展示详解
  • javascript获取input的值并计算
  • 以摊余成本计量且其变动计入当期损益
  • 业务招待费计入什么会计科目
  • 财政专户资金是专项资金吗
  • 固定资产折旧计算方法公式大全
  • Yii CDBCriteria常用方法实例小结
  • 检测费的税票税率怎么算
  • 售后租回交易形式是什么
  • 存货非正常损失可以所得税前扣除吗
  • 非企业指的是什么
  • python如何反编译
  • 删除sql server2019
  • 使用二氧化碳灭火器时人应该站在什么位置
  • sql server数字类型
  • 农产品增值税免税备案资料
  • 现金发放工资会扣税吗
  • 职工薪酬属于收益性支出
  • 企业所得税期间费用明细表
  • 不动产经营租赁包括哪些内容
  • 工程的直接成本包括哪些内容
  • 固定资产清理是资产类的备抵科目吗
  • 应交税费的账务处理一般纳税人
  • 交付使用资产是否含税
  • 存货的盘盈
  • 无形资产如何摊销公式
  • 银行账户收到养老金怎么办
  • 计算成本时应该考虑什么
  • 公交卡充值发票怎么开
  • 如何判断企业处于什么阶段
  • 公司开办期间怎么界定
  • 解除非正常户罚款调整操作
  • MySQL数据库中把表中的一个字段重命名
  • linux重置开机密码
  • sql查询字段值为汉字的
  • win7 64位运行软件提示MSCOMCTL.OCX丢失或无效该怎么办?
  • win7怎么下载win10
  • 装了ntfs for mac os后找不到磁盘了
  • Linux x86_64下安装Flash Player 9
  • winxp怎么做系统
  • win10系统计算器字体大小怎么调
  • win10系统怎么设置电脑密码
  • dxva2.dll是什么意思
  • windows怎么右键
  • Win7如何开启蓝牙
  • win7系统谷歌浏览器打不开网页
  • dos删除文件夹下所有文件 不删除父目录
  • 安卓api中文手册
  • 比较两个字符串的值是否相等
  • Node.js中的http请求客户端示例(request client)
  • node.js详解
  • unity教程完整版
  • js全局变量怎么定义
  • The method findViewById(int) is undefined for the type FragmentHome报错
  • 大连税务登记app
  • 国家减免的增值税怎么做账
  • 如何抵扣税款
  • 经营所得税怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设