前后端分离之Vue项目构建测试打包发布

写在开始

其实之前对前后端分离研究过一段时间,中间由于项目进度耽搁也就不了了之了,最近项目中部分使用到了Vue,恰逢前端小伙伴们居然说要使用这个东西,也许是前端的工作的确有点太乏味了,他们想找点新鲜感。

目前我们前后端开发配比是1:5的样子,前端负责提供静态页面,后端负责后台开发以及前台数据渲染以及效果展示,从工作量上以及人员分配上来说还是比较合理的。

那么问题来了,如果前端真想找新鲜感,在不增加人手的情况下,他们的新鲜感很可能会被进度拖入无尽的深渊。对于后端开发来说,我们一般开发一个功能,后台和前台工作量的比例一般会是1:3,甚至会更高(排除简单的增删查改和套模版)。

尽管前后端分离已是趋势,但是对于大部分中小公司,特别是只有20-30人的开发团队,前后端分离可能会是个大坑,如果没准备好,入坑请慎重。

准备环境

在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

安装Node.js以及npm包管理器:https://nodejs.org/en/

国外网址可能有点卡,可以看点比的,慢慢等待就是了, 下载成功后,与安装普通软件一样下一步就可以。

安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

由于npm资源是国外的,对于国内用户来说,你懂的,速度慢并且会导致npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm:https://npm.taobao.org/

安装cnpm:

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

持久使用:

npm config set registry http://registry.npm.taobao.org

// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

安装webpack:

cnpm install webpack -g

安装vue-cli脚手架构建工具:

 cnpm install --global vue-cli

Vue项目

执行一下命令:

vue init webpack first_vue

命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。first_vue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中。

安装项目所需的依赖(项目下会多出一个node_modules文件夹):

cnpm install 

安装 vue 路由模块vue-router和网络请求模块vue-resource:

cnpm install vue-router vue-resource --save

运行测试项目:

 npm run dev

打包项目(项目下会多出一个dist文件夹):

npm run build

切换到dist目录我们会发现有一个static文件夹和index.html文件,这时候我们可以直接访问index.html页面的,但是由于路径问题可能会导致访问不成功。

建议下载一个MyWebServer3621小型web服务器进行测试:

浏览器中输入:http://localhost/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

18个网站优化技巧

18个网站优化技巧 快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。 ?   ...

49680
来自专栏smy

怎样提高网站访问速度缩短网页加载时间

本文主要参照http://developer.yahoo.com/performance/rules.html,结合多年网站开发经验总结而来。 1、减少页面HT...

38170
来自专栏用户2442861的专栏

Python安装模块出错解决的办法(pip相关的安装)

然后在cmd进入命令行窗口, 进入ez_setup.py目录,我这里是下载放置在F盘,然后输入命令:python ez_setup.py 系统就会自动下载se...

55930
来自专栏Timhbw博客

小白搭建博客教程-wordpress等博客平台安装步骤(4)完结

2016-06-1023:25:51 发表评论 3,236℃热度 上一回说道:小白搭建博客教程之流程,这次趁着端午节写完它,也算是一个了结。 ? 教程有4篇:...

50980
来自专栏BeJavaGod

搜索服务solr 一二事(1) - solr-5.5 使用自带Jetty或者tomcat 搭建单机版搜索服务器

solr,什么是solr,就是你要吃的东西“馊了”,不能吃了,out of date~ 嘛。。。开个玩笑,发音就是‘搜了’,专门用于搜索的一个开源框架,lunc...

33360
来自专栏不二小段

【爬虫军火库】AnyProxy安装使用【Windows】

分析网络请求详情是写爬虫应用的初始步骤,抓包便是一种十分强大的分析手段,尤其是对手机App进行抓包,往往能收获到Web端没有的API接口。抓包的工具多种多样,功...

2.2K60
来自专栏Albert陈凯

2018-09-12 把HttpRequest 转换成curl 记录到console

开发机不能联网了,要上Dev上面测试,写几行代码重新编译一遍谁受得了,老板给出方案,转成curl 在命令行运行一下不就成了

35920
来自专栏武军超python专栏

2018年8月9号飞机大战项目答辩得到的经验和基本的win终端命令

今天遇到的新单词: adapter n适配器 virtual adj 虚拟的 interface n接口 corporation n公司,法人

12830
来自专栏Coco的专栏

【nodeJS爬虫】前端爬虫系列 -- 小爬「博客园」

28580
来自专栏腾讯NEXT学位

React 16 加载性能优化指南(上)

公司的新项目迁移到了 React 16 和 Webpack 4.0,写一篇文章来总结一下。

72250

扫码关注云+社区

领取腾讯云代金券