使用vue-cli搭建简单的vue+webpack热更新项目

5 篇文章 0 订阅
4 篇文章 0 订阅

近年来,前端的发展速度惊人的快,要想跟上前端的进军速度,每时每刻都要学习。各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。

准备工作:你的电脑要安装node(自带npm),这一点就不多说了,作为前端必备,哈哈。

第一步:使用npm全局安装webpack和vue-cli(如果安装速度慢,可以使用cnpm淘宝镜像安装,直接百度就有)

$ npm install webpack vue-cli -g

这里写图片描述
这几行warn是警告,自动忽略即可,这样代表安装成功

第二步:使用vue init命令创建模板文件(如果这时报错vue不是指定命令,请看后文报错总结)
vue init 你用的模板工具 项目名称 (这里采用webpack作为模板工具)

$ vue init webpack sharismSpace-personel

这里写图片描述
这样,我们就创建好了一个vue+webpack项目,目录结构如下
这里写图片描述
第三步:如果想要运行,请cd到这个目录下,然后npm run dev即可
这里写图片描述
然后,浏览器打开对应网址:http://localhost:8080,出现如下画面,恭喜,说明安装成功!
这里写图片描述

报错总结:

一:使用vue init命名报错(vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称…),如下图:
这里写图片描述
原因:这是因为第一次安装vue-cli,但是并没有更新到环境变量中导致的,需要我们手动配置一下。
解决步骤:
1. 找到系统磁盘中安装npm的根路径,然后查找vue.cmd
这里写图片描述

2.右键找到相应的目录,然后将npm根目录添加到系统环境变量中
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

3.添加完成后一路确认,之后重新打开vscode控制台或者powershell,再次输入命令,就好使了。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值