用Visual Studio 2019搭建Node.js+Vue+Typescript(TS)Web框架項目，無縫兼容VsCode

所謂無縫兼容VsCode就是

可以用VsCode打開，代碼不需要做任何修改，照顧喜歡用VsCode的人

當然你也可以用Visual Studio打開別人用VsCode創建的項目，照顧老年人

本人09年開始使用vs2010，徹頭徹尾的程序老年人了

 

本項目創建有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

創建新項目 

生成解決方案-此時會有報錯：

這是因爲node.js模塊沒有下載下來

安裝npm包 

報錯：

安裝node.js

https://nodejs.org/zh-cn/

嘗試再次安裝（大多數人都下不下來，所以可以不用嘗試直接先更換鏡像）

如果等了很久都沒有下載完成，需要更換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 id="app2">
        {{ message }}
    </h1>
    <script src="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