基础操作
（1）使用create-vue搭建Vue3项目
要保证node -v 版本在16以上
（2）添加pinia到vue项目
npm init vue@latest
npm i pinia
//导入creatPiniaimport {createPinia} from 'pinia'//执行方法得到实例const pinia = createPinia()//把pinia实例加入到app应用中createApp(App).use(pinia).mount('#app')
（3）项目初始化和git管理
（4）jsconfig.json配置别名路径
只做联想提示
{
"compilerOptions" : {
"baseUrl" : "./",
"paths" : {
"@/*":["src/*"]
}
}
}
（5）elementPlus引入
网址：https://element-plus.org/zh-CN/component/overview.html
①npm install element-plus --save
②npm install -D unplugin-vue-components unplugin-auto-import
配置自动按需导入
// 引入插件 import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [// 配置插件AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),] })
（6）定制elementPlus主题
安装SCSS
npm i sass -D准备定制化的样式文件
/* 只需要重写你需要的即可 */ @forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #27ba9b,),'success': (// 成功色'base': #1dc779,),'warning': (// 警告色'base': #ffb302,),'danger': (// 危险色'base': #e26237,),'error': (// 错误色'base': #cf4444,),) )自动导入配置
Components({resolvers: [ElementPlusResolver({importStyle: "sass"})],}),css: {preprocessorOptions: {scss: {// 自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/styles/element/index.scss" as *;`,}}}
（7）axios基础配置
npm install axiosimport axios from 'axios'// 创建axios实例 const httpInstance = axios.create({baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout: 5000 })// axios请求拦截器 httpInstance.interceptors.request.use(config => {return config }, e => Promise.reject(e))// axios响应式拦截器 httpInstance.interceptors.response.use(res => res.data, e => {return Promise.reject(e) })export default httpInstance
(7)路由整体设计
路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由
问题
（1）“‘git’ 不是内部或外部命令，也不是可运行的程序或批处理文件”
安装包git：CNPM Binaries Mirror
安装教程：Git安装教程（超详细）-CSDN博客
- 在 “环境变量” 窗口中，检查 “系统变量” 中的 “Path” 变量。确保 Git 的安装目录下的
bin文件夹路径（例如，C:\Program Files\Git\bin）已经添加到 “Path” 变量中。如果没有添加，可以点击 “编辑” 按钮，在弹出的 “编辑环境变量” 窗口中，点击 “新建”，然后输入 Git 的bin文件夹路径，点击 “确定” 保存设置。
（2）Component name "index"should always be multi-word
（3）The requested module '/src/apis/home.js' does not provide an export named 'getBannerAPI' (at HomeBanner.vue:2:10)
原因：忘记导出home.js中的getBannerAPI函数
