首先需要配置node和npm，如果沒有安裝的話，百度一下安裝教程。
如果感覺npm下載速度慢，可以使用淘寶鏡像cnpm,鏈接地址：
http://npm.taobao.org/
安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成準備工作
1、開始安裝腳手架工具vue-cli
打開cmd,輸入以下命令，在全局安裝vue-cli
方式一 npm install --global vue-cli 方式二 cnpm install --global vue-cli 方式三 yarn //需要自己去百度配置
2、初始化vue項目
windows下：管理員進入cmd，進入指定文件夾，命令如下：
初始化項目，命令如下：
vue init webpack blogweb
我這裏只安裝router，下章定義權限需要。直到出現下載提示： 等待下載成功！
定位到項目文件夾
cd blogweb
npm i //安裝所以的依賴包
npm run dev
常見一些錯誤，一般都是依賴包沒安裝完，或者 ESLint tests e2e選擇了yes
處理方式（提示缺少那個模塊，就安裝那個模塊就OK了）：
npm i webpack-dev-server
項目安裝完成，運行項目。
cd blogweb
npm run dev
證明成功了！webpack 正在打包。
項目文件描述
├── README.md 項目說明文檔
├── node_modules 項目依賴包
├── build 編譯配置文件，可忽略
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config 項目基本設置文件夾
│ ├── dev.env.js 開發配置文件
│ ├── index.js 配置主文件
│ └── prod.env.js 編譯配置文件
├── index.html 項目入口文件
├── package-lock.json npm5 新增文件，優化性能
├── package.json 項目依賴包配置文件
├── src 項目文件【開發】
│ ├── App.vue APP入口文件
│ ├── assets 初始項目資源目錄
│ │ └── logo.png
│ ├── components 公共組件目錄
│ │ └── HelloWorld.vue 測試組件
│ ├── main.js 主配置文件
│ └── router 路由配置文件夾
│ └── index.js 路由配置文件
└── static 靜態資源目錄
3、配置src文件
先配置如下項目結構，這個純屬看團隊或者個人的愛好，沒有強制性規範
-------------------------------------------------------------------------------------------------------------------------
├src
├── App.vue APP入口文件
├── assets 靜態文件
├── api 接入後端服務的基礎 API
│ └── index.js 抽取出api請求
├── components 組件
├── config 項目配置文件夾
│ └── index.js 項目配置文件
├── router 路由文件夾
│ └── index.vue // 默認子路由
├── main.js vue入口文件
├── page 各個頁面
├── style 樣式
├── store vue狀態管理
└── utils 常用工具文件夾
└── service 服務
-------------------------------------------------------------------------------------------------------------------------
├static 一般不頻繁修改，壓縮過的文件，我們可以直接放裏面，可減少打包的時間
├── css 樣式
├── font 字體
├── image 圖片文件，大項目可精確到模塊
├── login 比如登陸
└── js 腳本
表現層
store/ - Vuex 狀態管理
router/ - 前端路由
view/ - 各個業務頁面
component/ - 通用組件
業務層
service/ - 處理服務端返回的數據(類似data format),例如 service 同時調用了不同的api,把不同的返回數據整合在一起在統一發送到 store 中
API 層
api/ - 請求數據,Mock數據,反向校驗後端api
util 層
util/ - 存放項目全局的工具函數
好，我們的第一步，已經順利完成了，下一步我們開始寫代碼。