到目前為止，您可能已經聽說過Vue。js是前端世界中相對較新的孩子，在過去的幾年中，他們一直被Angular和React 所主導。事實上，你們中的許多人可能會強烈地認同其中的Angular或React 作為你們的選擇框架。雖然我從來沒有試圖說服你放棄這種偏好，但我確實認為你應該考慮添加Vue。js到你的工具帶，即使只是為了原型設計和嘗試新想法。
如果您正在計劃一個Vue項目，我們建議您回顧一下“計劃一個Vue應用程序”，在您開始之前編寫的白皮書Brandon Satrom。
關於Vue有很多東西值得你去喜愛。我個人最喜歡的一個是CLI，它提供了一些很酷的特性，可以定製新的項目、原型設計、添加插件，以及在不需要返回的情況下檢查Webpack配置。這裡有一個快速的綱要。
首先，安裝Vue CLI
在我們開始之前，如果您想要在家裡繼續，您將需要安裝Vue CLI。這將是你一整天都做的最簡單的事情，甚至比刷牙、清理垃圾更容易。
打開一個終端窗口，輸入以下內容：
npm install -g @vue.cli
或者，如果你更喜歡Yarn作為你的package manager：
yarn global add @vue/cli
對於這篇文章，我假設您已經安裝了Vue CLI的版本3或更高版本。如果您不確定您有哪個版本，請輸入以下命令：
vue --version
如果它小於版本3，運行上面的一個命令來安裝最新的版本。
現在，您已經準備好與Vue一起搖擺了。
自定義您的項目
與 Angular和React (create-react-app) CLIs一樣，Vue的CLI使創建新應用程序變得更加容易。Vue的方法最酷的特性是，您可以根據您想要做的事情來定製樣板項目。
讓我們試一試。在您的終端輸入以下內容：
vue create my-app
CLI會問你的第一件事是，如果你想要使用它的一個預設值，或者手動選擇你想要使用的特性。如果您選擇手動，您將看到以下屏幕。
想要使用Vue的TypeScript？酷。想要建立一個PWA，這幾天都很流行嗎？這是一個模板。想要Vue路由器、Vuex用於狀態管理和一些測試樣板文件嗎？完成了。
嘗試使用空格鍵選擇一些特性，然後點擊回車。下一個提示將要求您根據所選擇的特性做出一些其他的選擇。我為我的項目挑選了所有的東西，所以下面的圖片顯示了你可能會被問到的所有問題。
一旦你回答了所有問題，Vue就會下載並安裝你需要的所有東西。從那裡，您可以cd進入目錄，並運行“npm run serve”，以查看項目或在編輯器中打開它。下面的圖片顯示瞭如果您選擇了許多或全部可用特性，您的腳手架項目可能會是什麼樣子。
輕鬆的原型
vue創建對於搭建一個完整的應用程序來說是非常棒的，它已經為嚴肅的開發做好了準備，但有時您只是想構建一個快速的原型，並且您想要快速創建一些東西，而不需要在過程中添加一些樣板文件。
Vue的美妙之處在於，您可以創建一個HTML文件，為Vue添加一個腳本標記，並開始編寫代碼，但是Vue CLI有一個更快的特性，其中包括一個用於運行原型的開發服務器。
首先安裝Vue CLI服務，並使用以下命令：
npm install -g @vue/cli-service-global
然後，用.Vue擴展創建一個文件，並向它添加一些Vue代碼。如果你想的話，你也可以從命令行中輕鬆地做到這一點：
echo'
Hello Vue.js CLI
this is cool
' > App.vue
然後，您可以運行vue服務，並在實際操作中看到您的快速原型！
動態添加插件
通常，在我們開始之前，我們不知道我們需要的所有特性。例如，您可能認為您的應用程序中需要Cypress for end-to-end，但是您不確定，您也不希望從一開始就將依賴項添加到您的項目中。
值得慶幸的是，Vue CLI使您可以很容易地將這些插件添加到您的應用中，即使您在Vue創建過程中跳過它們。
首先，你需要在你的應用的根目錄下運行以下命令來添加這個插件：
npm install @vue/cli-plugin-e2e-cypress
當安裝完成後，您可以使用invoke命令來完成您需要用Cypress進行測試的所有東西：
vue invoke e2e-cypress
這個插件將添加依賴項和新文件和文件夾來進行測試。它還會向你的包添加一些腳本條目。用於端到端測試的json文件。通過運行npm運行e2e來嘗試一下！
在不彈出的情況下檢查Webpack配置
與create-react-app類似，Vue CLI在Webpack周圍創建了一個abstraction，它使您能夠在不手動修改Webpack配置的情況下使用特性和依賴項。然而，想要對該配置進行調整並不少見，而且沒有CLI能夠預測您可能想要使用或修改的所有特性。
為了達到這一目的，Vue CLI允許您查看Webpack配置，並查看CLI生成的內容，如果您正在進行更改，並希望確保輸出是您所期望的，那麼這將是很有幫助的。在任何Vue CLI-generated項目中，只需運行以下命令：
vue inspect
默認情況下，將配置輸出到控制檯，但您可以將其指向一個文件，如下所列：
vue inspect > webpack.config.js
你也可以通過在點上的路徑來檢查配置的一部分：
vue inspect resolveLoader.modules
請注意，此命令僅用於檢查。您對生成的文件所做的任何更改都不會影響Vue在運行Vue服務或Vue構建時所依賴的配置。
Vue。js可能是這個街區的新（有點）的孩子，但不可否認的是，它有一些很酷炫的工具。無論您的 library還是選擇的 framework，我建議您嘗試一下，並在今天的Vue中創建一些新的東西。
閱讀更多 空空教你玩黑客 的文章
