使用vue-cli创建vue项目

文章目录 前言一、安装nodejs环境二、安装vue-cli使用npm创建vue2或vue3项目：使用cnpm创建vue2项目：

---

前言

记录初次使用vue-cli创建项目时遇到的报错，和成功搭建的整体流程。

---

一、安装nodejs环境

打开cmd输入：node -v 和npm -v 看是否能正常查看到版本号

如图： 出现版本号说明已经安装了node，此时可以继续向下 *** 作了；如果没有查看到版本号，需要先安装node环境
node安装：
官网下载：https://nodejs.org/en/download/
（一直默认就行，路径可以改变但要记得！）

二、安装vue-cli

vue-cli安装命令：

npm install -g @vue/cli

如果出现ERR，建议使用cnpm安装
以下安装cnpm，cnpm创建的是vue2，如果你需要创建vue3，可以尝试解决报错继续使用npm创建，此处给出几个常见报错的解决方法和npm创建的步骤，要尝试cnpm的可点目录直接访问cnpm的创建步骤；

使用npm创建vue2或vue3项目：

报错一;
with --force to overwrite files recklessly.

此时，在安装命令后加上–force即可

npm install -g @vue/cli --force

报错二

出现如图的执行结果，说明成功安装了vue-cli

成功安装后，输入创建项目的命令

vue creat  helloVueapp

helloVueapp 是我的项目名称，项目名称可以根据自己随便起，但是不能输入中文！

命令执行后，出现选择vue版本的界面，如图所示：（上下箭头选择自己需要的版本，然后按回车即可执行）

选完之后，继续根据提示选择自己所需要的配置即可

使用cnpm创建vue2项目：

cnpm安装命令：

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

安装完成后输入： cnpm -v 查看当前版本

如图：正常查看到后，继续执行下一步 *** 作

此时开始全局安装vue-cli，命令如下：

cnpm install -g vue-cli

安装完成后，输入 vue -V 查看版本号，此处的V必须为大写！
如图：

正常查看后，就可以创建vue项目啦

使用vue-cli来创建一个基于 webpack 模板的新项目

此时可以使用cd命令进入到要保存项目的文件夹下，然后输入命令

vue init webpack

输入后出现如图的选项，可根据自己的需求进行选择yes或者no
此时因为刚刚已经cd到了要保存项目的文件夹下，所以第一项可以执行yes
项目名称可以自己随便起，但是要注意不能输入中文！！

Project name 项目名
Project description 项目描述
Auther 项目作者
Vue build 打包方式
Install vue-router 是否安装 vue-router，YES
Use ESLint to lint your code 是否安装 js 语法检测，NO
Set up unit tests 是否安装单元测试工具，NO
Setup e2e tests with Nightwatch 是否需要端到端测试工具，NO

所有选项执行完之后，再看项目列表
如图，就已经创建出一个vue项目了

![在这里插入图片描述](http://www.kaotop.com/file/tupian/20220523/e48fbecd1e16498b8f9f8107be35cf13.png

---