• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

兼容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也装上试试)

创建新项目

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

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

安装npm包

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

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

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

npm get registry
初始化一下

npm init

F5,启动

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

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

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中插入代码

    <h1 >
         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 >
     </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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
create-react-app-typescript知识点发布时间:2022-07-18
下一篇:
VSCode运行TypeScript操作指南发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap