Vue发布项目实例讲解


Posted in Javascript onJuly 17, 2019

项目完成之后,当然不能满足于在我们的开发环境下跑一跑。我们可以打包发布到服务器上,让大家一起来欣赏一下你的作品。

那么 vue 项目如何打包发布呢,新建的项目目录下通常都有一个 README.md 的文件,里面就描述了发布的步骤:

下面这个是 vue-cli 3.x 创建的项目中的 README.md 文件内容:

# firstpage

## Project setup

npm install

### Compiles and hot-reloads for development

npm run serve

### Compiles and minifies for production

npm run build

### Run your tests

npm run test

### Lints and fixes files

npm run lint

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

这里描述了常用的指令,我们需要的那一条就是:

npm run build

这运行这一条命令就可以将项目打包成一个 dist 目录,里面只有静态 html 和 js 文件。

打包

npm run build

运行上面的命令, 运行完成后就可以看到项目的根目录下面多了一个 dist 目录:

Vue发布项目实例讲解

打开我们可以看到一个 index.html,但是你直接打开是一片空白的。

这里就需要将其托管到一个 web容器中,比如 iis, apache, nginx等等,有兴趣的童鞋可以自己搭建上述中的一个然后将打包的目录上传上去看看效果。

写在最后

这个小项目其实瑕疵很多,包括登录后的逻辑,发布文章时登录的验证等等,但这个项目毕竟是一个用来熟悉 vue框架的。因此若羽并没有打算在这个项目上花太多功夫,让其变成一个完整的、简洁的、真实可用的博客系统(其实已经完成大半的功能了),毕竟这样对于新手来说引入了太多不相关的因素,不能很好的专注在如何使用vue上。相信从头一步跟着文章学到这里的童鞋已经能够自己写出来一个真正的博客系统了,除了后端接口以外,不过这里我们可以使用 postman的 mock功能,系列文章中也有相关教程。

所有文章中的接口均是来自 postman 的 mock 功能噢。

后续的文章会开始实践如何优雅的写代码了。好的代码会增加可读性,降低团队协作的沟通成本,同时也能增强项目的可维护性、可扩展性等等。

从另一方面来看,代码能写的更好,为什么要写的差呢?

请务必无视网络中流传的所谓代码越烂越好,最好写到只有自己才能看得懂的地步,才会成为公司不可或缺的中流砥柱。

这不是优秀,不是生存宝典,而是不负责任!!!

成为公司中流砥柱、受部门领导和同事认可或者是更优秀的人,不是想着取巧,而是要真材实料(不一定是编码能力,比如能很好协调和同事之间的关系,可以为领导出谋划策,可以为团队带来欢乐、技术提升等等)。

不关从事哪一行,都要努力让自己变得更优秀,而不是捣乱。

代码越烂,那么越难以和别人沟通,如何进步?并且团队其他人无法阅读和维护,如何保持和同事在项目上的和谐?以后面试时,和面试官说曾经有一个只有你自己才能维护的系统,自己用了多少手段让同事没办法看懂代码么?如此作为,实在损人不利己。

这样达到中流砥柱的背后,不过是穷途末路后的挣扎而已。如此行为,谁还能信任你,哪天埋个雷把大家都 boom 了么。

因此,若羽在这里倡导并向大家提出建议:

为自己的代码负责,为自己负责。

从个人的角度:

  • 可以让自己的代码更具可读性,不再害怕历史代码
  • 方便的与他人交流
  • 锻炼自己的思维,每一个变量名,函数名,文件名的思考都能让自己的思路更加清晰,每一个文件存在的位置,让自己对于项目的结构有着更清晰的认知

这里推荐两本书:

《代码整洁之道》

《重构改善既有代码的设计》

很值得一看。

以上就是本次介绍的全部知识点内容,感谢大家的阅读和对三水点靠木的支持。

Javascript 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 #Javascript
百度小程序自定义通用toast组件
Jul 17 #Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 #Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 #Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 #Javascript
微信小程序-API接口安全详解
Jul 16 #Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
You might like
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php常用文件操作函数汇总
2014/11/22 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
图解js图片轮播效果
2015/12/20 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
webpack4 处理CSS的方法示例
2018/09/03 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
JS计算斐波拉切代码实例
2019/09/12 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python 怎样进行内存管理
2020/11/10 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
大学生党课思想汇报
2013/12/29 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
保护环境建议书100字
2014/05/13 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript