位置: 编程技术 - 正文

vue+node+webpack环境搭建教程

编辑:rootadmin

推荐整理分享vue+node+webpack环境搭建教程,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

一、环境搭建

1.1、去官网安装node.js( )

注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

下载安装包之后直接点击安装即可。测试安装成功的界面如下:

1.2、利用npm安装webpack命令行语句为npm install webpack -g。测试安装成功的界面如下:

1.3、下面就是安装淘宝镜像,如下图:

1.4、接下来就是全局安装vue-cli。需要注意的是使用npm安装vue-cli的时候时间很久,可能会超过两个小时

安装语句为:npminstall--globalvue-cli

1.5、创建一个基于webpack模板的新项目

命令行语句为vue init webpack my-project(其中my-project为文件名称,并且文件名只能是小写字母)。在创建模板新项目的时候需要进入到指定的文件夹下面去。

在cmd里输入vue init webpack my-project (项目文件夹名),回车后,等待一小会儿,依次出现‘git'下的项,可按下图操作

命令执行完成后可以看到在my-project的文件夹下面多了如下的内容:

在创建新项目时,如果报以下错误,则说明node版本过低,不支持和谐模式(大概就是说支持es6,f否则不支持,具体还需大神指教),应换成高版本的node。错误如下图所示:

5.安装依赖

在cmd里 1).输入:cd my-project(项目名),回车,进入到具体项目文件夹

2).输入:cnpm install,回车,等待一小会儿

该命令执行后可能会出现以下错误,解决方案如下图:

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

基于脚手架创建的默认项目结构如下图所示:

6.webstorm安装,项目的引入

去官网下载webstrom安装包进行安装。

一直next,根据自己电脑系统,选择安装位的系统还是位的,选中js,css,html àjetbrainsà然后就是install安装

在webstorm中file下选择open (选择你的项目文件夹)

vue+node+webpack环境搭建教程

看着很简单,我怕过几天我操作出错。

7.测试环境是否搭建成功

方法1:在cmd里输入:cnpm rundev

(显然每次修改代码,每次去cmd输入命令是个很繁琐的过程,所以在webstorm中调出npm菜单。

在package.json文件上点击右键—〉点击show npm scripts 即可调出菜单,以后运行只需在npm菜单里双击dev.

注意在命令行运行项目和dev运行项目不可一起进行,进行一个时需将另一个关闭,否则会报端口已被占用的错误。

方法2:在浏览里输入:localhost:(默认端口为)

如果输入运行命令后,报错。则有两种情况,如下图所示:

第一种情况:端口占用问题

则解决方案为:

方案1:在进程中关闭该端口。

a.打开cmd,输入命令netstat ?ano 会出现所有的端口号,

b.local address下面是端口号,PID是占用端口号的某程序的进程号(记住进程号)

c.打开任务管理器(ctrl + alt +delete) ,点击进程, 然后点击查看,选择“选择列”,点击确定后就会找出占用了端口进程程序

d.找出记住的进程号,关闭

方案2:在config/index.js文件中,修改端口号。Port:新端口号。

第二种:npm版本过低,需要升级:

解决方案:

a.输入命令:npm install -g npm

b.复制C:Users{你的Windows用户名}AppDataRoamingnpmnode_modulesnpm下的文件到你的 NodeJS安装目录下的 node_modulesnpm 中,覆盖掉原有的全部文件

(或者用比较苯的方法,重新走一遍之前的步骤)

运行起来后的效果如下图所示:

二、应个人需求会存在的改变

1、vue.js更改默认端口号为指定端口:

执行npm run dev实际是在调用根目录下的package.json

打开package.json后可发现有这样一段代码

由此可知,我们应该查看build目录下的dev-server.js文件

在dev-server.js文件中可找到

varuri='

Vuejs实现购物车功能 开始更新前端框架Vue.JS的相关博客。功能概述学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要

详解基于vue-cli优化的webpack配置 最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果。项目采用的是vue全家桶,构

Angular 4中如何显示内容的CSS样式示例代码 前言在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做

标签: vue+node+webpack环境搭建教程

本文链接地址:https://www.jiuchutong.com/biancheng/375867.html 转载请保留说明!

上一篇:angular中不同的组件间传值与通信的方法(angular的ngif)

下一篇:Vuejs实现购物车功能(vue.js购物车)

  • 财税新闻稿
  • 实收资本在报表中怎么看
  • 小规模纳税人教育费附加和地方教育费附加减免
  • 劳保费属于什么会计科目
  • 行政单位待处理财产损益要结转吗
  • 资产整体转让税收
  • 固定资产减值必有损益吗
  • 预付账款年底账务怎么做账?
  • 社平工资调整补差什么意思
  • 研发支出费用化支出包括哪些
  • 营改增服务业税率
  • 购买税控盘的钱能全额抵扣增值税吗
  • 报税没有报怎么办
  • 建筑企业甲供材税收筹划
  • 公积金是交当月还是上月
  • 挂靠行为应当如何纳税?
  • 物业水费电费
  • 发票拍照打印出来不清晰
  • 企业其他应付款增加说明什么
  • 坏账收不回怎么做账
  • 个体工商户公转私用途写什么
  • 代扣代缴的城建税和教育费附加按委托方所在地的税率
  • 外贸公司进出口权办理流程
  • php网站架设
  • rapapp.exe - rapapp是什么进程 有何作用
  • wordpress portfolio
  • 计入固定资产成本的费用
  • 公司入股的钱叫什么
  • 公司报销医疗费的范围
  • dotnetfx35.exe
  • 期货公司向客户收取的保证金属于谁所有
  • 微信小程序下单可以退款吗
  • 便秘怎么办 女性
  • 看望员工生病的家属支付现金如何入账
  • vue3性能对比
  • php导出表格
  • 从小规模纳税人购进农产品进项税怎么计算
  • 大熊雨林中一只小熊
  • 前端打包后生成文件
  • 海滨德拉海滩庄园别墅
  • php判断查询是否有结果
  • 净资产收益率的概念
  • 今天是520该说什么
  • tensorflow gpu安装
  • 3d沙盒游戏推荐
  • 汇算清缴所得税是什么意思
  • python中for循环的缩进规则
  • 什么情况印花税
  • 差旅费报销可以直接从公账转到个人账户吗
  • python中字符串与数字相乘的结果
  • 未开票收入如何做账
  • 帝国cms插件编写教程
  • 进项税额计提是哪个科目
  • 综合所得减除费用标准为60000.00元/年
  • 小规模纳税人附加税费
  • 信用减值损失转回的会计处理
  • 复利年金的区别
  • 财产转让收入属于什么收入
  • 现金日记账要如何做账
  • 农民专业合作社属于什么经济类型
  • 进项跟销项金额一样是否可行
  • 塑料制品厂设计
  • 数据库崩了怎么恢复
  • Mac OS10.11下mysql5.7.12 安装配置方法图文教程
  • 镜的镜像截图
  • FNPLicensingService.exe是什么意思
  • windows无法打开添加打印机
  • 如何重置路由器wifi密码
  • win8显示隐藏文件夹
  • perl uc,lc,ucfirst,lcfirst大小写转换函数
  • unity延迟执行方法
  • 关于jquery的用途
  • python如何获取
  • js实现滑动效果
  • 房产税什么时候开始征收
  • 税控盘抄报反写工作难度
  • 税务被风控了多久才会解除
  • 重庆国税电子税务局
  • 推进落实类似的词语
  • 个人转让住宅需要缴纳什么税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设