前后端分离之Vue项目构建测试打包发布-阿里云开发者社区

开发者社区> 开发与运维> 正文

前后端分离之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,如下图,如果出现相应的版本号,则说明安装成功。

1

由于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服务器进行测试:

2

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

3

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章