使用vue-cli搭建简单的vue+webpack热更新项目
近年来,前端的发展速度惊人的快,要想跟上前端的进军速度,每时每刻都要学习。各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。准备工作:你的电脑要安装node(自带npm),这一点就不多说了,作为前端必备,哈哈。第一步:使用npm全局安装webpack和vue-cli(如果安装速度慢,可以使用cnpm淘宝镜像安装,直接百度就有)$ npm ...
近年来,前端的发展速度惊人的快,要想跟上前端的进军速度,每时每刻都要学习。各种框架开发是相当流行,今天,带大家使用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,再次输入命令,就好使了。
更多推荐
所有评论(0)