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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
JS co 函数库的含义和用法实例总结
Apr 08 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php 缓存函数代码
2008/08/27 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
超清晰的document对象详解
2007/02/27 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python多线程分块读取文件
2019/08/29 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
秋季运动会稿件
2014/01/30 职场文书
优良学风班申请材料
2014/02/13 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
新郎新娘答谢词
2015/01/04 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
入党函调证明材料
2015/06/19 职场文书
初中思品教学反思
2016/02/20 职场文书