vue.js做前端工程總結

做了一個前後臺分離式的前端,因爲實驗室保密問題,所以特別摘錄出一個迷你版本,特點爲,可以直接打開瀏覽器觀看,也可以啓動自身的瀏覽器觀看.

demo地址爲:https://github.com/seeseaseesea/vue-learning

通過以上代碼,可以學習如何創建使用.vue文件,以及如何寫table,如何使用e-charts,以及使用bootstrap

[工程架構]

工具: npm包管理工具,webpack打包工具

模型:vue MVVM模型

樣式:bootstrap佈局,vue-strap樣式

組件:echarts繪製圖表,vue-resource與服務器交互

截長圖：snagit

[學習及工具網站]

佈局 bootstrap: http://www.runoob.com/bootstrap/bootstrap-tutorial.html

樣式 vue-strap: http://yuche.github.io/vue-strap/

圖表 echarts: http://echarts.baidu.com/

取色 : http://www.atool.org/colorpicker.php

版本管理 github: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

編輯器：brackets

安裝方法：

sudo apt-add-repository ppa:webupd8team/brackets
sudo apt-get update
sudo apt-get install brackets

服務器：nginx

安裝：

apt-get update
apt-get install nginx

配置：在http裏面添加：

server {

listen 8001;

server_name localhost;

location / {

        root /home/hadoop/Projects/code-clone-frontend-rf;

        index index.html;

}

}

前端想法：http://www.cnblogs.com/linfangshuhellowored/p/5657285.html

一點點感悟:

當自己不懂的時候看網上的資料,發現還是不懂,因爲一些細節被隱藏了,本來希望自己做一個完全沒有隱藏細節的demo給大家,但是還是不能過如願,希望每個人都能夠不怕難地去摸索,這樣跌打滾爬後纔會有一些美好的結果.