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


兼容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 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM