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给大家,但是还是不能过如愿,希望每个人都能够不怕难地去摸索,这样跌打滚爬后才会有一些美好的结果.