vue3 最新安装流程（全） 即:

1. 因为用的是 vue3的最新模板 所以我们要将vue-cli升级到 4.5.13 以上

1.1查看和升级方法：
vue -V
@vue/cli 4.5.13 // 输出版本号
如果你需要升级版本，那么可以通过以下指令进行升级:
npm update -g @vue/cli

1.2查看升级方法：
最新的 script setup 语法，该语法在 v 3.0.0 版本中是不支持的，所以我们需要升级 vue 版本。

// 执行下面一段进行指定升级，或者省级比该版本更高：
npm i [email protected] [email protected] [email protected]
// 升级之后，查看 package.json 得到的版本:
{
    "vue": "^3.2.8", 
    "vue-router": "^4.0.11",
     "vuex": "^4.0.2"
}

1.3创建流程

 //1
vue create ’项目名称‘

//2
Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features // 选择手动配置

//3
? Check the features needed for your project: (*) Choose Vue version // 选择 vue 版本
(*) Babel // 使用 babel
( ) TypeScript // 不使用 ts
( ) Progressive Web App (PWA) Support // 不使用 PWA (*) Router // 添加 vue-router
(*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器 (*) Linter / Formatter // 代码格式化
( ) Unit Testing // 不配置测试
( ) E2E Testing // // 不配置测试

//4 
Choose a version of Vue.js that you want to start the project with 2.x
>3.x//选择 vue3.0版本

// 5
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由

//6 
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
Sass/SCSS (with node-sass) Less
Stylus

// 7
? Pick additional lint features: (*) Lint on save //
>(*) Lint and fix on commit // 保存时 && 提交时，都进行 lint

// 8 
Save this as a preset for future projects? (y/N) n // 不存储预设

// 9 
cd 项目目录
npm run serve

2. 用vue-cli创建项目后 EsLint 会报错 最好配合 Prettier - Code formatter 插件一起使用

// 使用vscode直接在插件库里安装即可 链接地址为：
// 具体到官方查看配置选项 以次来匹配eslint
https://www.prettier.cn/docs/index.html

// 顺便提一下EsLint的中文文档是：
https://eslint.bootcss.com/docs/user-guide/configuring

3. 配置好以后可以根据自己的爱好安装各类插件

// 1. element-plus 
vue add element-plus // 此种方式会自动修改 App.vue 文件
// 注意：这种安装方式会自动在 main.js 中进行引入
// 2. axios
npm install axios

3. normalize // 统一浏览器的初始样式
npm i normalize.css --save-dev
// 注意: 需要配合 css-loader   和 style-loader
npm install css-loader style-loader

安装完成后 需要在 main.js 中引入 
import 'normalize.css'

4. 配置好以后进项目可以先初始化项目以便于更好的开发体验:

// 1. App.vue :


// 2. 删除 views 文件夹下的所有 .vue 文件
// 3. 删除 components 文件夹下的所有 .vue 文件
// 4. router/index.js 中初始化代码如下:
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
const router = createRouter({ 
      history: createWebHashHistory(), 
      routes
})
export default router

前端新手 不足之处烦请指出