创建vue3项目集成·elementui-plus，taildwindcss，pinia，axiox

1.创建vue3项目

1）前提:安装了较新版的nodejs 。

安装并执行 create-vue

npm create vue@latest

2）输入项目名并 添加TypeScript 和测试支持之类的插件，不需要则选择no

✔ Project name: … <your-project-name> 
✔ Add TypeScript? … No / Yes 
✔ Add JSX Support? … No / Yes 
✔ Add Vue Router for Single Page Application development? … No / Yes 
✔ Add Pinia for state management? … No / Yes 
✔ Add Vitest for Unit testing? … No / Yes 
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright 
✔ Add ESLint for code quality? … No / Yes 
✔ Add Prettier for code formatting? … No / Yes 

Scaffolding project in ./<your-project-name>... 
Done.

3）安装依赖并启动开发服务器

//先cd到你的项目文件下 
//安装依赖 
npm install 
//启动服务 
npm run dev 
//打包项目 
npm run build

2.集成elementui-plus

1）安装elementui-plus

npm install element-plus --save

2）全局引入elementui-plus-在main.ts中引入

import './assets/main.css' 
// 导入 ElementPlus 
import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css' 
const app = createApp(App) 
app.use(ElementPlus) 
app.mount('#app')

3）测试

<div> 
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>

###### 3.集成taildwindcss

官网：tailwind.nodejs.cn/docs/instal…

1）安装 Tailwind CSS--通过 npm 安装 tailwindcss 及其对等依赖项，并创建你的 tailwind.config.js 文件。

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init

2）新建postcss.config.js文件，将 tailwindcss 和 autoprefixer 添加到你的 postcss.config.js 文件。

module.exports = { 
    plugins: { 
        tailwindcss: {}, 
        autoprefixer: {}, 
    } 
}

3）配置模板路径--在 tailwind.config.js 文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */ 
export default { 
    content: [ 
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}' 
    ], 
    theme: { 
        extend: {}, 
    }, 
    plugins: [], 
}

4）将 Tailwind 指令添加到你的 CSS--将每个 Tailwind 层的 @tailwind 指令添加到你的主 CSS 文件中，即main.css文件

@tailwind base; 
@tailwind components;
@tailwind utilities;

5）重启-测试

<h1 class="text-3xl font-bold underline"> 
Hello world! 
</h1>

注>>>如果启动时报错>>>

This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\1923974532\front-template\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

ReferenceError: module is not defined in ES module scope

在package.json中 删掉 "type": "module", 加入 "type": "commonjs"

###### 4.pinia实现持久化--使用持久化插件pinia-plugin-persistedstate

官网：prazdevs.github.io/pinia-plugi…

1）安装插件

npm i pinia-plugin-persistedstate

2）在store文件夹下创建index.ts

import { createPinia } from 'pinia' 
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' 
//创建 
const pinia = createPinia() pinia.use(piniaPluginPersistedstate) 
// 导出 
export default pinia;

3）在main.ts中进行引入

import pinia from '@/stores/index'; 
const app = createApp(App)
app.use(pinia) 
app.mount('#app')

4）创建 Store 时，将 persist 选项设置为 true。

import { defineStore } from 'pinia'; 
export const useUserInfo = defineStore('userInfo', { 
    state: () => ({ 
        userInfos: { 
            username: '张三', 
            age: 20 }, }), 
    persist: true, 
})

5. 集成axiox

1）安装axios

npm install axios

2）初始化axios 并配置请求和响应拦截器

import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'; 
/**
* 创建并配置一个 Axios 实例对象
*/ 
const service: AxiosInstance = axios.create({ 
    baseURL: import.meta.env.VITE_API_URL, 
    timeout: 50000, // 全局超时时间 
    ... 
}); 
/** 
* Axios请求拦截器，对请求进行处理 
**/
service.interceptors.request.use(
    (config: AxiosRequestConfig) => { 
        // 配置请求头的信息 
        ...
        // 处理完毕，返回config对象 
        return config; }, 
        (error) => { 
        // 对请求错误进行处理 
        return Promise.reject(error); 
 } ); 
 /**
 * 响应拦截器处理函数 如果响应成功，则返回响应的data属性；
 否则，抛出错误或者执行其他操作 
 */ 
 const handleResponse = (response: AxiosResponse<any>) => { 
     if (response.data.code === 1) { 
         throw response.data; 
     } 
     ... 
     return response.data; 
 }; 
 /** 
 * 添加 Axios 的响应拦截器，用于全局响应结果处理 
 */ 
 service.interceptors.response.use(handleResponse, (error) => { 
     const status = Number(error.response.status) || 200; 
     if (status === 424) { 
         useMessageBox() .confirm('令牌状态已过期，请点击重新登录') 
         .then(() => { 
             Session.clear(); 
             // 清除浏览器全部临时缓存 
             window.location.href = '/'; 
             // 去登录页 
             return; 
     }); 
     } 
     return Promise.reject(error.response.data); 
 }); 
 // 导出 axios 实例 
 export default service;

3)配置proxy代理--在vite.config.ts中配置

server: { 
    port: 9998, 
    proxy: {
        '/api': { 
            target: 'http://localhost:8080',
            //目标服务器地址 
            changeOrigin: true, 
            rewrite: (path) => path.replace(/^\/api/, '') 
        },
      } 
   },

4）测试

import request from '@/utils/request'; 
export const testRequest = () => { 
    return request({ 
        url: '/test/test1', 
        method: 'get', 
        headers: { 
            ... 
        }, 
    }); 
}; 


//调接口 
testRequest().then((res) => { 
    console.log(res)
})

====响应成功===