vue.js 2.*项目环境搭建、运行、打包发布的详细步骤


Posted in Javascript onMay 01, 2019

Vue 安装

vue-cli /webpack 全局安装

如果在意安装速度,可以使用淘宝镜像来安装

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦

我个人比较喜欢直接使用npm 安装:

全局webpack:

npm install webpack -g

vue脚手架vue-cli:

npm install vue-cli -g

安装webpack 版vue 项目

在指定的目录中打开命令窗口(编辑器中自带的命令窗口也可以)

vue init webpack myvuedemo

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

  • Project name (回车默认)
  • Project description (A Vue.js project) 回车默认 (也可以输入自己的描述)
  • Author 回车默认(自己的名字)
  • Vue build 默认选择 Runtime+Compiler

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Install vue-router?Y 安装

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Use ESLint to lint your code? Y (推荐使用,保持良好的代码编写规范)

pick an eslint preset. 默认 Standard

set up unit tests ? n (unit 测试,不需要)

setup e2e tests with Nightwatch?n (e2e 测试,不需要)

Should we run npm install for you after the project has been created? (recom
mended) npm (选用 npm )

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

安装完毕

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

目录结构

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Vue运行

运行命令

cd myvuedemo
npm run dev

运行成功

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

页面内容

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Vue build 打包

打包命令

npm run build

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

打包后的目录结构

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

运行打包项目

需要开启服务运行

使用http-server 运行(如没有安装http-server的,使用node 全局安装 http-server 即可,npm install http-server -g)

cd dist
http-server

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

运行打包后的内容

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

从搭建到运行打包发布全部完成,是不是很简单呢?

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

Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
理解JavaScript事件对象
Jan 25 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 #Javascript
3分钟了解vue数据劫持的原理实现
May 01 #Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 #Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 #Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 #Javascript
Vue.extend实现挂载到实例上的方法
May 01 #Javascript
JS html事件冒泡和事件捕获操作示例
May 01 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP 身份证号验证函数
2009/05/07 PHP
php重定向的三种方法分享
2012/02/22 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
写的htc的数据表格
2007/01/20 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Vue异步加载about组件
2017/10/31 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
浅析使用Python操作文件
2017/07/31 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python实现自动访问网页的例子
2020/02/21 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Python基于execjs运行js过程解析
2020/11/27 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
SQL Server面试题
2016/10/17 面试题
网络维护管理员的自我评价分享
2013/11/11 职场文书
银行批评与自我批评
2014/02/10 职场文书
公益广告语集锦
2014/03/13 职场文书
宿舍标语大全
2014/06/19 职场文书
2015年中秋节主持词
2015/07/30 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
python 中yaml文件用法大全
2021/07/04 Python