tm nuxtjs starter
1.0.0
截至2018年8月，這是我最小而功能的VUE入門套件和演示應用程序。
如果您對JavaScript疲勞感到厭倦，並且想快速而輕鬆地開始，請窺視一下。開發現代VUE應用程序並沒有比這簡單得多。
演示應用程序是一個靜態站點，這是一個基本的單頁應用程序，其中包含一些可尋址頁面，這些頁面懶洋洋地加載了按需加載。它演示了基本的CRUD操作：1）列出電影，2）查看電影詳細信息，3）創建/編輯和4）刪除電影。
該演示使用瀏覽器LocalStorage進行數據存儲，這意味著它在沒有後端的情況下運行。這些源確實包含一個真正的Ajax呼叫休息後端的模塊 - 您只需要啟用模塊並編寫服務器即可，並且您可以很好地擁有一個真正的Web應用程序。我已經開發了Restpie3 Python REST API服務器，該服務器以這一簡單的電影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的應用程序中。它使啟動應用程序開髮變得容易，讓您專注於核心應用程序，但也提供了指導您創建更複雜應用程序的實踐。
簡而
NUXT.JS利用Vue的單個文件組件，這是將VUE組件的模板，邏輯和样式封裝在一起的絕佳實用解決方案。
NUXT.JS的靈感來自NextJS，這是React生態系統的相同框架。 NUXT.JS引入了更多的層次結構，具有用於佈局，插件和中間件的文件夾。
由於NUXTJS具有支持具有大量數據和代碼的應用程序的工具，因此通常需要某種狀態管理解決方案來共享頁面和組件的數據。
NUXTJ與VUEX狀態管理庫本地集成。這是一個精心製作的圖書館，由埃文（Evan You）撰寫，埃文（Evan You）是創建Vue的才華橫溢的人。 Vuex足夠簡單，可以快速學習。您可以從狀態數據以及突變和操作功能構建商店。
要激活Vuex，您只需將商店組件放在商店/文件夾中，Nuxt從那裡摘下它並將其作為this.$store僅此而已，不需要進一步的配置。
也可以使用其他狀態庫（例如MOBX），但是由於內置集成，Vuex是NUXTJ的自然選擇。
使用NUXTJS生成靜態站點的能力是一個重要的工具，它使得可以在沒有後端服務器的情況下運行應用程序。您可以將網站導出到GitHub頁面，NetLify或Amazon S3。 （但是，請檢查一些帶有site+link前綴的gotchas帶有github頁面。）
靜態一代的另一個勝利是能夠將應用程序與任何休息後端連接起來，無論後端的語言是什麼。清潔前端和後端的分離還可以在技術級別且可能在團隊級別上進行模塊化。
要生成靜態站點，只需運行
$ npm run export並且靜態文件將在dist -Folder中生成。
要通過本地www -server在本地測試靜態站點，我迅速運行了一個python腳本：（ Python3 -M http.server）
$ npm run pyserve然後在http：// localhost：8000上測試站點。
NUXTJ的表現良好，生成了一個主頁，其大小僅為69kb縮小和GZZB 。這是開箱即用的好結果。
瀏覽器總共加載了主頁4個請求，並且按需加載的每個新頁面都會發出一次JS請求。
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擴展頁面大小檢查器報告。）
Vue和React都是現代Web開發人員的真正不錯的選擇：它們基於現代反應性/虛擬DOM概念，它們輕巧，在大生態系統中非常受歡迎。開發人員不能總是在這兩個之間進行選擇，但是如果可以的話，最終可能是一個味道，即開發人員認為更好的問題。品味決定通常歸結為您是喜歡JSX還是模板的理念。
如果我可以為前端項目選擇武器，我會選擇VUE。我的主要原因是代碼可讀性和個人生產力。與JSX相比，我可以更輕鬆地讀取並編寫帶有JavaScript的HTML模板。長時間的JSX運行可能令人眼花and亂，有些嘈雜。一個只有幾個指令裝飾的模闆對我來說更可讀。我喜歡在行中首先看到HTML構建塊，而不是JSX Map（） - 功能或三元運算符或短路。我想模闆對我來說更自然，因為我與Web，HTML，JS和CSS的3個基本構建塊合作，早在JavaScript Overlord佔領了世界之前。
我非常感謝VUE單文件組件中實踐的3個問題的分離。我想我代表著老式的思想，它說，觀點，邏輯和样式應該在它們之間有一定的分離，並且不應將其混合在一起。他們確實在它們之間有耦合，這是很自然的事情，並且應該彼此靠近，最好是在同一源文件中，但不要混合。太緊的耦合可能最終會在意大利麵條中。
但是，我也理解了哪種反應狀態在VUE上更好的觀點，而哪種反應更好，並且認為另一個模板DSL是較弱的方法。如果您來自JavaScript背景，React對您來說可能會更自然。我可以選擇這兩種選擇（我什至做了這2個起動套件！），但也許Vue對我有略有優勢。
如果您想閱讀有關最近的Vue vs React辯論之一，請檢查此Reddit線程。
繼續前進，乘坐Vue啟動器，也許還有我的Restpie3 Python REST API服務器，並構建您的出色服務。
您也可以與我聯繫，詢問我是否可以從事自由職業工作。
如果您更喜歡反應，而不是VUE，我還使用React NextJ編碼了相同的啟動器。
麻省理工學院許可證
