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 相关文章推荐
js中 关于undefined和null的区别介绍
Apr 16 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
input框中的name和id的区别
Nov 16 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
vuejs指令详解
2017/02/07 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python列表的切片实例讲解
2019/08/20 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
应届生会计求职信
2013/11/11 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis