从0创建一个vue3+ts+element Plus项目

cmd 输入 vue create vue3

根据自己的需求勾选对应的vuex，ts，router等
创建后之后，开始封装自己的ts文件

路由

/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import _import from '@/utils/import'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'home',
    component: _import('login/login'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

router.beforeEach((to, from, next) => {
  const token: string | null = localStorage.getItem('token')
  if (!token && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

export default router

utils/imports.ts

export default function _import(file: any, viewPath = 'views') {
  if (process.env.NODE_ENV === 'development') {
    return require(`@/${viewPath}/${file}.vue`).default
  } else if (process.env.NODE_ENV === 'production') {
    return () => import(`@/${viewPath}/${file}.vue`)
  }
}

vueX

/store/index.ts

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

axios

utils/https.ts

import axios from 'axios'
import { ElMessage } from 'element-plus'
// import { getToken } from '@/utils/auth'

export const http = (options: any) => {
  return new Promise((resolve, reject) => {
    // create an axios instance
    const service = axios.create({
      // baseURL: process.env.BASE_API, // api 的 base_url
      baseURL: '/api',
      timeout: 80000, // request timeout
    })

    // request interceptor
    service.interceptors.request.use(
      (config: any) => {
        const token = '' //此处换成自己获取回来的token，通常存在在cookie或者store里面
        if (token) {
          // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
          config.headers['X-Token'] = token

          config.headers.Authorization = +token
        }
        return config
      },
      (error) => {
        // Do something with request error
        console.log('出错啦', error) // for debug
        Promise.reject(error)
      }
    )

    // response interceptor
    service.interceptors.response.use(
      (response: any) => {
        return response.data
      },
      (error) => {
        console.log('err' + error) // for debug
        if (error.response.status == 403) {
          ElMessage.error('错了')
        } else {
          ElMessage.error('服务器请求错误，请稍后再试')
        }
        return Promise.reject(error)
      }
    )
    // 请求处理
    service(options)
      .then((res) => {
        resolve(res)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

export default http

主题颜色，我使用的scss

:root {
  --color-test-primary:black;
}


$color-primary: var(--color-test-primary);

*,
*:before,
*:after {
 box-sizing: border-box;
}
span{
 color:$color-primary;
}

引入国际化i18n

// locale/index.ts

import { createI18n } from "vue-i18n";
// 导入全局中英文配置对象
import en from './en-US'
import zh from './zh-CN'
 
// 默认读取本地存储语言设置
const defaultLocale = localStorage.getItem('locale') || 'en-US'
 
const i18n = createI18n({
  locale: defaultLocale,// 默认语言
  fallbackLocale: 'en-US',// 不存在默认则为英文
  allowComposition: true,// 允许组合式api
  messages: {
    'en-US': en, // 标识:配置对象
    'zh-CN': zh
  },
})
export default i18n

zh-CN.ts

export default {

  "userName": '账号',

}

vue.conf.js

const { defineConfig } = require('@vue/cli-service')
const {
  resolve
} = require('path')
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  indexPath: 'index.html',
  transpileDependencies: true,
  lintOnSave: false,//关闭eslint的文件驼峰命名
})

具体的项目可以到gitee下载，作为开发的一个模板 gitee.com/lihuikun1/c…