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 相关文章推荐
JS Replace()的高级使用方法介绍
Jun 29 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
Vue基础配置讲解
Nov 29 Javascript
js实现div色块拖动录制
Jan 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
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php中define用法实例
2015/07/30 PHP
Yii rules常用规则示例
2016/03/15 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
table行随鼠标移动变色示例
2014/05/07 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
个人简历自我评价八例
2013/10/31 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
道德之星事迹材料
2014/05/03 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
农民工讨薪标语
2014/06/26 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python