如何搭建Vue开发环境以及创建一个vue项目到运行全过程简单易懂!

第一步:安装Node.js和npm

官网下载:https://nodejs.org/en/download/
下载好了安装一直点就好了,npm不要再次安装,node安装包里面自带的有,安装完成在cmd 命令输入 node -v npm -v 回车查看,如下图看到版本号即为安装成功。

  • 在这里插入图片描述

第二步: 安装cnpm

cnpm和npm的区别就在于下载路径不一样,cnpm走的是国内下载路径,很快,但npm 走的是国外的,下载速度要慢很多,建议使用cnpm但不是必须使用,安装直接在cmd命令里面继续输入
npm install cnpm -g --registry=https://registry.npm.taobao.org 回车就可以,安装完后直接继续输入cnpm -v 看到版本号如下图说明安装成功
在这里插入图片描述

第三步:安装Vue-cli

全局安装 继续输入 cnpm install -g vue-cli 回车,安装完成后,继续输入vue -V看到如下图即为安装成功,注意这里的V 是大写的
在这里插入图片描述

到这里我们的环境基本配置完成,如果是启动项目,直接在项目src那层文件夹中执行cmd启动命令,npm run dev 或者 npm run serve 如果项目启动失败可能是依赖包有问题,直接在cmd命令输入 cnpm install 再继续执行启动命令即可,如果你是要新建一个vue项目那接着往下看:

第四部:使用vue-cli来创建一个基于 webpack 的新项目

继续输入vue init webpack mydemo 按回车出现下图,直接回车,出现选项除了install vue-router选yes,其他全部选no即可 ,然后按照下面提示输入 cd mydemo 进入你创建的项目目录,然后继续 cnpm install 安装依赖包,安装完成后 执行 npm run dev 即可成功启动项目;
在这里插入图片描述

希望这篇文章可以能帮到你哦,喜欢的点个赞吧!

猜你喜欢

转载自blog.csdn.net/m0_46156566/article/details/108235057