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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
js实现图片放大展示效果
Aug 30 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
vue单元格多列合并的实现
Nov 26 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简单静态页生成过程
2008/03/27 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
JS实用的动画弹出层效果实例
2015/05/05 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
简单实现js上传文件功能
2017/08/21 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
Python实现建立SSH连接的方法
2015/06/03 Python
详解用python实现简单的遗传算法
2018/01/02 Python
谈谈Python中的while循环语句
2019/03/10 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
python中class的定义及使用教程
2019/09/18 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
如何在python中执行另一个py文件
2020/04/30 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
JMS中Topic和Queue有什么区别
2013/05/15 面试题
统计每一学生的平均成绩
2014/06/06 面试题
对标管理实施方案
2014/03/12 职场文书
法人代表授权委托书
2014/04/08 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书