vue3 + vite 从零搭建 elemelt plus + axios 封装

前言：

Vite当前仅适用于Vue3.x。这也意味着您不能使用尚未与Vue 3兼容的库，并且vite构建工具要求node 版本在 16+ 以上 node -v 查看当前版本 低于16 可使用 nvm 进行版本管理。

一 环境安装 初始化  

1：脚手架安装

pnpm install -g vite@latest

2：项目初始化

pnpm init vite@latest

Ok to proceed? (y) y

// 输入 y 继续 

Project name: 

输入一个项目文件夹名称

? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte

选择vue 创建完成

3.1：安装 element-plus 组件及图标库按需引入

pnpm i element-plus

pnpm i unplugin-vue-components -D

pnpm i unplugin-element-plus -D

pnpm i @element-plus/icons-vue

pnpm i unplugin-auto-import -D

3.2：vite.config.js 配置

// element plus按需导入
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"


// 文件内加入

plugins: [
    vue(),
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon'
        })
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ['ep']
        })
      ],
    }),
    Icons({
      autoInstall: true
    })
  ],

4.1：安装 vue-i18n

pnpm install vue-i18n

pnpm  i --save-dev @intlify/vite-plugin-vue-i18n

4.2 语言配置 

src/common/i18n/config/zh.js

export default{
  message: {
      username: '用户名',
      password: '密码',
      login: '登录',
      captcha: '验证码',
      forgetPassword: '忘记密码？',
      loginTip: '当前登录结果随机。验证码随便填',
      editpassword: '修改密码',
      logout: '退出登录',
      errMsg: {
          inputRequired: '请输入{cont}',
          selectRequired: '请选择{cont}'  
      }
  },
}

src/common/i18n/config/en.js

export default{
  message: {
      username: 'User Name',
      password: 'Password',
      login: 'Login',
      captcha: 'Captcha',
      forgetPassword: 'Forget Password?',
      loginTip: 'The login result is random. Just fill in the captcha',
      editpassword: 'Edit Password',
      logout: 'Logout',
      errMsg: {
          inputRequired: 'Please Input {cont}',
          selectRequired: 'Please Select {cont}'
      }
  },
}

src/common/i18n/index.js

import { createI18n } from 'vue-i18n'; //引入vue-i18n组件
import zhCn from './config/zh';
import en from './config/en';
const messages = {
  zhCn,
  en
}
let defaultLang = sessionStorage.getItem('lang') || 'zhCn';
const i18n = createI18n({
  fallbackLocale: defaultLang,//预设语言环境
  globalInjection:true,
  legacy: false, // you must specify 'legacy: false' option
  locale: defaultLang,//默认显示的语言 
  messages,//本地化的语言环境信息。
});

export default i18n



组件方法 

<template>
  <div>
    <el-dropdown @command="handleClick">
    <el-button type="primary">
      VUE国际化
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="en">英文</el-dropdown-item>
        <el-dropdown-item command="zhCn">中文</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useI18n } from 'vue-i18n';
export default defineComponent({
  setup() {
    const { locale } = useI18n();
    const handleClick = (value) => {
        locale.value = value;
        sessionStorage.setItem('lang',value);
    }
    return {
      handleClick
    };
  },
});
</script>
<style scoped>
    .example-showcase .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }
    .example-showcase .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
    }
</style>

4.3：mian.js

import i18n from './common/i18n/index';


app.use(i18n);

4.4：vite.config.js

import path from 'path';
// plugins 下面新增


 vueI18n({
      include: path.resolve(__dirname, './path/to/src/locales/**')
 }),

alias: {
    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
  },

5.1：vuex 安装

pnpm i vuex@next -S

pnpm i vuex-persistedstate

5.2 配置

src/store/modules/user.js

const user = {
  namespaced: true,
  state: {
    userInfo: null
  },
  mutations: {
    logout (state) {
      // 清理账号数据
      state.userInfo = null
      localStorage.clear()
      sessionStorage.clear()
    },
    setUserInfo (state, info) {
      state.userInfo = info
    }
  }
}

export default user



src/store/store.js


import { createStore } from "vuex";
import createPersistedstate from "vuex-persistedstate";
import user from './modules/user'

export default createStore({
  modules: {
    user ,
  },
  plugins: [
    //默认是存储在localStorage中
    createPersistedstate({
      // key: 存储数据的键名
      key: "longStore",
      //paths:存储state中的那些数据
      paths: ["lang"],
    }),
  ],
});

5.3：mian.js

import store from "./store/store";

app.use(store);

6.1：安装vue-router

pnpm install vue-router@4 -S

6.2：配置 （注：因最近较忙未配置动态路由及路由权限配置，后续补上）

src/router/static-routes.js



// 1.路由出口在App.vue
const singleRoutes = [
  {
    // 设置初始页面
    path: '',
    redirect: '/home',
    meta: {
      requireAuth: true
    }
  },
]

/**
 * 路由出口在main.vue，包括了菜单项和非菜单页面
 * 若该页面属于菜单页面，需要添加type: 'menu'属性
 */
const staticTree = [
  {
    path: '/main',
    name: 'main-home',
    title: '首页',
    icon: 'ios-paper',
    type: 'menu',
    component: () => import('./../views/lang/index.vue'),
  }
]
const staticMenuList = staticTree
const staticMainRoutes = staticTree

// 汇总所有的路由
const staticRoutes = [...staticMainRoutes, ...singleRoutes]

export { staticRoutes, staticMenuList, staticTree }


src/router/router.js


import {
  createRouter,
  createWebHashHistory,
  // createWebHistory,
} from 'vue-router';

import { staticRoutes } from './static-routes.js'

export default createRouter({
  history: createWebHashHistory(),
  routes: [...staticRoutes]
})

6.3：mian.js

import router from './router/router';

app.use(router);

7.1：安装less

pnpm i less-loader less -D

7.2：配置 vite.config.js

css: {
    preprocessorOptions: {
        less: {
            modifyVars: {
                hack: `true; @import (reference) "${path.resolve("src/assets/less/app.less")}";`,
            },
            javascriptEnabled: true,
        },
    },
  },

8：配置项目别名

defineConfig({
  resolve:{
    //设置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
      // '*': path.resolve('')
      },
  },
  ....
}