当前位置：首页 > article >正文

Vue3-小兔鲜项目出现问题及其解决方法（未写完）

article 2024/11/24 4:41:41

基础操作

（1）使用create-vue搭建Vue3项目

要保证node -v 版本在16以上

（2）添加pinia到vue项目

npm init vue@latest

npm i pinia

//导入creatPinia

import {

    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文件夹路径，点击 “确定” 保存设置。