最近看了下vue的框架,隨手做了個項目,記錄分享下
技術框架: vue.js + webpack + element ui + echart
首先看下npm package.js
上面的圖 主要是配置的是npm 打包命令 和引入vue-route vue的路由文件 和element ui 文件 下面這個是 引入echart.js 文件, 基本資料就這些。
首先我們開始構建一個vue-cli項目
1.首先node環境（這里就不多啰嗦了）
2.執行vue-cli命令 npm install --global vue-cli （這里你可以全局裝，也可以裝到項目路徑）
3.檢查下 vue是否裝好 vue -V （能看到版本號就是安裝成功了）
4.用vue新建一個項目 vue init webpack my-project ESLint規范建議開啟，加強代碼規范（中間遇到 ESLint可以自己選擇開啟 或者關閉）
5.弄好項目后 npm install 下 初始化下包
6.最后進入項目路徑 執行 npm run dev 命令 如果能看到頁面 證明項目搭建成功 
更加詳細的配置 請參考 http://www.cnblogs.com/pearl07/p/6247389.html
上面已經完成了vue-cli項目的基本構建 vue+webpack已經集成了
這時候我們需要構建兩個頁面 看下路由功能
ctrl + c (停止當前服務器)
然后 npm install vue-router --save-dev 把vue-router包導進來
然后我們用組件化思想去控制代碼 把路由當成一個組件來考慮
結構目錄如上,
首先我們在main.js 里面 把 router引進去,
,然后再router目錄下 index.js 定義路由
這里我們就定義好了 hello 和home 兩個路由結構了 然后再 app.vue里面把路由寫好,router-link標簽 to(路徑)即可,
到這里路由差不多是完成了,
接下來我們引入element ui 和 echarts.js 和引入路由 定義路由的方式大同小異
執行 npm install *** --save-dev 就能導入相應的包了 然后再main.js 里面導入進去 值得注意的是 這個css別忘了引入
echart的引入 和使用
最后效果圖
項目地址:https://github.com/huyinxuan/vue-project 有興趣的可以去看看 項目剛剛寫 有些簡陋....有問題 提出來 大家可以討論下!