用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode

摘要:
Vid=2文本文档代码不完整。如果不看视频根,我不知道如何使用它。在索引中插入代码。html<h1id=“app2”>{{message}}</h1><scriptsrc=“http://t.zoukankan.com/https://cdn.jsdelivr.net/npm/vue“˃varapp=newVue({el:'#app2',数据:{message:'HelloVue!

兼容VsCode就是可以用VsCode打开,代码不需要做任何修改

同样Visual Studio添加.sln和.njsproj也可以打开别人用VsCode创建的项目


本项目创建有3个目的:

1、用Visual Studio 2019创建 Vue.js Web应用程序

2、用vue输出Hello Vue

3、用Typescript输出Hello Ts

功能简单,到达入门教学目的即可


1、用Visual Studio 2019创建 Vue.js Web应用程序
工作负载添加Node.js(有同学反映看不到创建模板,那么把asp.ne和core也装上试试)

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第1张

创建新项目

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第2张

生成解决方案-此时会有报错:

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第3张

这是因为node.js模块没有下载下来

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第4张

安装npm包

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第5张

如果等了很久都没有下载完成,需要更换npm镜像(坏孩子可以不用换)

输入以下命令,可以用nuget的命令行,也可以用shell,也可以用cmd

npm config set registry https://registry.npm.taobao.org
查看registry

npm get registry
初始化一下

npm init

F5,启动

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第6张

2、用vue输出Hello Vue
通过观察得知,网页入口为 public/index.html,脚本入口为main.ts

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第7张

不要纠结在哪引用进来的,编译器操作的

main.ts中引用了App.vue,App.vue引用了Home.vue

https://cn.vuejs.org/v2/guide/index.html#起步

https://cn.vuejs.org/v2/guide/index.html#声明式渲染

https://learning.dcloud.io/#/?vid=2

文字文档代码没给全,不看视频根部不知道怎么用。

在index.html中插入代码

用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode第8张

    <h1 id="app2">
         {{ message }}
     </h1>
     <script src="http://t.zoukankan.com/https://cdn.jsdelivr.net/npm/vue"></script>
     <script type="text/javascript">
         var app = new Vue({
             el: '#app2',
             data: {
                 message: 'Hello Vue!'
             }
         })
     </script>
 

3、用Typescript输出Hello Ts
http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

在index.html中插入代码

    <h1 id="app3">
     </h1>
在main.ts中插入代码

function greeter(person: string) {
     return "Hello, " + person;
}
 
let user = "Ts";
 
var aa = document.getElementById("app3");
if (aa != null)
     aa.innerHTML = greeter(user);
 

源码地址:

https://gitee.com/atalent/VueTypeScriptHelloWorld

免责声明:文章转载自《用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架项目,兼容VsCode》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇使用Python Requests上传表单数据和文件python django 连接 sql-server下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

基于CC2530/CC2430 的温度采集系统--DS18B20

DS18B20是常用的温度传感器。CC2530 采集DS18B20 可以实现温度采集系统等等。 模块链接:https://item.taobao.com/item.htm?id=541308617329 代码使用Zstack 的sample 工程作为基本框架。 主要实现内容:一个节点采集DS18B20并发送到另一个节点,并在节点连接的LCD上显示温度信息。...

Windows 10正式版历代记:Version 1709、Build 16299都是什么鬼?

Windows 10免费用!创意者更新秋季版激活秘籍 2017年10月中下旬,微软面向正式版用户推送了Windows 10创意者更新秋季版。这是自发布以来,Windows 10的第五个大版本。 在这篇文章中,我们来回顾一下Windows 10正式版的历史版本。 1、Windows 10 1507 初版Windows 10,代号TH1,版本号10240,发...

查看IPA安装包文件信息工具

通常情况下,我们需要查看IPA文件中的一些信息,例如APP的名称、Bundle ID、版本,以及签名描述文件的名称和到期时间。 一般做法是我们需要解压IPA安装包文件,然后通过打开APP的信息文件:info.plist 来查看名称、Bundle ID、版本等基本信息,如果要查看证书文件名称,那就需要通过命令行工具:security 来查看描述文件:embe...

Android程序开发学习笔记系列——基础篇(附源码)

  随着Android的越炒越热和各种应用的不断推出,自己也比较巧合的在去年12月份宽带续费时给送了个电信的Android系统定制机——算是促使我提前了Android开发的学习计划,并给我提供了一个开发测试的'场地'(手机),也更增强了我学习Android程序开发的兴趣——别的市场前景等先暂且不说,至少我学会了,可以做个程序自己用。闲话少说,Android程...

Linux基础学习(6)--Linux软件安装

第六章——Linux软件安装 一、软件包管理简介 1.软件包分类: (1)源码包:脚本安装包 (2)二进制包(RPM包、系统默认包) 2.源码包: (1)源码包的优点:开源,如果有足够的能力,可以修改源代码; 可以自由选择所需的功能; 软件是编译安装,所以更加适合自己的系统,更加稳定也效率更高; 卸载方便 (2)源码包的缺点:安装过程步骤较多,尤其安...

DataSanp App与Rest, WebBroker App的区别

DataSanp App与Rest, WebBroker App的区别  datasnap server :选择这一项,我们得到的将是一个独立EXE的三层服务器应用程序(TCP及HTTP两种模式)          Tokyo 10.2.2,加上HTTPS,共3中通讯协议。     ServerContainerUnit1、 TServerContaine...