一、先介紹一下我接下來要做的項目

項目：ide可視化工具

技術應用：

　　Vue2.0（js框架）：https://cn.vuejs.org/

　　ElementUi（餓了嗎ui框架基於vue的）：http://element.eleme.io/#/zh-CN

　　Ecahrts（圖表）：http://echarts.baidu.com/

　　vue-power-drag（仿grister的vue拖拽插件）：https://xiongcaihu.github.io/#/

項目介紹：ide要實現的是供企業或者個人編輯可視化圖表，適應不同分辨率的屏幕，配置的基本默認樣式達到客戶要求，項目模塊分為儀表盤、工作表、數據源、編輯圖表等。

二、項目環境搭建

　　vue環境配置：

　　首先安裝node：http://www.runoob.com/nodejs/nodejs-install-setup.html
　　1、安裝淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org
　　註：下面的npm可換成cnpm下載快
　　2、安裝webpack：npm install webpack -g
　　3、安裝vue腳手架：npm install vue-cli -g
　　4、cd 目錄
　　5、創建項目：vue init webpack 工程名

　　　　Use ESLint to lint your code：這個是代碼警告提示這個很煩人的建議最好不要

　　　　安裝後的項目目錄

　　　　
　　6、安裝項目依賴：npm install
　　7、安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource：cnpm install vue-router vue-resource --save
　　8、安裝elementui：npm install element-ui --save
　　9、安裝vue的gridster：npm install vue-power-drag
　　10、安裝echarts：npm install echarts -S

　　11、安裝axios驚醒HTTP請求：npm install axios
　　12、啟動項目：npm run dev

　　main.js配置：

　　註：echarts和axios不能像element一樣用use全局使用，只能放在Vue原型上。

　　這個目錄下static文件可以放外鏈js，assets文件放置圖片還有css文件

　　外部css文件引入可以這樣寫：

　　<style>
　　 @import url("assets/css/common.css");
　　</style>

　　外部js引入可以這樣寫：

　　import {getOption,getOption2} from ‘../../../static/js/js.js‘

　　js文件加導出：

總結：項目的技術選型還有環境搭建基本完成可以步入開發了

項目剛開始啟動我後面也會針對項目開發所遇到的問題進行總結

推薦一份簡書（vue從環境搭建到發布）：http://www.jianshu.com/p/5ba253651c3b

vue項目ide（vue項目環境搭建）