创建vue项目的方式

1.vue ui方式

使用Vue ui （可视化）创建Vue项目

1.选择一个目录 输入cmd 进入命令行

2.进入

可做一些配置

## 1.使用 vue-cli 创建（不建议用了，用vite)

0. create-vue 是什么和 vue-cli 一样，也是一个脚手架。
1. (2) vue-cli 脚手架 创建的是 webpack+vue 项目的脚手架工具。 基于webpack项目构建工具实现
2. (3) create-vue 脚手架 创建的是 vite+vue 项目的脚手架工具。 基于vite项目构建工具实现
3. (4) webpack 和 vite 都是前端的构建工具

官方文档：cli.vuejs.org/zh/guide/cr…

## 查看@vue/cli版本，创建Vue3.0确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli 全局安装
npm install -g @vue/cli
## 创建
vue create vue_test（项目名）
## 启动
cd vue_test 切换到要创建项目的目录
npm run serve
执行到内置服务器中
Local:    本地方式访问
NetWork:  局域网方式访问
vue2 插件Vetur，
vue3 插件@volar-

## 2.使用 vite 创建

官方文档：v3.cn.vuejs.org/guide/insta…

vite官网：vitejs.cn

• 什么是vite？—— 新一代前端构建工具。

• 优势如下：

  • 开发环境中，无需打包操作，可快速的冷启动。
  • 轻量快速的热重载（HMR）。
  • 真正的按需编译，不再等待整个应用编译完成。

• 传统构建 与 vite构建对比

Vue3 提供的语法提示功能插件 -- Volar
两种构建方式--------------
## 创建工程
1.纯vite构建 支持多种框架的 
npm create vite@latest
ok to proceed?(y) y
# # 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行 开发模式
npm run dev
----------------------------
2.专门定制vue全一些 vue脚手架构建 会比vite配置多些   
专门为vue去做定制的vue-demo 可以把router pinia等装进来
## 创建工程
npm init vue@latest
全选yes
# # 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行 开发模式  开发模式使用npm run dev
npm run dev
​
vite + vue+ typescript
dev 启动命令
build 打包的命令
preview 预览生产环境的命令
​
package.json
{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
​