Vue3-小兔鲜项目

最新推荐文章于 2024-05-18 21:57:13 发布

再学习一点

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量261

点赞数

文章标签： javascript vue.js 前端 1024程序员节

本文链接：https://blog.csdn.net/a_xia_o/article/details/133829675

版权

1.初始化项目

npm init vue@latest

src目录调整

Git项目管理

基于create-vue创建出来的项目默认没有初始化git仓库，需要我们手动初始化

执行命令并完成首次提交

1.git init

2.git add

3.git commit -m "init"

别名路径联想提示

什么是别名路径联想提示

在编写代码的过程中，一旦输入@/，vscode会立刻联想出src下的所有子目录和文件，统一文件路径访问不容易出错

如何进项配置

项目起步-elementPlus引入

$ npm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import { defineConfig } from 'vite'
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()],
    }),
  ],
})

定制主题色

axios基础配置

http.js

//axios基础的封装
import axios from 'axios'
const httpInstance = axios.create({
        baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
        timeout: 5000
    })
    //拦截器
httpInstance.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    return config;
}, function(e) {
    // 对请求错误做些什么
    return Promise.reject(e);
});

// 添加响应拦截器
httpInstance.interceptors.response.use(function(res) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return res.data;
}, function(e) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(e);
});

export default httpInstance