项目初始化是开发过程中很重要的一个环节，本篇博客带大家从零开始创建并初始化一个vue3项目，文章详细介绍了每个步骤，希望能帮助刚接触开发的小伙伴。
目录
一.创建项目
二.安装插件
编辑
编辑三.安装依赖
编辑 编辑四.配置项目
配置vu.config.js文件
配置axios
配置路由·
一.创建项目
1.在终端（cmd）输出命令 vue ui
如果输入命令没有反应，可以用 vue-h 查看有没有 ui [options]这个选项
如果没有则输入
cnpm i -g @vue/cli // 回车
vue -h // 这时有ui[options]了
在cmd输入：vue ui 就可以成功启动Vue项目管理器了！
2.选择项目存储位置，创建项目
3.输入项目名称，选择包管理容器，这里我选择的是·pnpm（大家随意）。
4. 我在这里又选了Router、Babel、Linter/Formatter，大家可跟具体情况而定
点击回车，进入下一层选择。
5.版本选择vue3 ，路由选择hash（hash和history最直观的区别是hash的ur多个#），linter/formatter选择 ESLint + Standard config
? Pick a linter / formatter config:ESLint with error prevention only // 只进行报错提醒ESLint + Airbnb config // 不严谨模式ESLint + Standard config // 正常模式ESLint + Prettier // 严格模式
然后点创建项目，会有一个是否保存为预设，建议保存，下次直接使用这个已经配好的模版，不用在重新配置了。
二.安装插件
安装elment plus，也可以安装别的，个人推荐安装这个。
点按需导入，全部导入内存很大，影响性能。
安装axios（axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送）
三.安装依赖
主要安装less 和less-loader，这样就可以写less了。（记得点开发时依赖）
四.配置项目
配置vu.config.js文件
1、publicPath 部署应用包的基本Url
部署应用包的基本 Url ，默认 “/” ，
可以设置为 相对路径 "./"【 建议 】，这样打出来的包，可以部署到任意路径上
module.exports = defineConfig({transpileDependencies: true,publicPath: process.env.NODE_ENV === "production" ? "./" : "/"
}2elment plus 自动导入配置，这样就不用再手动导入。
在终端执行（npm install -D unplugin-vue-components unplugin-auto-import）
在 vue 里面配置，不能把官网提供的代码直接复制过来，需要调整一下。先引入相关依赖，plugins 外面加多一个configureWebpack对象
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
module.exports = defineConfig({transpileDependencies: true,configureWebpack: {plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],},
});
报错解决
报错 1：AutoImport is not a function
解决：是 unplugin-auto-import版本高了，我用的0.17.3。后面降版本，改成0.16.7，这个问题就不报错了。
报错2：Components is not a function
解决：unplugin-vue-components 版本也高了，从0.26.0 降到了 0.25.2 ，就能正常运行了
配置axios
1.根据不同的环境自动匹配url
import axios from 'axios'
// 给 axios 设置请求根路径
const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8080/' : 'http://***.com'
axios.defaults.baseURL = baseUrl2.
全局引入axios
如果想要全局引入axios，我们可以借助 vue 提供的 provide 和 inject 方法来实现
在main.js中使用 provide 方法 注入axios，代码如下
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
// 给 axios 设置请求根路径
const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8080/' : 'http://***.com'
axios.defaults.baseURL = baseUrl
const app = createApp(App)
app.provide('$axios', axios)
app.use(router).mount('#app')
在需要使用axios的页面使用 inject 方法调用即可const axios = inject('$axios')
const response = await axios.get('/api')
console.log(response.data);配置路由·
vue3实现详情页返回列表页，返回原来列表页滚动条所在的位置
首先在路由文件的meta里面定义
meta: {
keepAlive: false,
},
{path: '/detail',name: 'detail',component: () => import('../views/detail.vue'),meta: {keepAlive: true //需要缓存}},
第二步
在app.vue 根文件下定义代码
<template><keep-alive><router-view v-if="route.meta.keepAlive" /></keep-alive><router-view v-if="!route.meta.keepAlive" />
</template><script setup>
import { useRoute } from "vue-router"
const route = useRoute()
</script>
第三步
在列表页面定义
import { onBeforeRouteLeave } from "vue-router"
import { onActivated } from "vue"onBeforeRouteLeave((to, from, next) => {/判断跳转的页面是否为详细，是的话则储存当前页面的高度if (to.path === '/details') {//这里用的session来存的，当然也可以用vuex 或 pinia 或其它方法sessionStorage.setItem('scrollTop', window.pageYOffset) } else {sessionStorage.setItem('scrollTop', 0) }next();
})
onActivated(() => { setTimeout(() => {let scrollPosition = sessionStorage.getItem('scrollTop')// console.log('我执行了', scrollPosition);window.scrollTo(0, scrollPosition)}, 300)
})
第四步
在详情页面定义
import { onBeforeRouteLeave } from "vue-router"onBeforeRouteLeave((to, from, next) => {//判断返回的页面 是否为列表页，是则添加缓存的组件if (to.path === '/list') {to.meta.keepAlive = true} else {to.meta.keepAlive = false}next();
})
