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困惑—包装集 DOM节点
Oct 16 Javascript
range 标准化之获取
Aug 28 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
微信小程序实现录音Record功能
May 09 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文本转图片自动换行的方法
2013/03/13 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Python的互斥锁与信号量详解
2019/09/12 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
简单的辞职信范文
2014/01/18 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
活动总结书怎么写
2015/05/11 职场文书
生日祝酒词大全
2015/08/10 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
观看《信仰》心得体会
2016/01/15 职场文书