一、Vue-cli安裝
vue-cli是vue官方提供的腳手架工具，默認搭建好了一個項目的基本架子，我們在其基礎上進行相應修改即可。
全局安裝：
npm install -g @vue/cli
查看是否安裝成功：
二、命令行方式
1、創建項目
npm create '項目名 '
2、手動選擇配置選項
我們這里選擇手動方式。
3、選擇需要的依賴
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >( ) Babel //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。 ( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含並擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行 ( ) Progressive Web App (PWA) Support// 漸進式Web應用程序 ( ) Router // vue-router（vue路由） ( ) Vuex // vuex（vue的狀態管理模式） ( ) CSS Pre-processors // CSS 預處理器（如：less、sass） ( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint） ( ) Unit Testing // 單元測試（unit tests） ( ) E2E Testing // e2e（end to end） 測試
我們這里選擇：Babel、CSS預處理兩個就可以了，簡單測試demo。
Babel是將高階（es6）語法轉化成低階（es5）的。
CSS預處理是指可以將less、sass等轉成普通css。
4. 選擇css 預處理
5、選擇配置文件存放方式
6、是否將配置保留模板
7、開始安裝依賴包
8、安裝完成
9、目錄結構
各個目錄和文件的作用：
node_modules 依賴包
public 渲染總入口文件，結果都渲染在index.html文件中
src 源碼目錄
.gitignore git忽略設置
babel.config.js babel設置
package.json 依賴包文件
README.md 說明文件
三、VUE ui界面安裝
1、啟動ui界面
2、創建項目
3、輸入安裝項目的文件夾和包管理器，這里選擇npm包管理
4、選擇手動安裝配置
5、配置打包工具babel、Router路由管理、Vuex狀態管理、CSS預處理、質量檢測eslint、使用配置文件
6、選擇CSS預處理和eslint格式化文件
7、是否保存為預設文件，這里選擇不保存
8、創建項目
9、目錄結構
各文件解析
package.json 定義了項目的信息，包括項目名稱、版本、啟動腳本、項目依賴，開發依賴 babel.config.js babel打包的配置文件 postcssrc.js css自動補充一些兼容性代碼的設置 .gitignore git版本忽略文件 .eslintrc.js 配置eslint配置文件，自定義規則 public公共文件 public/index 模板文件，webpack在打包的時候會使用這個文件，生成最后的index.html public/favicon.ico 默認小圖標 src 主文件 assets 靜態資源文件：圖片、字體、圖標 components 組件，從代碼中抽離出可以復用的邏輯，抽象成一個組件以便復用 router 路由管理 store vuex狀態管理 views 視圖，頁面文件 App.vue 基礎組件 main.js 項目入口文件
10、項目結構搭建
github地址：