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的一些看法
May 27 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
JS继承用法实例分析
Feb 05 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
js实现缓动动画
Nov 25 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
通过cmd进入python的步骤
2020/06/16 Python
详解python logging日志传输
2020/07/01 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
国家助学金获奖感言
2014/01/31 职场文书
党课培训主持词
2014/04/01 职场文书
师德师风事迹材料
2014/12/20 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
葬礼主持词
2015/07/02 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android