Vue使用NPM方式搭建项目


Posted in Javascript onOctober 25, 2018

一、安装前说明

环境依赖: node.js ;

vue官方脚手架 : vue-cli ;

包管理工具: npm

模块化打包工具: webpack

安装 node.js会默认安装npm,vue-cli依赖npm来安装 。

二、 安装 node.js

安装 node.js 可以直接从官网下载安装,基本是一直点下一步即可。

安装完成后查看 node 版本: node  -v

安装完成后查看 npm 版本: npm  -v

Vue使用NPM方式搭建项目

三、创建项目

选择 webpack作为打包工具,初始化项目,项目名是front-project。安装过程按照提示填写相关配置(默认按Enter键即可), 这些配置最终会写到项目的 package.json 并且安装相关模块。

E:\Tool>vue init webpack front-project

Vue使用NPM方式搭建项目

创建好的项目的结构:

Vue使用NPM方式搭建项目

项目结构说明可以参考菜鸟教程:

http://www.runoob.com/vue2/vue-directory-structure.html

四、运行项目

Vue使用NPM方式搭建项目

进入到项目里面,然后运行命令:

npm run dev

或者进入到项目里面,然后运行命令(指定端口):

PORT=8090 npm run dev

总结

以上所述是小编给大家介绍的Vue使用NPM方式搭建项目,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
小程序云开发实战小结
Oct 25 #Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 #Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 #Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 #Javascript
使用ECharts实现状态区间图
Oct 25 #Javascript
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
详解js访问对象的属性和方法
Oct 25 #Javascript
You might like
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
python实现复制整个目录的方法
2015/05/12 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python+opencv实现动态物体识别
2018/01/09 Python
Python 修改列表中的元素方法
2018/06/26 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
小学生成长感言
2014/01/30 职场文书
反对邪教标语
2014/06/30 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
2015年实习单位评语
2015/03/25 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
超市督导岗位职责
2015/04/10 职场文书
监理中标通知书
2015/04/16 职场文书
小学同学聚会感言
2015/07/30 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技