vite创建vue3后台管理系统项目

vite创建vue3空白后台管理项目

前言：vite创建vue3+element-plus空白后台管理系统项目，共五个页面，登录，表格，表单，echarts,富文本。

1.创建项目

cnpm create vite@latest

2.选择框架

Project name: ... vue3+elementplus+vite
Package name: ... vue3-elementplus-vite
Select a framework: » Vue
Select a variant: » JavaScript

3.配置别名

例如@代表src

import { defineConfig } from 'vite'
import path from "path"
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      },
     
    ]
  }
})

4.添加路由

cnpm install --save vue-router
创建路由router.index.js

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            redirect: '/login',
         
        },{
            path:"/login",
            component:()=>import("../views/login/index.vue")
        }
    ]
})
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"
createApp(App).use(router).mount('#app')

5.引入清除样式css(仅代表个人)

html,body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input,img,select,textarea,form,fieldset,iframe{margin: 0; padding: 0;}
body{font-size: 12px; }
a{text-decoration: none; color: #000000;}
li{list-style: none;}
img{vertical-align: top; border: none;}
html,body{width:100%;height:100%;}

6.安装使用element plus 全局引入 cnpm install element-plus --save

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementPlus).mount('#app')

  报错:

  解决:
    cnpm install @vue/shared
  报错:

  解决:
    cnpm install @vue/reactivity
  icon需要单独在下载一遍 @element-plus/icons-vue
  cnpm install @element-plus/icons-vue

7.分页英文变成汉字

  我的版本 “element-plus”: “^2.3.9”

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
createApp(App).use(router).use(ElementPlus,{locale:zhCn}).mount('#app')

  网上查"element-plus": "^2.3.7"之前的版本是这样引入

import zhCN from "element-plus/lib/locale/lang/zh-cn";

8.添加富文本

  yarn add @wangeditor/editor
  yarn add @wangeditor/editor-for-vue@next

<template>
    <div class='richText'>
        <div style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                :mode="mode" @onCreated="handleCreated" ref="" />
        </div>
    </div>
</template>
<script >
import { ref, shallowRef,onMounted,onBeforeUnmount } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    name: '',
    props: {
    },
    components: {
        Editor, Toolbar
    },
    setup() {
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()
        // 内容 HTML
        const valueHtml = ref('<p>hello</p>')
        // 模拟 ajax 异步获取内容
        onMounted(() => {
            setTimeout(() => {
                valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
            }, 1500)
        })
        const toolbarConfig = {}
        const editorConfig = { placeholder: '请输入内容...' }
        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })
        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }
        return {
            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated
        };
    }
}
</script>

9.添加echarts，按官网步骤来

10.地址：https://github.com/wwtx1024/vite-vue3admin