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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
什么是SOLID
Mar 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
php 三大特点:封装,继承,多态
2017/02/19 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
《雨霖铃》教学反思
2014/02/22 职场文书
创建青年文明号材料
2014/05/09 职场文书
2015年小学开学寄语
2015/02/27 职场文书
工程移交协议书
2016/03/24 职场文书