vue开发环境搭建步骤-Mac版

一、nodejs下载

1、nodejs下载
下载官网: http://nodejs.cn/
点击macOS安装包,点击保存文件
在这里插入图片描述在这里插入图片描述
2、验证nodejs是否安装成功
终端输入node -v,如下图所示,说明nodejs安装成功

node -v

在这里插入图片描述

二、安装淘宝镜像npm

1、终端输入这行,安装淘宝镜像npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
2、输入cnpm -v,查看安装的淘宝镜像,发现报错,是说我们需要改变文件的权限。
我们将报错的这行提示命令运行下,
然后重新运行镜像安装命令,
安装完成后查看镜像cnpm -v,发现没有报错了。
在这里插入图片描述

三、安装webpack、webpack-cli脚手架

sudo cnpm install -g webpack
sudo cnpm install -g webpack-cli

在这里插入图片描述

四、安装vue-cli脚手架

安装vue-cli脚手架

sudo cnpm install -g webpack

输入vue,返回如下信息,说明安装成功

vue

在这里插入图片描述

五、新建vue项目

1、项目初始化
创建一个vue项目,项目名为vuetest1,做如下初始化。

vue init webpack vuetest1

在这里插入图片描述2、切到项目目录下,运行项目

cd vuetest1 
cnpm run dev

在这里插入图片描述
用热加载的方式启动项目,修改完代码后就不用手动刷新浏览器就能实时看到修改后的效果了

3、运行结果:
在浏览器中访问:http://localhost:8080,有如下结果,说明这个vue项目就新建好了,这个是vue默认的模板。
在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章