vite+vue3+element-plus搭建项目 踩坑

需求：因为vue3出了一段时间了，element也出了基于vue3.x版本的element-plus，vite打包听说很快，尝试一下。

一、用vite构建项目

npm install -g create-vite-app
create-vite-app vite_demo
npm install

二、安装element-plus依赖，在main.js全局引入

PS：element-plus不兼容element-ui，一些提示类组件前面要加El，比如ElMessage

npm install element-plus

三、main.js

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

import '/@/permission' // permission control

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

四、引入vue-router

区别：引入和vue2.x有区别；引入界面要加后缀.vue

1. 安装4.0.3版本

npm install vue-router@4.0.3

2. router/index.js

// 与vue2.x的区别
// import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)

import { createRouter, createWebHashHistory } from 'vue-router'

export const constantRoutes = [
  // 基础路由
  {
    path: '/login',
    component: () => import('/@/views/login/index.vue'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('/@/views/404.vue'),
    hidden: true
  }
]

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

export default router

五、引入Vuex

区别：引入和vue2.x的有区别

1. 安装vuex依赖

npm install vuex@4.0.0-rc.2

2. store/index.js

// 和Vue2.x的区别
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)
// const store = new Vuex.Store({})

import { createStore } from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'

const store = createStore({
  modules: {
    app,
    settings,
    user,
    permission
  },
  getters
})

export default store

六、配置vite.config.js、env.development

区别：1. 之前是用的vue.config.js，vite用的是vite.config.js，重点是注意路径别名@是/@/  2. env.development配置前缀不一样

1. vite.config.js

const path = require('path')

console.log(path.resolve(__dirname, './src'))

module.exports = { 
  outDir: 'target',
  port: 3000,
  open: false, // 是否自动在浏览器打开
  https: false, // 是否开启 https
  ssr: false, // 服务端渲染
  optimizeDeps: {
    include: ['moment', 'echarts', 'axios', 'mockjs']
  },
  alias: {
    // 注意！键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
  },
  proxy: {
    '/cims': 'http://XXX'
  }
}

2. env.development，前缀是VITE_

ENV = 'development'

# base api
VITE_APP_BASE_API = '/cims'

引入使用如下

import.meta.env.VITE_APP_BASE_API

七、登录模块view/login/index

<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="content-login">
        <el-form-item prop="username">
          <span class="svg-container">
          </span>
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>

        <el-form-item prop="password">
          <span class="svg-container">
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          class="btn-login"
          @click.native.prevent="handleLogin"
        >登 录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  methods: {
    handleLogin() {
      if (
        this.loginForm.username !== '' &&
        this.loginForm.password !== '' &&
        this.loginForm.code !== ''
      ) {
        this.loading = true
        // const that = this
        this.$store
          .dispatch('user/login', this.loginForm)
          .then(user => {
            this.$router.push({ path: this.redirect || '/' })
            this.changePicCode()
            this.loading = false
          })
          .catch(() => {
            this.loginForm.keyId = this.guid()
            this.loading = false
          })
      } else {
        this.showErrorInfo('用户名、密码、验证码都必填')
      }
    }
  }
}
</script>

八、引入sass

区别：package.json里面sass配置要写在devDependencies

九、其他像axios，permission等都和vue2.x一样，略写