兼容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);
源碼地址: