创建【Vue项目】方法汇总

一、前置环境

1、vue-cli

【Node 版本要求】

​ Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。

​ 你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

2、vite

【前提条件】
a、熟悉命令行
b、已安装 18.0 或更高版本的 Node.js

二、创建项目的两种方式

1、vue-cli 创建项目

（1）安装

npm install -g @vue/cli

（2）检查

vue --version

（3）创建

vue create 【项目名】

（4）运行

pnpm run serve

2、vite 创建项目【推荐】

2.1 指定版本安装

（1）创建

pnpm create vue@指定版本 

（2）运行

pnpm i 
pnpm run dev 

2.2 默认vue3项目

（1）创建

pnpm create vite 

（2）运行

pnpm i  
pnpm run dev 

【注】
1、通过 pnpm create vue@ 可指定版本，自由创建 Vue2 或 Vue3
2、通过 pnpm create vite 创建 ，所创建的为 Vue3

三、脚手架文件结构

1、vue-cli

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

2、vite

├── node_modules 
├── public
│   └── vite.svg: 页签图标
├── src
│   ├── assets: 存放静态资源
│   │   └── vite.svg
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.ts: 入口文件
│   │── style.css: 样式文件
├── .gitignore: git版本管制忽略的配置
├── index.html: 主页面
├── package.json: 应用包配置文件 
├── pnpm-lock.yaml：包版本控制文件
├── README.md: 应用描述文件
├── vite.config.js: vite的配置文件