Vue2.0如何发布项目实战


Posted in Javascript onJuly 27, 2017

大家好,这节我们主要讲解项目的发布,其实很简单,没有大家想的那么复杂,具体如下操作。

一、创建VUE项目

首先我们需要创建VUE项目,创建项目的代码如下:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

项目截图如下:

Vue2.0如何发布项目实战
项目截图

二、项目打包

在打包之前需要修改一个地方,那就是config->index.js文件,修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下:

Vue2.0如何发布项目实战
index.js文件

//上面文件改好后,开始打包,执行如下命令:
npm run build

Vue2.0如何发布项目实战打包后的截图

打包后,项目目录下会生成dist文件夹,这就是我们的整体项目。如图所示:

Vue2.0如何发布项目实战
dist文件夹

三、发布

最后一步就简单了,直接把 dist 目录丢到服务器就可以了,是不是很简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
javascript之解决IE下不渲染的bug
Jun 29 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
jQuery实现评论模块
Aug 19 jQuery
在Vue中如何使用Cookie操作实例
Jul 27 #Javascript
vue 怎么创建组件及组件使用方法
Jul 27 #Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 #Javascript
Vue中如何实现轮播图的示例代码
Jul 27 #Javascript
基于构造函数的五种继承方法小结
Jul 27 #Javascript
vue中各组件之间传递数据的方法示例
Jul 27 #Javascript
微信小程序 页面跳转传值实现代码
Jul 27 #Javascript
You might like
php函数传值的引用传递注意事项分析
2016/06/25 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
重定向实现代码
2006/11/20 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python 实现12306登录功能实例代码
2018/02/09 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python多线程同步之文件读写控制
2021/02/25 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
干部现实表现材料
2014/02/13 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
三方股份合作协议书
2014/10/13 职场文书
英语演讲开场白
2015/05/29 职场文书
永不妥协观后感
2015/06/10 职场文书
独生子女证明范本
2015/06/19 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书