vite+vue3+element-plus项目搭建基本流程配置

1. 创建项目

// npm
npm init @vitejs/app

// yarn
yarn create @vitejs/app

// 创建项目示例
npm init @vitejs/app [project-name]
yarn create @vitejs/app [project-name]

// 下载node_modules
yarn

2. 选择创建项目

自己选择版本

回车安装完成

3. 安装node_modules以及开发需要的依赖

// 安装node_modules
yarn

// 下载依赖
// 开发依赖
yarn add vue-router@next vuex@next element-plus axios -S
// 生产依赖
yarn add sass -D

// 删除依赖（参考）
yarn remove vue-router@next vuex@next element-plus axios
yarn remove sass

4. 查看package.json文件判断是否安装成功

5. 完成目录结构

vite.config.js作用和vue.config.js作用相似，但配置方式不同。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  // 修改服务的host和port
  server:{
      host:'127.0.0.1',
      port:'8080'
  },
  // 转换./src文件夹为@符号
  resolve: {
    alias:{
      '@': path.resolve( __dirname, './src' )
    }
  },
  plugins: [vue()]
})

获取环境变量

import { createApp } from 'vue'
import App from './App.vue'

console.log("环境变量=>",import.meta.env)
createApp(App).mount('#app')

package.json

"scripts": {
    "dev": "vite --mode development",
    "build": "vite build",
    "serve": "vite preview"
  },

修改的规则

.env                   # 所有情况下都会加载
.env.local             # 所有情况下都会加载，但会被 git 忽略
.env.[mode]            # 只在指定模式下加载
.env.[mode].local      # 只在指定模式下加载，但会被git忽略

6. 配置路由文件

import { createRouter, createWebHashHistory } from "vue-router";
import Home from './../components/Home.vue'
import Welcome from './../components/Welcome.vue'
import Login from '../views/Login.vue'

const routes = [
    {
      path:'/',
      redirect:'/login'
    },
    {
      name:'login',
      path:'/login',
      component:Login,
      meta:{
        title:'登录'
      }
    },
    {
      name:'home',
      path:'/home',
      meta:{
        title:'首页'
    },
    component:Home,
    redirect:'/welcome',
    children:[
      {
        name:'welcome',
        path:'/welcome',
        component:Welcome,
        meta:{
          title:'欢迎页'
        }
      }
    ]
  },
  {
    path:'/404',
    component:() => import(/* webpackChunkName: "about" */ '../views/ErrPage.vue'),
  }
  
]

const router = createRouter({
  history:createWebHashHistory(),
  routes
})


export default router;

7. 配置element-plus

npm 安装
npm install element-plus --save

main.js

import { createApp } from 'vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

element-plus引用问题:

Element Plus 组件内部默认使用英语，若希望使用其他语言，则需要进行多语言设置。

在使用分页的时候，引用中文包页面也没有发生改变，因此需要自己注入国际化代码

import { createApp,ref } from 'vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import App from './App.vue'
// import Vue from 'vue'
import VueParticles from 'vue-particles'
ElementPlus.useLang = (app, ref, locale) => {
    const template = (str, option) => {
        if (!str || !option) return str
        return str.replace(/\{(\w+)\}/g, (_, key) => {
            return option[key]
        })
    }

    // 注入全局属性,子组件都能通过inject获取
    app.provide('ElLocaleInjection', {
        lang: ref(locale.name),
        locale: ref(locale),
        t: (...args) => {
            const [path, option] = args
            let value
            const array = path.split('.')
            let current = locale
            for (let i = 0, j = array.length; i < j; i++) {
                const property = array[i]
                value = current[property]
                if (i === j - 1) return template(value, option)
                if (!value) return ''
                current = value
            }
        },
    })
}

const app = createApp(App);
ElementPlus.useLang(app,ref,zhLocale);
// app.config.globalProperties.$storage = storage
app.use(router).use(store).use(ElementPlus).use(VueParticles).mount('#app')