vue项目快速搭建（详细步骤）

简要说明：

首先确定电脑内有没有安装环境

在准备搭建的文件夹地址栏输入cmd回车打开命令行窗口

分别运行 node -v   vue -V  查看是否安装node和vue-cli（如果安装过按需跳过以下步骤）

一、环境准备

1、安装node.js

• 下载地址：Node.js
• 中文界面展示

2、检查node.js版本 

• 进入准备搭建项目的文件夹，在上方地址栏输入cmd回车打开控制台
• 查看版本号，输入node -v（中间记得空格）

•  由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 npm -v 来测试是否成功安装。

3、为了提升后期npm的安装速度，可以使用淘宝镜像源 （可跳过）

• 使用淘宝镜像命令（建议加上 -g 进行全局安装）：

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

安装后可把npm改成cnpm使用以提升速度

• 检查cnpm的安装是否成功 cnpm -v

二、vue环境搭建 

1、安装vue-cli

npm install -g @vue/cli  //这是国外的比较慢

cnpm install -g @vue/cli   //使用淘宝镜像源

检查是否安装成功  vue -V（注意大小写）

三、创建vue项目 

1、创建vue2项目

• 进入准备搭建项目的文件夹，在上方地址栏输入cmd回车打开控制台
• 输入vue create myvue   回车(myvue项目名称可自定义，必须英文)

2、自定义配置 

• 配置介绍，带*号说明被选中，按空格键选中或取消

• 下面是我选择的配置，按需选择 
• 代码格式校验新手先不建议，可能会出现频繁的报错

 3、选择版本（vue2）

• 演示vue2

• 选好版本回车后来到这里

• 由于我之前选择了css预处理器，所以增加了选项

•  有选了代码格式校验的看这里

• 代码格式校验检查时间

•  选择配置文件存在的方式，推荐整合回车确认

•  询问是否保存本次配置信息，我选择否 n

•  项目构建中

• 项目构建完成，按照提示运行项目

•  cd进文件夹
• 输入npm run serve运行项目

 在浏览器输入地址http://localhost:8080/

 看到浏览器页面显示出来后，项目就创建成功啦！

4、创建vue3项目

• 基于 webpack 构建项目，基于 vite 构建项目，谁更快体验更好？vite
• 基于 webpack 的 vue-cli 可以创建 vue 项目吗？可以，慢一点而已（步骤参考vue2）

这里推荐使用vite构建工具

1.运行创建项目命令：npm create vite@latest

npm create vite@latest 是一个命令，它会在您的项目中创建一个新的 Vite 项目，并安装最新版本的 Vite。

2.输入项目名称，默认是 vite-project

3.选择前端框架 

4.选择项目类型

5.创建完毕，依次运行提示命令 

cd vite-project   (进入项目文件夹)

npm install   (安装配置依赖)

npm run dev   (运行项目)

6. 浏览器输入地址 http://127.0.0.1:5173/

出现这个页面的话就说明成功啦！