Vue发布项目实例讲解
项目完成之后，当然不能满足于在我们的开发环境下跑一跑。我们可以打包发布到服务器上，让大家一起来欣赏一下你的作品。
那么 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 目录：
打开我们可以看到一个 index.html，但是你直接打开是一片空白的。
这里就需要将其托管到一个 web容器中，比如 iis, apache, nginx等等，有兴趣的童鞋可以自己搭建上述中的一个然后将打包的目录上传上去看看效果。
写在最后
这个小项目其实瑕疵很多，包括登录后的逻辑，发布文章时登录的验证等等，但这个项目毕竟是一个用来熟悉 vue框架的。因此若羽并没有打算在这个项目上花太多功夫，让其变成一个完整的、简洁的、真实可用的博客系统（其实已经完成大半的功能了），毕竟这样对于新手来说引入了太多不相关的因素，不能很好的专注在如何使用vue上。相信从头一步跟着文章学到这里的童鞋已经能够自己写出来一个真正的博客系统了，除了后端接口以外，不过这里我们可以使用 postman的 mock功能，系列文章中也有相关教程。
所有文章中的接口均是来自 postman 的 mock 功能噢。
后续的文章会开始实践如何优雅的写代码了。好的代码会增加可读性，降低团队协作的沟通成本，同时也能增强项目的可维护性、可扩展性等等。
从另一方面来看，代码能写的更好，为什么要写的差呢？
请务必无视网络中流传的所谓代码越烂越好，最好写到只有自己才能看得懂的地步，才会成为公司不可或缺的中流砥柱。
这不是优秀，不是生存宝典，而是不负责任！！！
成为公司中流砥柱、受部门领导和同事认可或者是更优秀的人，不是想着取巧，而是要真材实料（不一定是编码能力，比如能很好协调和同事之间的关系，可以为领导出谋划策，可以为团队带来欢乐、技术提升等等）。
不关从事哪一行，都要努力让自己变得更优秀，而不是捣乱。
代码越烂，那么越难以和别人沟通，如何进步？并且团队其他人无法阅读和维护，如何保持和同事在项目上的和谐？以后面试时，和面试官说曾经有一个只有你自己才能维护的系统，自己用了多少手段让同事没办法看懂代码么？如此作为，实在损人不利己。
这样达到中流砥柱的背后，不过是穷途末路后的挣扎而已。如此行为，谁还能信任你，哪天埋个雷把大家都 boom 了么。
因此，若羽在这里倡导并向大家提出建议：
为自己的代码负责，为自己负责。
从个人的角度：
- 可以让自己的代码更具可读性，不再害怕历史代码
- 方便的与他人交流
- 锻炼自己的思维，每一个变量名，函数名，文件名的思考都能让自己的思路更加清晰，每一个文件存在的位置，让自己对于项目的结构有着更清晰的认知
这里推荐两本书：
《代码整洁之道》
很值得一看。
以上就是本次介绍的全部知识点内容，感谢大家的阅读和对脚本之家的支持。
相关文章
这篇文章主要介绍了在VUE3中如何禁止网页返回到上一页,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于vue中插槽slot的理解和使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
本文主要介绍了vue中table表头单元格合并(附单行、多级表头代码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。下面就来介绍如何利用指令来实现全选。2016-09-09
可能很多小伙伴之前都了解过 Vue2实现响应式的核心是利用了ES5的Object.defineProperty 但是面对面试官时如果只知道一些模糊的概念。只有深入底层了解响应式的原理，才能在关键时刻对答如流,本文就来和大家详细聊聊，感兴趣的可以收藏一下2022-12-12
这篇文章主要为大家详细介绍了基于vue.js实现分页查询功能，vue.js实现数据库分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了vue 登录滑动验证实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue3项目如何使用prettier格式化代码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
本文主要介绍了vue2+tracking实现PC端的人脸识别示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
最新评论