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 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
js 事件小结 表格区别
2007/08/13 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python魔术方法专题
2020/06/19 Python
Python分类测试代码实例汇总
2020/07/23 Python
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
培训讲师邀请函
2014/01/10 职场文书
安全生产管理责任书
2014/04/16 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
聊一聊python常用的编程模块
2021/05/14 Python