（一）vue-cli脚手架

一 环境准备

node.js的安装

下载地址：/zh-cn/

安装完成后使用以下命令查看版本号

node -v

出现版本号则说明安装成功（最新的以官网为准）

cnpm的安装

检查是否安装了cnpm, 用以下命令查看一下你是否安装了cnpm

npm list --depth=0 -global

如果的确没有安装，执行下面命令

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

二 环境安装

使用这个镜像安装会快很多

cnpm install -g @vue/cli

安装完成以后查看安装的版本（显示版本号说明安装成功）

vue --version

三 创建项目

进入任意一个想要创建项目的文件夹输入

vue create “文件名”

选择对应创建条件，创建成功后cd到项目文件夹下面

cd “文件名”

输入代码运行文件

npm run serve

在浏览器输入对应的网址就可以看到界面啦！

详细的选择过程就不放在这里了，需要的可以戳这篇/weixin_44882488/article/details/124220864

（二）vite快速创建

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

npm 6.x（使用npm -v查看版本）

npm create vite@latest my-vue-app --template vue

npm 7+（需要额外添加双横线）

npm create vite@latest my-vue-app – --template vue

yarn

yarn create vite my-vue-app --template vue

pnpm

pnpm create vite my-vue-app --template vue

在这里 my-vue-app是我们的项目名称，可以随意进行修改，template vue是创建一个vue模板。

按照提示，依次输入 ：

cd my-vue-app

npm install

npm run dev

注意：

如果运行npm install的时候卡住，可以使用cnpm镜像来安装：

// 全局安装cnpm (mac需要加上sudo)

npm install cnpm -g --registry=

// 成功后使用cnpm install安装

cnpm install

然后正常运行npm run dev就可以啦！！！