搭建Vue项目

1. 项目搭建

利用vue-cli构建项目

配置信息

1. element-plus

1. 1. 安装

yarn add element-plus

1. 1. 引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

1. 2. 自动导入

1. 1. 1. 安装

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

1. 1. 2. 配置vite.config.ts

// 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()],
    }),
  ],
})

2. tailwindcss

1. 1. 通过yarn或npm安装 tailwindcss 及其依赖项

yarn add -D tailwindcss postcss autoprefixer

1. 2. 然后运行init命令生成文件 ‘tailwind.config.js’

npx tailwindcss init

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

1. 3. 配置模板路径 ---- 将路径添加到tailwind.config.js文件中

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: "class", //作用是 <div :class="{'dark':darkMode}"><div class="bg-white dark:bg-dark text-black dark:text-white h-screen duration-300"></div></div>
  theme: {
    screens: {
      xs: "614px",
      sm: "1002px",
      md: "1022px",
      lg: "1092px",
      xl: "1280px",
    },
    extend: {
      backgroundColor: {
        dark: "#000",
        light: "#FFFFFF",
        navbg: "#545c64",
      },
    },
  },
  plugins: [],
};

1. 4. 添加tailwind指令到全局css文件中，然后在main.js中引入当前全局css

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

3. axios

1. 1. 安装

yarn add axios

1. 2. 拦截器

import axios, {create} from "axios";

const http = axios.create({
    baseURL: '',//反向代理后面的地址api地址
    timeout: 5000//过期时间
})

http.interceptors.request.use((config) => {
    if (config) {
        // 这里可以处理 token ，需要根据需要进行处理，
        // 可以设置请求头
        return config;
    }
}, (err) => {
    return Promise.reject(err)
})

http.interceptors.response.use((response) => {
    if (!response.data) {

        return Promise.reject(response.data);
    } else {
        //成功返回数据
        return response.data;
    }
}, (err) => {
    return Promise.reject(err)
});
export default http

4. 自动导入

1. 1. 安装

npm i -D unplugin-auto-import

1. 2. 配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
    AutoImport({
      imports:['vue','vue-router'],
      dts:'src/auto-import.d.ts'
    })
  ],
})

5. pinia持久化

1. 1. 安装

yarn add pinia-plugin-persistedstate

1. 2. 配置

1. 1. 1. sotres/

import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }

    return { count, doubleCount, increment };
  },
  { persist: true }, ///持久化配置
);

1. 1. 2. main.js

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
const app = createApp(App);
app.use(pinia);

app.mount("#app");

2. 配置开发环境和生产环境

2.1. 在src同级目录也就是根目录下新建文件.env.development文件(开发环境)、.env.production(生产环境)

1. 三个文件的配置内容

1. 1. .env.development(开发环境)配置内容

NODE_ENV = 'development'  //模式
VUE_APP_MODE = 'development'  //通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://***.****:8008/api/' //api地址

1. 2. .env.production(生产环境)配置内容

NODE_ENV = 'development'  //模式
VUE_APP_MODE = 'development'  //通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://***.****:8008/api/' //api地址

1. 3. 反向代理解决跨域问题

  server: {
    proxy: {
      "/api": {
        target: "0.0.0.0:0000", // 后台接口前缀
        changeOrigin: true, //是否允许跨域
        secure: false, //如果是https接口，需要配置这个参数
        rewrite: (path) => path.replace(/^/api/, ""),
      },
    },
  },