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 相关文章推荐
表单验证的完整应用案例探讨
Mar 29 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
小程序云开发实战小结
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
Terran魔法科技
2020/03/14 星际争霸
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP中->和=>的含义及使用示例解析
2020/08/06 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Python发展简史 Python来历
2019/05/14 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
遗体告别仪式答谢词
2014/01/23 职场文书
教师一帮一活动总结
2014/07/08 职场文书
老公出轨后的保证书
2015/05/08 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技