码迷,mamicode.com
首页 > 其他好文 > 详细

(三)搭建前端—Vue生态

时间:2018-02-05 10:42:11      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:style   需要   get   scm   路径   registry   发布   keep   电脑   

在前端这块,涉及的有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的开发了,或许有人会问,那我在数据库的数据怎么在前端展示呢?不急慢慢来,这么多东西,其中肯定会出错的吗,即使不出错,把这些过程多练习几遍,也会出错的,相信我

 

(三)搭建前端—Vue生态

标签:style   需要   get   scm   路径   registry   发布   keep   电脑   

原文地址:https://www.cnblogs.com/inttochar/p/8398450.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!