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 [email protected]

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 [email protected]

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

八、引入sass

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

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