基础操作

（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 axios

import 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