首先查看電腦是否已經安裝vue並查看版本：
window+R快捷打開命令行，cmd，輸入node -v回車
如果未安裝操作步驟如下：
1：$ cnpm install vue（新電腦安裝Vue，永久）
2：$ npm install --global vue-cli（安裝vue-cli腳手架構建工具，永久）
3：$ vue init webpack my-project（初始化Vue，創建一個基於 webpack 模板的新項目）
4：回車，填寫y/n （ESLint要選擇n,其他全部y）；
5：$ cnpm install（安裝項目所需要的依賴，也許會自動安裝，可省略）
6：（cd 文件夾名稱）+本地運行項目npm run dev（查看readme里面步驟）
7：打包npm run build（項目完成發布時候才運行）
項目開始步驟：
1：src-compoents（組件文件夾）-創建頁面.vue
2：assets放公共靜態css/js/image/等資源
3：router:配置路由（唯一一個路由文件）
ctrl+alt+d注釋
突出顯示匹配標簽標記，安裝vincaslt
中文：安裝language packs插件后，Ctrl+shift+p,輸入language文件找到locale.json更改配置en>zh-cn
這是vue 創建的最簡單的項目結構,接下來我會給大家建議,項目如何分類文件名,這不是固定的寫法,但,是更多開發者的共同選擇
├── src # 源代碼
│ ├── api # 所有請求
│ ├── assets # 主題 字體等靜態資源
│ ├── components # 全局公用組件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 項目所有 svg icons
│ ├── lang # 國際化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局樣式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有頁面
│ ├── App.vue # 入口頁面
│ ├── main.js # 入口文件 加載組件 初始化等
├── tests # 測試
├── .eslintrc.js # eslint 配置項
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
// ....
這里並不是全部的分類都是這樣, 只是把一些,大家習慣這樣寫的都放在這里.
vue着手開始之大白話
1：首先打開app.vue.盛放最大的框架 <router-view/>一個跳轉的路由,相當於這一塊界面是可以替換的2：進入index.vue主頁面，開始布局， <Header></Header>是固定的所以直接這樣寫。
<keep-alive>
<router-view></router-view>
</keep-alive>
這中間是變化的，所以這樣寫。
3：開始寫局部里面的小版塊了。可以看頭部是靜態不變的，所以用header標簽寫起來，點擊不同的tab切換不同的頁面（路由）
4：點擊tab時候切換的頁面有2種布局。
（1）：只有一個整體的頁面
（2）：頁面分為左右2個部分。這個時候發現左邊是靜態的，右邊是動態的。所以在這個頁面將動態的又封裝起來，點擊左邊菜單切換路由。
其中以el標簽的是引用模塊化elementUI，引用他的樣式和方法
一般就elementUI和IVew，引入進來，倒進來直接用