VisualstudioでonsenUIを使う方法を、ずっと探していました。
最終的に、onsenUIのトップページで、onsenUIのZipファイルへのリンクを確認しました。
そして、このファイルをダウンロードして解凍しました。
解凍したファイルの中から、チュートリアルで書かている必要なCSSファイルとJavaScriptを取り出して、これをVisualstudioのソリューションエクスプローラーで確認した配置の中に入れるという作戦にたどり着きました。

https://onsen.io/

ダウンロードページは、こちらです。
https://github.com/OnsenUI/OnsenUI-dist/releases/tag/2.9.2

また、テーマローラーも見つけました。
これを使えば、ボタンなどの色を変えることが出来ます。
https://ja.onsen.io/theme-roller/?customize#

また、テンプレートは、こちらのページで得ることができます。
プルダウンメニューで必要なテンプレートを選びます。
そして、表示されるHTMLとJavaScriptをコピペで、IDEで作っているファイルに貼り付けるなどをすると、容易にUIを実現できます、

setumei3.png

私は、このように、ソリューションエクスプローラーで新しいフォルダを作りました。
そして、そのフォルダを右クリックして、エクスプローラーで開くを選択しました。
試しに、解凍したonsenUIのJavaScriptのフォルダから、ドラッグアンドドロップしたら、ファイルを追加することが出来ました。
この方法なら、階層を間違えずにファイルを追加できると思います。

omnsenUIは、CDNを使って簡単に使うことが出来ます。
そのソースは、onsenUIのサイトで紹介されています。
このソースのアドレスを内部のリンクに書き換えて、フォルダにコピペした必要なファイルにアクセスできるようにすると簡単に、プロジェクトに取り込むことが出来ます。

追記します。
実際に試したところonsenUIのCDNで指定されているファイルだけでは、アイコンが表示されなかったり、動かなかったので下記の画像のファイルを追加したら、動きました。
stylesheetは、私の独自のCSSファイルですので、関係ありません。

setumei4.PNG

setumei5.PNG

2018年4月7日現在
デバッグすると、ファビコンがないと言うエラーが出てしまいます。
ファイルを追加したり、配置を変えたりして試行錯誤を続けています。
CDNの読み込みを試しましたが、CSPの設定の関係もあり、読み込み出来ないでいます。
そのため、ファイルをアプリ内に配置した方が最善と思います。

追記
ファイル配置を紹介したサイトを見つけました。
http://cly7796.net/wp/javascript/try-using-the-onsen-ui/

2018/04/07追加
こちらに新しく記事を書きました。
https://qiita.com/masaru21/items/9377f0f4eff33a83b8e6

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.