时间:2021-05-26
项目完成之后,当然不能满足于在我们的开发环境下跑一跑。我们可以打包发布到服务器上,让大家一起来欣赏一下你的作品。
那么 vue 项目如何打包发布呢,新建的项目目录下通常都有一个 README.md 的文件,里面就描述了发布的步骤:
下面这个是 vue-cli 3.x 创建的项目中的 README.md 文件内容:
# firstpage## Project setupnpm install
### Compiles and hot-reloads for developmentnpm run serve
### Compiles and minifies for productionnpm run build
### Run your testsnpm run test
### Lints and fixes filesnpm run lint
### Customize configurationSee [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 了么。
因此,若羽在这里倡导并向大家提出建议:
为自己的代码负责,为自己负责。
从个人的角度:
这里推荐两本书:
《代码整洁之道》
《重构改善既有代码的设计》
很值得一看。
以上就是本次介绍的全部知识点内容,感谢大家的阅读和对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
TL;DR本文细致讲解了在NPM上发布一个Vue组件的全过程,包括创建项目、编写组件、打包和发布四个环节。创建项目这里我们直接利用@vue/cli来生成项目。如
大家好,这节我们主要讲解项目的发布,其实很简单,没有大家想的那么复杂,具体如下操作。一、创建VUE项目首先我们需要创建VUE项目,创建项目的代码如下:#全局安装
vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目,GitHub地址是:https://github.com/vuej
本文实例讲述了Vue-CLI与Vuex使用方法。分享给大家供大家参考,具体如下:1、通过Vue-CLI创建项目Vue-CLI是Vue用于创建Vue项目的脚手架工
本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下:vue-cli是一个官方发布vueJS项目脚手架:https://github.com/vue