ASP.NET Core 2.1 + Vue 3.1.3 + TypeScript な環境を作成する
タイトルの通りな環境を作成する手順を記載します。
とりあえず、Vueのテンプレートはwebpack-simpleで作ってます。
以下のページを参考に環境を構築したけど、古いのでちょいちょい違う。
必要なもの
Visual Studio (Visual Studio 2017 バージョン 15.8 Preview 3 以降)
ASP.NET Coreのプロジェクトが作れるように構成してあること
npm install -g @vue/cli を実行して Vue CLIをインストール
npm install -g @vue/cli
ASP.NET Core プロジェクトの作成
Visual Studioで、ASP.NET Core Web アプリケーションの [空]なプロジェクトを作る。
Startup.cs のConfigureメソッドに以下のように修正
code:Startup.cs
namespace BanGDreamPlotter
{
public class Startup
{
...
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}
}
}
Vueのテンプレートを使用して Vue.js プロジェクトを作成
作ったソリューションのプロジェクトフォルダに移動してコマンドプロンプト(cmd or powershell)を起動
*.csprojのある場所
vue init webpack-simple client-app を実行
色々聞かれるが、大体デフォルトのままで。
code:コマンドプロンプト
vue init webpack-simple client-app
? Project name client-app
? Project description A Vue.js project
? Author Fuhduki
? License MIT
? Use sass? Yes
vue-cli · Generated "client-app".
To get started:
cd client-app
npm install
npm run dev
ビルドされたファイルをwwwrootに出力するように設定を変更
<プロジェクトフォルダ>/client-app/webpack.config.jsのoutputを以下の様に修正
code:webpack.config.js
...
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../../wwwroot/index.html'),
publicPath: '../../wwwroot',
filename: 'build.js',
...
Visual Studio でプロジェクトのプロパティを表示し、ビルドイベントを修正
[ビルド前に実行するコマンドライン]にnpm --prefix ./client-app run buildを追加
コマンドプロンプトはまだ使うのでそのまま
VueにTypeScriptのサポートを追加する
コマンドプロンプトでvue create client-appを実行する
既にプロジェクトあるからどういう動作するのといわれるのでMergeを選択
code:コマンドプロンプト
Vue CLI v3.1.3
? Target directory C:\Users\Fuhduki\work\source\hoge\client-app already exists. Pick an action:
Overwrite
Merge
Cancel
次は[Manually select features](手動で機能を選択する) を選択
code:コマンドプロンプト
Vue CLI v3.1.3
? Please pick a preset:
default (babel, eslint)
Manually select features
次に機能を選ぶのでTypeScriptにチェックを入れる
code:コマンドプロンプト
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
また質問が来るので解答する(大体デフォルト)
code:コマンドプロンプト
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
インストールが成功すればOK
<プロジェクトフォルダ>/client-app/に vue.config.jsを作成し、以下のコードを入力
code: vue.config.js
module.exports = {
outputDir: '../wwwroot',
configureWebpack: {
output: {
}
}
};
<プロジェクトフォルダ>/client-app/.babelrcを以下の様に修正
code:.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
}
Vue + TypeSciprtの初期ページの表示
これで、実行対象をIIS Expressではなく<プロジェクト名>にして実行します。
Vue + TypeScriptの初期ページが表示されればOK!
https://gyazo.com/6fe951c7e47c19a1968fde625dfd0687
以上。ここまでちょっと手こずった。