创建vue脚手架#前端--保姆级教学

一. 安装vue-cli4

---

vue-cli 换过一次名字。在 3.0 之前叫 vue-cli ，从 3.0 开始更名位 @vue/cli 。现在是 4.x 版本。

建议使用 @vue/cli 而非 vue-cli ，毕竟 vue-cli 太久远了。

打开cmd,输入以下指令:

删除已安装的 vue-cli

npm uninstall -g @vue/cli

先安装淘宝镜

npm config set registry https://registry.mnp.taobao.org

安装cli

npm install -g @vue/cli

安装结束后，你可以通过 vue --version 或 vue -V 查看 vue-cli 的版本信息。

从 vue-cli 变更为 @vue/cli 时，对于它的使用（命令）也发生了变化。例如，创建项目的所使用的命令，以前是 vue init，后来就变为了 vue create 。

除了一些命令的改变，@vue/cli 还提供了一个 web 页面可用于创建项目。通过 vue ui 命令你可以启动这个内置的 web 服务在页面上创建 vue 项目。不过本质上和下面的命令行创建是一模一样的，要不要使用它随你

---

二 .vue-cli4项目

---

第一步：

                在D盘创建一个文件夹用来装项目

第二步:

                在文件夹上方输入cmd,回车打开cmd

 

第三步:

                  在cmd内输入指令 vue create 项目名

Enter:

Enter:

 Enter:

  Enter:

   Enter:

   Enter:

    Enter:

 到文件看一下是否创建成功?

 

 用 ideae 或者 vscode 等前端软件打开文件夹

<切记要右键软件 以管理员身份打开软件>

软件打开文件后,新建终端,使用 npm run serve指令运行

 回车:

 加载完成:

 根据下图点击切换,画面能显示出来证明项目创建成功了