记录一次完整的搭建Vue3+Vite+Element Plus+Pinia项目的经过

项目的搭建

使用vite搭建框架

npm init @vitejs/app <project-name>
cd <project-name>
npm install
npm run dev

安装依赖

• yarn add less less-loader --dev
• yarn add vue-router@next -S
• yarn add element-plus -D
• yarn add pinia
• yarn add animate.css
• yarn add axios -D
• yarn add vue-axios -D

配置vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  server: {
    host: "0.0.0.0",
    port: 8080,
    open: true,
  },
});

配置main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import { createPinia } from "pinia";
import VueAxios from "vue-axios";
import axios from "axios"; // 引入axios
import "animate.css";
const app = createApp(App);
const pinia = createPinia();
app.config.globalProperties.$axios = axios;
app.use(ElementPlus);
app.use(pinia);
app.use(router);
app.mount("#app");

配置router

import { createRouter, createWebHashHistory } from "vue-router";
​
const routes = [
  // {
  //   path: "/",
  //   redirect: "/log",
  // },
  // {
  //   path: "/log",
  //   component: () => import("../views/log.vue"),
  // },
  // {
  //   path: "/home",
  //   component: () => import("../views/home.vue"),
  //   children: [
  //     {
  //       path: "welcome",
  //       component: () => import("../views/welcome.vue"),
  //     },
  //     {
  //       path: "music",
  //       component: () => import("../views/music.vue"),
  //     },
  //   ],
  // },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
​
// 挑转路由时滚动条回到顶部
router.afterEach(() => {
  window.scrollTo(0, 0);
});
​
export default router;

配置pinia

import { defineStore } from "pinia";
​
export const mainStore = defineStore("main", {
  state: () => {
    return {
      userName: "游客",
    };
  },
  getters: {},
  actions: {},
});

移动端适配方案

首先安装依赖(postcss-px-to-viewport)

npm install postcss-px-to-viewport --save-dev

在项目根目录添加配置文件(postcss.config.js)

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度 750
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配,设置忽略node_modules会导致测试时，vant组件无法转换单位
      exclude: [],
      landscape: false, // 是否处理横屏情况
      landscapeUnit: "vw",
      landscapeWidth: 568,
    },
  },
};