tm nuxtjs starter
1.0.0
これは、2018年8月の時点で、私の最小限のVUEスターターキットとデモアプリです。
JavaScriptの疲労にうんざりしていて、簡単に簡単に始めたい場合は、これを覗いてみてください。 Modern Vueアプリを開発することは、これよりもはるかに簡単になりません。
デモアプリは静的サイトで、基本的なシングルページアプリで、怠demandで怠zyなロードできるいくつかのアドレス可能なページがあります。基本的なCRUD操作を示します。1）映画のリスト、2）映画の詳細を見る、3）作成/編集、4）映画の削除。
デモでは、データストレージにブラウザLocalStorageを使用しています。つまり、バックエンドなしで実行されます。ソースには、実際のAJAXコールをRESTバックエンドに呼び出すモジュールが含まれています。モジュールを有効にしてサーバーを書き込む必要があり、実際のWebアプリを手に入れるのに適したトラックにいます。このシンプルな映画APIを例として実装するRestPie3 Python Rest APIサーバーを開発しました。
デモアプリは、最新のWebアプリを作成するための不可欠な機能を提供するシンプルだが強力な技術スタックで構成されています。それはいくつかの素晴らしい図書館の肩に立っています：
├── /assets/ # assets to be processed by Nuxt
│ └── /layout.sass # main layout of site
├── /components/ # vue components used by pages
│ └── /myheader.vue # site header component
├── /layouts/ # page top-level layouts
│ └── /default.vue # main site layout
├── /pages/ # pages
│ ├── /about.vue # about page
│ ├── /index.vue # home page, lists movies
│ ├── /moviedetails.vue # details page, views a movie
│ └── /movieedit.vue # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /store/ # data stores managed by Vuex
│ └── /index.js # the single store for this app
├── config.js # app config, select ajax or localstorage
├── nuxt.config.js # nuxtjs config
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
└── serverapi_localstorage.js # API, talks to localStorage
ローカルマシンでスターターを実行する方法は次のとおりです。
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run dev次に、ブラウザをhttp：// localhost：3000に向けます。
従属ファイルのいずれかが変更されると、変更は熱く積み込まれ、すぐに表示されます。開発者をお楽しみください！
Nuxtjsは、Vueベースのアプリに構造とコアSPA機能をもたらす素晴らしい小さなフレームワークです。アプリの開発を簡単に開始し、コアアプリに集中できるようになりましたが、より複雑なアプリの作成に導くプラクティスも提供します。
nuxt.jsは一言で言えば利益をもたらします：
nuxt.jsは、Vueコンポーネントのテンプレート、ロジック、スタイリングを同じソースファイルにカプセル化するための優れた実用的なソリューションであるVueの単一ファイルコンポーネントを利用しています。
Nuxt.jsは、Reactエコシステムの同じフレームワークであるNextJSに直接触発されています。 nuxt.jsは、レイアウト、プラグイン、ミドルウェア用のフォルダーを備えたもう少しヒエラルキーを紹介します。
Nuxtjsには、多くのデータとコードを備えたアプリの開発をサポートするツールがあるため、通常、ページとコンポーネント間でデータを共有するための何らかの状態管理ソリューションが必要です。
Nuxtjsは、Vuex State Management Libraryとネイティブに統合しています。これは、Vueを作成したのと同じ才能のある男であるEvan Youによって執筆された、よく作成された図書館です。 Vuexは、すぐに学習するのに十分なほど簡単です。州のデータ、および突然変異と行動関数からストアを構築します。
Vuexをアクティブにするために、ストア/フォルダーにストアコンポーネントをドロップするだけです。Nuxtはそれをピックアップし、 this.$store 。それだけで、それ以上の構成は必要ありません。
Mobxのような他の州のライブラリを使用することも可能ですが、統合が組み込まれているため、VuexはNuxtjsの自然な選択です。
NuxtJSを使用して静的サイトを生成する機能は、バックエンドサーバーなしでアプリを実行できる重要なツールです。サイトをGitHubページ、Netlify、またはAmazon S3にエクスポートできます。 （ただし、サイト+リンクのプレフィックスを使用してGitHubページを含むいくつかのGotchasを確認してください。）
静的生成のもう1つの勝利は、バックエンドの言語に関係なく、任意のRESTバックエンドでアプリを接続できることです。フロントエンドとバックエンドのクリーンな分離は、技術レベル、場合によってはチームレベルでモジュール化されます。
静的サイトを生成するには、単に実行します
$ npm run export静的ファイルはdist -folderで生成されます。
ローカルのwww -serverを介して静的サイトをローカルにテストするために、pythonスクリプトをすばやく実行します：（ python3 -m http.server）
$ npm run pyserve次に、http：// localhost：8000でサイトをテストします。
nuxtjsはうまく機能し、サイズがわずか69kbの縮小とGziptのホームページを生成します。これは箱からの良い結果です。
ブラウザはホームページに合計4つのリクエストでロードされ、オンデマンドでロードされた新しいページは、1回のJSリクエストを1回実行します。
Page Size Inspector Report
URL: https://nuxtjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________4____68,802
Document________________________________________1_______960
-nuxtjs.tomicloud.com/ 960
Script__________________________________________3____67,842
-nuxtjs.tomicloud.com/_.../0b088016842f5f4f735 53,552
-nuxtjs.tomicloud.com/_.../1c78d24f170a4f6d1ea 13,680
-nuxtjs.tomicloud.com/_.../f17a22e19f8ece7f59c 610（私のChrome Extensionページサイズインスペクターによるレポート。）
VueとReactはどちらもModern Web Devにとって非常に良い選択です。それらは最新の反応/仮想DOMの概念に基づいており、軽量で、大きなエコシステムに非常に人気があります。開発者は常にこれら2つを選択することはできませんが、最終的には、開発者がより良いと考える味の問題かもしれません。味の決定は通常、JSXまたはテンプレートが好きかどうかの哲学に帰着します。
フロントエンドプロジェクトに武器を選択できれば、Vueを選択します。私の主な理由は、コードの読みやすさと個人的な生産性です。 JSXよりも簡単にJavaScriptを使用してHTMLテンプレートを読み書きできます。ロングJSXの実行はめまいがすることがあり、ややうるさいことがあります。ほんのいくつかのディレクティブで装飾されたテンプレートは、私にとってより読みやすいと感じています。 JSX Map（） - 関数または3成分演算子、または短絡ではなく、最初にHTMLビルディングブロックをラインで見るのが好きです。 JavaScript Overlordが世界を引き継ぐずっと前に、Web、HTML、JS、およびCSSの3つの基本的なビルディングブロックと協力してきた私の歴史のために、テンプレートが私にとってより自然に感じられると思います。
VUEシングルファイルコンポーネントで実践されている3つの懸念事項の分離に感謝しています。私は、見解、論理、スタイリングがそれらの間にある程度の分離を持つべきであり、完全に混合されるべきではないという古い学校の考えを表していると思います。彼らはそれらの間にカップリングを持っています、それは自然なものであり、それらはお互いの近くに、できれば同じソースファイルに配置する必要がありますが、混合されません。きつすぎるカップリングは、スパゲッティで終わる可能性があります。
しかし、私は、反応がVUEよりも優れていると述べ、別のテンプレートDSLがより弱いアプローチであると主張する反対の見解を理解しています。 JavaScriptのバックグラウンドから来た場合、Reactはあなたにとってより自然に感じるかもしれません。私は両方の選択肢を扱うことができます（私はこれらの2つのスターターキットを作りました！）が、Vueは私にとってわずかなエッジを持っているかもしれません。
最近のまともなVue対Reactの議論の1つについて読みたい場合は、このRedditスレッドを確認してください。
先に進んで、このVueのスターターとおそらく私のRestPie3 Python REST APIサーバーも取り上げて、素晴らしいサービスを構築してください。
また、私に連絡して、フリーランスの仕事に利用できるかどうかを尋ねることもできます。
VueよりもReactを好む場合は、この同じスターターをReact NextJSでコーディングしました。
MITライセンス
