上一篇寫過 .NET core 3 + Vue-cli 3 的起手式，這次我們要把做好的專案寫成 dotnet new 的範本，這樣以後就不用做這麼多繁瑣的步驟啦！

製作範本

Step1. 將內容放到 Content 資料夾

新增 Content 資料夾，把原本專案的檔案放到 Content 底下。

將內容放到 Content 資料夾

Step2. 設定 template.json, .nuspec

* 在 Content 資料夾內新增 .template.config 資料夾，新增 template.json

Content/.template.config/template.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "$schema": "http://json.schemastore.org/template",
  "author": "Anny Chang",
  "classifications": [ "Web", "MVC", "SPA" ],
  "identity": "Anny.DotnetCore.VueCli",
  "name": "Anny Dotnet Core 3 With Vue Cli 3",
  "shortName": "annydotnetvuecli", 
  "tags": {
    "language": "C#",
    "type": "item"
  },
  "sourceName": "dotnet_core_with_vue_cli3",
  "preferNameDirectory": true
}
屬性 說明
$schema 使用 template schema
author 作者名
classifications dotnet new 列表顯示的分類
identity 辨識此 Template 的唯一 ID
name Template 顯示名稱
shortName dotnet new 使用此 Template 的簡寫
tags dotnet new 列表顯示的語言
sourceName 這個是到時候使用 template 時，可以將專案名稱替代成要的
preferNameDirectory dotnet new 沒有指定專案名稱時，他會自動命專案名為所在資料夾的名稱
  • 在最外層新增 .nuspec 檔案。

Anny.DotnetCore.Template.nuspec

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<package>
  <metadata>
    <id>Anny.DotnetCore.Template</id>
    <version>1.0.3</version>
    <title>Anny DotnetCore Template Example</title>
    <description>
      Anny's DotnetCore Template for example.
    </description>
    <authors>Anny Chang</authors>
    <summary>
      ASP.NET Core Teamplate for Vue Cli.
    </summary>
    <packageTypes>
      <packageType name="Template" />
    </packageTypes>
  </metadata>
  <files>
    <file
      src="Content/**/*"
      exclude="**/node_modules/**;**/package-lock.json;**/bin/**;**/obj/**;**/.vs/**;**/.vscode/**;**/wwwroot/**"
      target="Content" />
  </files>
</package>
metadata 屬性 說明
id dotnet new 安裝 nuget template 識別唯一ID
version nuget package version
title nuget 官網上對於 package 的標題
description nuget 官網上對於 package 的描述
authors nuget 官網上對於 package 的作者名
summary nuget 官網上對於 package 的摘要
packageType 告知 nuget package 類行為 Template
files 屬性 說明
src 指定來源資料夾位置
exclude 排除特定檔案
target 指定生成資料夾位置

Step3. 上傳 nuget package

執行 nuget cli 指令，若還沒有安裝請連這裡。

執行下列 nuget 指令打包 package。

1
nuget pack

將產生出來的 .nupkg 檔案上傳至官網。等待官網審核成功後就可以使用 Template 囉～

nuget package 審核成功

使用範本

執行下列指令安裝範本。

1
dotnet new --install Anny.DotnetCore.Template::1.0.3

成功會看到列表出現安裝的範本名稱。

安裝範本成功

請去一個新資料夾來測試範本。
不指定名稱執行的話，專案名稱會自動取名為當前位置的資料夾名稱，如下指令。

1
dotnet new annydotnetvuecli

若要在當下位置建立自己命名的專案名稱，可傳入參數如下指令。 (XXX 請替換成你要的專案名稱)

1
dotnet new annydotnetvuecli -n XXX

若要安裝新版本的範本，記得解除舊的版本，解安裝請執行下列指令。

1
dotnet new -u Anny.DotnetCore.Template

這樣就完成我們的模板測試囉～今天的 code 放在 github。

參考資料