（三）搭建前端—Vue生态

在前端这块，涉及的有nodejs、webpack、Git、babel等等等等，好吧，当时我也是一脸懵逼，不过现在就好了那么一点了，那咱就直接上手吧

 

1、安装nodejs，至于为什么安装nodejs，前面也说了，只是为了使用里面自带的npm包管理工具而已，现在这个时候深入nodejs无异于找死（每次用中文输入法输入npm，第一个显示“你怕吗”，我擦，我真的好怕，不信？）

　　　　直接上官网安装吧，官网传送门（我还是先我电脑上的nodejs删了吧，还原最真实现场）

　　　　基本上无脑安装，下一步，下一步，等等，谁要是又安装在C盘，那你就等着吧！！！

检查一下nodejs安装成功没，win+R，输入cmd，再输入node -v,显示版本号就表示安装成功了

再来看看我们要的npm（你怕吗？）

 

好的，完美，但是现在我们需要从Windows自带的命令行转到Git上，你说为什么？一，为了装逼，二，还是为了装逼，三，Git也具有命令行的功能，而且有五颜六色的黑，那就来安装Git吧

Git安装传送门->选择windows(好吧，我又要卸载我的Git了，心痛)

 基本上也是无脑安装，你再敢放C盘？？！！，就是下面这个界面了，五颜六色的黑，在桌面或者任何一个文件夹里右键就会有Git的身影

 

一般我只会用到Git bash here ，至于Git GUI Here是个Git界面，不推荐使用，毕竟不那么装逼

在桌面打开Git，输入node -v和npm -v，效果跟在Windows命令行一样的

但是这里我推荐一下cnpm，这个跟npm是一毛一样的，但是npm是在国外的，所以有时候下载速度会很慢，这个cnpm在网上说是npm的淘宝镜像（应该是跟我想的淘宝有点关系的吧）

那就来安装吧(看吧，我这里用npm安装cnpm就有点慢了)

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 

看下cnpm是否安装成功,看到cnpm@5.2.0就应该有点小激动了

好了，做了这么多准备工作，该正式进入Vue了，在桌面打开Git

$cnpm install --global vue-cli（全局安装vue-cli）
$vue init webpack my-project(创建一个基于 webpack 模板的新项目)

然后一路回车就好，现在先不管这些,这个vue-router就是我们的vue的前端路由，当然选Y了

这个可能花费的时间比较长，因为要安装相关的包

 完成后出现了“To get started”，那咱就按它说的做吧

 

$cd my-project
$cnpm run dev

 

 然后眼前闪过一堆代码，最后一句，你所创建的应用已经在运行，可以打开你的浏览器，输入“http://localhost:8080”就能看到默认界面了

 

 

现在就找一找我们创建的文件吧，在桌面上的某个地方，打开它，这里推荐一款比较好的编辑器，sublime，以后我都会使用这个编辑器的

把这个文件拖到sublime里去看下，文件的介绍我会稍后说

最后就是发布了（这个跟webapi是一样的）

$cnpm run build

 

 

发布完后，会有提示说，该文件必须放到服务器上才能有用，稍后再放进去吧 

 

然后你的项目文件夹会出现一个dist（distribution的缩写）的文件，这个就是发布后的文件，

 

然后把这个文件上传到服务器上就好了，那么问题来了，该怎么上传呢？

过了这么久，你只记得

　　　　

却独独忘了我，我的作用也挺大的啊，为什么要抛弃我…

 

打开WinSCP，输入相关信息（经常使用的话，可以点“save”），点击login

 

然后就进来了，再回到根目录，一直点箭头指向的地方

原则上放到服务器上任何一个地方都可以，但是我们就一定要有规范，那咱们就放到var文件夹吧，在进入www文件夹，

这个……aspnetcore有点熟悉啊，不就是我们在.net core 创建的网站吗，没错啦，然后咱们就在这里新建一个wwwroot文件，来放网页文件吧

空白处右键->new->Diretcory,输入wwwroot，ok

我……这不是很尴尬，不怕，稍微懂点英语就知道“Permission denied”的意思，没权限，那怎么搞呢？

回到putty，我putty又回来了，哈哈哈哈

root@ubuntu:/# chmod -R 777 /var/www

 

稍微解释一下：

chmod：权限管理的关键字

-R：作用于指定目录及其子目录下所有文件

777：所有权限

/var/www：要指定的目录

然后在会到WinSCP,点击"Retry"（重试），然后就不会报错了

进入wwwroot，空的（废话），然后再把dist的里面的东西放到这里就好

那咱在在浏览器看下192.168.253.129？唉？不对啊，这不是我想要的啊，别急，还记得jexus吗，我们还需要在这里配置一下呢

 

上次编辑jexus的siteconf的文件是在putty里编辑的，现在有了WinSCP了，直接找到那个文件就好

但是这里已经有个文件了，该怎么办呢？没关系，代理服务器的作用就是可以让外部访问代理服务器指定的端口，也就是说可以在服务器上放多个网站。

首先复制粘贴这个default文件

右键default文件->Diplicate,修改一下名字就好

双击666，？？！！双击wwwroot

port=80
root=/ /var/www/wwwroot（网页存放的路径）
hosts=*    #OR your.com,*.your.com


# addr=0.0.0.0
# CheckQuery=false
NoLog=true
# AppHost={CmdLine= dotnet /var/www/aspnetcore/aspnetcoreapp.dll;AppRoot=/var/www/aspnetcore/;Port=0}（重新注释掉这一行）
# NoFile=/index.aspx
# Keep_Alive=false
# UseGZIP=false

 

 最后既然配置好了，就要重新启动jexus，让新配置生效

root@ubuntu:/# sh /usr/jexus/jws restart

 

 然后再来看看192.168.253.129，啊哈，有效果了

到这里，前端网页部署到服务器上已经完成了，其中最主要的就是我们在webapi和vue的开发了，或许有人会问，那我在数据库的数据怎么在前端展示呢？不急慢慢来，这么多东西，其中肯定会出错的吗，即使不出错，把这些过程多练习几遍，也会出错的，相信我