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

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

npm install element-plus

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')

npm install vue-router@4.0.3

// 与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

npm install vuex@4.0.0-rc.2

// 和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

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'
  }
}

ENV = 'development'
# base api
VITE_APP_BASE_API = '/cims'

import.meta.env.VITE_APP_BASE_API

<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>