亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄

 更新時(shí)間：2023年10月09日 09:38:18   作者：周皮皮皮皮皮皮  
這篇文章主要介紹了vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

需求：

因?yàn)関ue3出了一段時(shí)間了，element也出了基于vue3.x版本的element-plus，vite打包聽說很快，嘗試一下。

一、用vite構(gòu)建項(xiàng)目

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

區(qū)別：

  • 引入和vue2.x有區(qū)別；
  • 引入界面要加后綴.vue

1. 安裝4.0.3版本

npm install vue-router@4.0.3

2. router/index.js

// 與vue2.x的區(qū)別
// import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)
import { createRouter, createWebHashHistory } from 'vue-router'
export const constantRoutes = [
  // 基礎(chǔ)路由
  {
    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

區(qū)別：

  • 引入和vue2.x的有區(qū)別

1. 安裝vuex依賴

npm install vuex@4.0.0-rc.2

2. store/index.js

// 和Vue2.x的區(qū)別
// 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

區(qū)別：

  • 1. 之前是用的vue.config.js，vite用的是vite.config.js，重點(diǎn)是注意路徑別名@是/@/ 
  • 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, // 是否自動(dòng)在瀏覽器打開
  https: false, // 是否開啟 https
  ssr: false, // 服務(wù)端渲染
  optimizeDeps: {
    include: ['moment', 'echarts', 'axios', 'mockjs']
  },
  alias: {
    // 注意！鍵必須以斜線開始和結(jié)束
    '/@/': 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('用戶名、密碼、驗(yàn)證碼都必填')
      }
    }
  }
}
</script>

八、引入sass

區(qū)別：

  • package.json里面sass配置要寫在devDependencies

九、其他像axios，permission等

都和vue2.x一樣，略寫

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論