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 相关文章推荐
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
JS实现打字游戏
Dec 17 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
在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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
Python字典对象实现原理详解
2019/07/01 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
Structs界面控制层技术
2013/10/11 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
企业法人授权委托书
2014/04/03 职场文书
机动车登记业务委托书
2014/10/08 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
详解Python内置模块Collections
2022/03/22 Python