Vue.jsを使った商用にも耐えれるフロントエンド開発環境を無償で手軽に整える手順。finalふぁいなる向けのコード置き場です。コードじゃないこともいっぱい。この広告は、90日以上更新していないブログに表示しています。2019-05-05Vue.jsを使った商用にも耐えれるフロントエンド開発環境を無償で手軽に整える手順。思い切って提案したら普通に通りました。毎日Vue.js三昧です。商用なシステムなので失敗は許されないので、いろいろと不安はありますが、いまのところうまく行ってます。商用となるとフォルダ構成、ビルド環境、テスト環境とかどうしようか迷うわけです。チームで開発するため、その手順や運用が簡単じゃないとうまくいきません。eclipseのテンプレートプロジェクトみたいなものがあればいいのに...と探すとありました!ここではVue.jsを使った手軽な商用でも使える開発環境を構築する手順を記載します。スペックにもよりますが、およそ30minくらいで構築が可能だと思います。インストールなどの細かい手順はここでは記載していないのでググってください。Nuxt.jsやVuexといった学習コストが高そうなものは採用しておりませんのでご了承ください。その弊害でイベントの伝播で多少バケツリレーにはなりましたが、許容範囲だったと思います。Code(VSCode)とNode.jsです。以下からダウンロードしてそれぞれインストールします。Codeに拡張機能をいれるVSCodeは拡張機能をアドオンして使うものなので、最低限必要と思うものだけ記載します。marketplace.visualstudio.com日本語で使いたいひとは必須です。marketplace.visualstudio.comVue.jsをVSCodeで使うときは必須です。vueファイルに対応してくれます。marketplace.visualstudio.comデバッグするのに必須です。Firefoxもあります。marketplace.visualstudio.comリアルタイムにコードの静的解析をしてくれるのであったほうが便利です。marketplace.visualstudio.comコードを整形してくれます。チームで開発するときはフォーマットがバラバラになるのであったほうが便利です。上記は必須と思うものですが、ほかにも便利な拡張はあるかもなので必要に応じていれる。CLIをインストールして起動するきど次にターミナルを開きます。ターミナルメニューから新しいターミナルを選択します。ここで以下のコマンドを入力します。UIを起動するため、以下のコマンドをたたきます。UIはie11だと動かないので注意ください。プロジェクトマネージャから作成を選択する。任意の場所(c:\developなど)を決めて、ここに新しいプロくジェクトを作成するをクリック。ここではプロジェクト名を「xxx」として作成することにするのでプロジェクトフォルダはxxxと入力します。次のプリセットの選択は手動を選択します。次の機能の有効化は以下のものを有効化します。TypeScriptの有効化は強く推奨します。TypeScriptを使うことでコードをケアレスミスを防げますし、何よりシンプルに書けます。最後に書いてますが、TypeScriptからJavaScriptへのコンパイルはビルド時に勝手に行われるため気にしなくてもいいです。私が行った今回のプロジェクトではVuexは学習コストが高くなるため、見送ったので選択していませんが必要に応じて有効化してください。Testing次の画面でselectのところを以下のように選択します。Cypressは企業のプロキシで弾かれる場合がありますので、その場合はNightwatchを選択してください。Nightwatchすべて選択したらプロジェクトを作成するをクリック。必要なファイルをダウンロードするのでそれなりに時間がかかります。VSCodeのターミナルを見れば動いているので進捗がわかります。終わったら以下のような画面が表示されます。サーバを起動する上記の画面で、左側のメニューの一番下のタスクを選択します。表示された一覧の一番上にある「serve」を選択し、タスクの実行をクリック。するとビルドが始まります。下のところに緑のチェックマークが出るまで待ちます。アプリを開くをたたけばブラウザが起動し、サンプル画面が表示されます。ソースコードを確認するVSCodeでプロジェクトフォルダ(xxxの場所)を開くとソースが種類ごとにフォルダに分かれて配置されています。参考に配置すればいい感じになるのはとても便利です。srcの下にcomponentsとviewsがあります。componentsには共通部品を、viewsには画面のソースをいれます。画面ごとにフォルダをきってもいいと思います。CLI)のいいところは、簡単にオールインワンで最新の開発環境を構築できるというところだと思います。VSCode修正したtsファイルも何もせずにリアルタイムにブラウザに反映される。何もしなくてもデフォルトで今流行りのWebpackでビルドされるので、依存関係を気にせず開発でき、通信量削減にも繋がります。これでひとまず開発環境は整いました。あとは開発する上で気をつけることやハマったところを記事にしていきたいと思います。21:38Vue.jsを使った商用にも耐えれるフロントエンド開発環境を無償で手軽に整える手順。Tweet広告を非表示にする関連記事2019-11-04TypeScriptは難しくない。Prismのプロジェクトが作成で...2016-05-05intra-martのeBuilderのモジュールプロジェクトで各フォルダに格納するものとデプロイ先...intra-martのaccelからeBuilderも大きく変わりました。モジュ...2016-05-04intra-mart(accel)でModule.alertの代わりとなるっぽい汎用的に使えるエラー...intra-martを昔からやっている人はわかると思いますが、製品標...2016-01-13imuiTree(jsTree)で動的にノードを追加する。»プロフィールid:finalstreamC#でアプリ作っています。Oracle得意です。WPF、Xamarin勉強中。仕事はWEBアプリとか。最新記事TypeScriptは難しくない。JavaScriptをやったことあればTypeScriptでシステム開発はすぐできる。メリットだらけなのでやったほうがいい。UiPathでzipファイルを解凍する。Update」が有効です。ServerでOracleみたいに@ファイル名でSQLを実行する方法。Vue.jsを使った商用にも耐えれるフロントエンド開発環境を無償で手軽に整える手順。月別アーカイブ注目記事はてなブログをはじめよう!finalstreamさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。