Vue站点的搭建之旅

　  背景

　　      好久没写博客了,此次博客分享一下最近上班空闲时间作的两个业余Demo。分别是V电影App的移动端站点【一直很喜欢用这个APP但是他们没有出对应的mobile端,因此本身开发一个,网址收藏到个人微信里面的,平时玩微信的时候用.】和Cnode的移动端站点。这两次项目也主要是为了练习一下CSS(由于工做项目中css都是UI来作的,咱们平时就是将他们写的静态html页面放到项目中变成的动态html),和学习一下centos的使用，centos上网站搭建的时候，都是在网上搜索的技术博客一步一步操做的（平时主要.net开发对windows服务器比较熟悉,centos 服务器工做中也没接触过）

　   简单介绍:

1.   使用的Vue2+webpack来开发, 经过gulp-ssh来实现自动部署发布包.(gulp-ssh很不错,项目中整合了它，就不用本身手动往服务器上拷贝编译后的html和js文件了)
2.   服务器购买的是阿里云的Centos服务器,330元每一年,我的使用彻底足够了。  点击跳转   香港区的不稳定【是香港运营商问题不是阿里云的问题】,建议购买内地服务器。

 　　　  

           3. 服务端经过tomact+nginx来搭建网站的.

        开发中用到的工具:

            1.  VSCode 项目文本编辑

            2.  Fiddler 用于手机代理抓取V电影App的请求。

            3.  Postman 我的比较喜欢用, 虽然fiddler已经够用了,可是Postman的保持功能仍是颇有帮助的.(如图)我会将每一个请求都保存起来方便开发的时候查看接口。

 

服务器端搭建部署:

              1. 安装tomact:  http://blog.csdn.net/gyming/article/details/36060843

              2. 安装nginx:  https://www.linuxidc.com/Linux/2016-09/134907.htm

              3. 由于是前端单页应用,服务端都是调用别的Api,不在一个domain下,V电影的服务器没有作跨域处理,因此须要经过nginx作反向代理来解决跨域问题,    

 location /movie/apiv3/ {
      proxy_pass https://app.vmovier.com/apiv3/;
}

　　 项目展现: 

             1. V电影:  https://github.com/FourLeafClover/vue-vmovie

                   

 

           2. Cnode: https://github.com/FourLeafClover/vue-cnode