做了一个前后台分离式的前端,因为实验室保密问题,所以特别摘录出一个迷你版本,特点为,可以直接打开浏览器观看,也可以启动自身的浏览器观看.

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


Logo

前往低代码交流专区

更多推荐