vue-cli 是vue.js的腳手架，用於自動生成vue.js+webpack的專案模板，分為vue init webpack-****** 專案名 和vue init webpack 專案名 兩種。
當然首先你的安裝vue，webpack，node等一些必要的環境
模組的引入解決了檔案之間依賴引用的問題，而打包則解決了檔案過多的問題。當專案規模增大，模組的數量數以千計，瀏覽器如果要載入如此多的檔案，頁面載入的速度勢必會受影響，而bundler可以把多個關聯的檔案打包到一起從而大量減少檔案的數量提高網頁載入效能。提供模組化的開發方式和編譯打包功能就是webpack的核心，其他很多功能都圍繞它們展開。
下面整個過程是基於已經安裝node.js和cnpm的基礎上，node.js如何安裝就不在這裡詳說了。如何全域性化安裝cnpm，這裡簡單提一下：
npm
install cnpm -g --registry=
出現以上提示表示vue-cli正常安裝成功，可以正式建立vue-cli工程專案了。
vue init webpack確認建立專案後，後續還需輸入一下專案名稱、專案描述、作者、打包方式、是否使用eslint規範**等等，詳見上圖。安裝順利執行後會，生成如下檔案目錄：
（4）最後需要執行命令： npm run dev 來啟動專案，啟動完成後會自動彈出缺省網頁：
到這一步，就算成功利用vue-cli搭建乙個vue專案了，撒花 ~
通過vue-cli搭建乙個vue專案，會自動生成一系列檔案，而這些檔案具體是怎樣的結構、檔案對應起什麼作用，可以看看下面的解釋：
├── build/ # webpack 編譯任務配置檔案: 開發環境與生產環境
│ └── ...
├── config/
│ ├── index.js # 專案核心配置
│ └── ...
├ ── node_module/ #專案中安裝的依賴模組
── src/
│ ├── main.js # 程式入口檔案
│ ├── components/ # 元件
│ │ └── ...
│ └── assets/ # 資源資料夾，一般放一些靜態資源檔案
│ └── ...
├── static/ # 純靜態資源 (直接拷貝到dist/static/裡面)
├── test/
│ └── unit/ # 單元測試
│ │ ├── specs/ # 測試規範
│ │ ├── index.js # 測試入口檔案
│ │ └── karma.conf.js # 測試執行配置檔案
│ └── e2e/ # 端到端測試
│ │ ├── specs/ # 測試規範
│ │ ├── custom-assertions/ # 端到端測試自定義斷言
│ │ ├── runner.js # 執行測試的指令碼
│ │ └── nightwatch.conf.js # 執行測試的配置檔案
├── .babelrc # babel 配置檔案
├── .editorconfig # 編輯配置檔案
├── .gitignore # 用來過濾一些版本控制的檔案，比如node_modules資料夾
├── index.html # index.html 入口模板檔案
└── package.json # 專案檔案，記載著一些命令和依賴還有簡要的專案描述資訊
└── readme.md #介紹自己這個專案的，可參照github上star多的專案。
build/
vue cli vue腳手架使用配置
index.html js路徑問題 config index.js build物件下的 assetspublicpath 改為 assetspublicpath css背景路徑問題 build utils.js if options.extract icon不顯示 build webpack.pro...
Vue cli vue腳手架 安裝
準備工作 首先安裝node 和 npm 不會安裝的話請參考 並且保證node版本是v6及以上，話不多說，上圖 安裝和解除安裝 一.安裝 1.安裝2.x 安裝npm install vue cli g 版本檢視 vue v 或者 vue version 2.安裝3.x 或 4.x 安裝cnpm ins...
vue cli（vue腳手架）搭建專案
vue cli 是乙個官方發布 vue.js 專案腳手架，使用 vue cli 可以快速建立 vue 專案。這篇文章將會從實操的角度，介紹整個搭建的過程。其實這次使用vue cli的過程並不順利，反覆嘗試幾次都遇到以下這個報錯 建立vue cli工程專案時的報錯 在網上查了很多資料才發現原來是nod...