在很多 vue 專案中，我們使用 vue.component 來定義全域性元件，緊接著用 new vue() 在每個頁面內指定乙個容器元素。這種方式在很多中小規模的專案中運作的很好，在這些專案裡 js 只被用來加強特定的檢視。但當在更複雜的專案中，或者你的前端完全由js驅動的時候，下面這些缺點將變得非常明顯：
² 所有的元件都放同乙個html檔案中
² 沒有構建步驟,不能使用npm來管理專案
² 缺乏語法高亮和提示
² 沒有針對單個元件的css樣式支援
針對於上述的問題，vue框架發布了vue-cli專案生成工具，vue-cli是乙個基於 vue.js 進行快速開發的完整系統， 致力於將 vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基於智慧型的預設配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。--引用webpack編譯打包專案
工具安裝
vue-cli3.x以上版本需要 node.js 8.9 或更高版本(推薦 v10 以上)。
cnpm i -g @vue/cli
## 安裝成功後，檢查
建立專案
# 首先需要進入到對應的目錄中
(英文目錄不要有空格
),執行如下命令
vue create 專案名稱
(建立時會自己以對應的專案名稱生成目錄
)## 例
vue create hello-world 命令列模式 vue ui 圖形
在命令終端中輸入命令進入
選擇手動配置
選擇預設定選項
選擇css預處理語言
生成專案配置檔案選擇
不儲存前端設定的配置
回車後，專案就開始通過npm進行建立和安裝
注：npm最好之前，通過
nrm來切換到**映象中
看到命令列中有此提示，表示建立vue專案成功
先cd到檔案目錄然後再
通過npm run serve啟動開發專案
重要目錄
srcmain.js 專案入口檔案
components 自定義的功能元件
views 展示檢視元件
assets 靜態資源目錄
單檔案元件
當我們用vue component定義全域性元件時，然後使用 new vue 在每個頁面指定乙個容器元素 這種方式可以在中小型的專案中執行的很好，但是在大型專案中，就會暴露很多缺點，又或者你的專案中前端完全由js控制，下面這些缺點將會暴露的很明顯 1，全域性定義，強烈要求每個component不能重...
vue 單檔案元件
vue.js自定義的一種檔案格式 vue檔案，稱為單檔案元件，就是將html css js封裝在同乙個檔案內，從而實現了對乙個元件的封裝，乙個.vue 檔案就是乙個單獨的元件。1 編寫單檔案元件 vue結尾的檔案 由3部分組成 html template css style js script ht...
2 單檔案元件
閱讀 vue cli 3 的官方文件 vue create my components將之前的 my button 元件單獨做乙個檔案並放入 my components src components 資料夾中 將預設的helloworld修改為my button 使用 npm 指令碼執行 vue c...