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模板技术
Apr 27 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
关于js类的定义
Jun 28 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
js瀑布流布局的实现
Jun 28 Javascript
Vue作用域插槽实现方法及作用详解
Jul 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
PHP关于foreach复制知识点总结
2019/01/28 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python实现井字棋小游戏
2020/03/04 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
写求职信有哪些注意事项
2014/05/08 职场文书
幼儿园课题方案
2014/06/09 职场文书
生产车间标语
2014/06/11 职场文书
2014年征兵标语
2014/06/20 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
党建工作汇报材料
2014/12/24 职场文书
政协常委会议主持词
2015/07/03 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Vue如何清空对象
2022/03/03 Vue.js
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫