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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
C++中的string类的用法小结
Aug 07 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
js prototype深入理解及应用实例分析
Nov 25 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php获取url参数方法总结
2014/11/13 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python构造函数init实例方法解析
2020/01/19 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
Linux面试题LINUX系统类
2014/11/19 面试题
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
消防安全宣传口号
2014/06/10 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
发票退票证明
2015/06/24 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
MySQL中varchar和char类型的区别
2021/11/17 MySQL
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏