Vue 全家桶搭建後臺管理系統（1、搭建項目）

準備工做

該項目是使用 Vue 官方提供的 vue-cli 這個構建工具，大大下降了咱們使用webpack來配置項目的難度。
一、該項目要基於node環境，因此咱們要去官網下載安裝（具體再也不贅述）；
二、安裝npm，通常安裝最新版node的時候就會安裝好npm。

開始搭建

1、全局安裝 vue-cli，輸入下面的命令：npm install -g vue-cli

2、建立一個基於 webpack 模板的新項目 myProject（項目名可本身定義），輸入命令：vue init webpack myProject

接下來通常都按 enter 鍵便可，但要注意如下兩點：

一、項目名稱：項目名不能包含大寫字母，myProject中包含大寫字母，因此須要修改。

二、ESLint 即代碼規範，這個直接選 Y 的話，代碼寫得不規範會報錯，新手很蛋疼，因此能夠選 n。

三、項目建立成功

3、進入建立的項目文件夾：cd myProject

4、啓動本地服務器：npm run dev

一、在瀏覽器中打開圖中地址：

二、能夠看到項目搭建成功！

5、接下來安裝咱們須要的插件依賴包

一、安裝 element-ui（基於vue的UI框架)： npm i element-ui -S，而後在 main.js 中寫入黑體部分，修改成如下內容：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

二、安裝 axios (AJAX與後臺交互數據)
npm install axios -s
三、安裝 vuex（基於vue的狀態管理模式）
npm install vuex -S
四、安裝 echarts（圖表顯示）
npm install echarts --save

6、偷懶借菜鳥教程的說明，註釋下咱們的項目目錄