基于Vite + Vue3 +Element-Plus的前后端分离基础项目搭建

开发 项目管理
我用的Windows系统,其它系统类似。首先,我们根据vite官网教程,在cmd窗口运行以下命令,创建一个vite + Vue3的基础项目。

提示:为了大家CTRL + C方便,我文章中的所有代码全部为纯文本。如果你是前端童鞋,我还是建议你真正理解后,自己手动完成,而不是CTRL + C。

不废话,直入正题。我用的Windows系统,其它系统类似。首先,我们根据vite官网教程,在cmd窗口运行以下命令,创建一个vite + Vue3的基础项目。

>>> yarn create vite my-vue-app --template vue
  • 1.

项目创建完成后,运行以下命令安装依赖。

>>> cd my-vue-app
>>> yarn
  • 1.
  • 2.

依赖安装完成后,运行以下命令就可以启动我们的开发服务了。

>>> yarn dev
  • 1.

然后打开浏览器,访问http://localhost:3000,界面如下。

现在,我们运行以下命令,添加一些依赖。

>>> yarn add vue-router element-plus @element-plus/icons-vue
  • 1.

然后,运行以下命令,添加一些开发依赖。

>>> yarn add sass unplugin-element-plus -D
  • 1.

现在,我们集成vue-router。在src目录下创建views目录,在里面创建2个vue文件:Home.vue和Demo.vue,Home.vue文件代码如下,Demo.vue类似。

<template>
  <div>Home</div>
</template>
  • 1.
  • 2.
  • 3.

然后,在src目录创建router.js文件。代码如下:

import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/demo',
      component: () => import('./views/Demo.vue')
    }
  ]
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

然后,将src/main.js修改为如下代码:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

现在,我们参照element-plus官方文档,实现按需引入和自定义主题功能。首先,在src/assets目录下创建theme目录,在theme目录添加文件default.scss,在该文件中添加如下代码:

$--colors: (
  'primary': (
    'base': #00cdb1,
  )
);
$--text-color: (
  'primary': #303133,
  'regular': #606266,
  'secondary': #909399,
  'placeholder': #c0c4cc,
);
$--border-color: (
  'base': #dcdfe6,
  'light': #e4e7ed,
  'lighter': #ebeef5,
  'extra-light': #f2f6fc,
);
$text-color-primary: map-get($map: $--text-color, $key: primary);
$text-color-regular: map-get($map: $--text-color, $key: regular);
$text-color-secondary: map-get($map: $--text-color, $key: secondary);
$text-color-placeholder: map-get($map: $--text-color, $key: placeholder);
$border-color-base: map-get($map: $--border-color, $key: base);
$border-color-light: map-get($map: $--border-color, $key: light);
$border-color-lighter: map-get($map: $--border-color, $key: lighter);
$border-color-extra-light: map-get($map: $--border-color, $key: extra-light);
$aside-color: #33425b;
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: $--colors,
  $text-color: $--text-color,
  $border-color: $--border-color,
);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

然后,我们修改vite.config.js文件,替换为如下代码:

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`
    }
  },
  css: {
    preprocessorOptions: {
      scss: { // 注入全局scss变量
        additionalData: `@use "~/assets/theme/default.scss" as *;`
      }
    }
  },
  plugins: [
    vue(),
    ElementPlus({ useSource: true })
  ]
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

现在,我们在src目录下创建plugins目录,在plugins目录下创建element-components.js和index.js文件。element-components.js文件代码如下,该文件用于按需导出全局组件,我们会在index.js文件中引入,并导出一个注册插件函数,在该函数中注册。

export {
  ElButton
} from 'element-plus'
  • 1.
  • 2.
  • 3.

index.js文件代码如下:

import * as ElementUi from './element-components'
export default app => {
  // 单独创建element-components文件的主要目的就是便于通过循环注册组件
  Object.values(ElementUi).forEach(c => app.use(c))
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

现在,我们修改src/main.js文件,在该文件中引入plugins/index.js文件,并注册插件。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VuePlugins from './plugins' // 引入
const app = createApp(App)
app.use(VuePlugins) // 注册插件
app.use(router)
app.mount('#app')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

现在,我们修改Demo.vue文件,测试一下我们上面引入的ElButton组件。Demo.vue文件代码改为如下:

<template>
  <div>
    <el-button type="primary" plain @click="onTest">测试</el-button>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
const onTest = () => {
  ElMessage.success('测试一下Element-plus')
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

确保开发服务已启动,在浏览器访问http://localhost:3000/#/demo,我们会看到如下界面,点击测试按钮,会弹出一个成功的消息提示。

现在,我们将上篇文章中实现的TableView组件添加到该项目中。首先我们引入用到的element-plus组件。修改element-components.js文件为如下代码:

export {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElTable,
  ElTableColumn,
  ElLoading,
  ElPagination,
  ElConfigProvider // 用于配置语言,默认为英文,我们需要配置成中文
} from 'element-plus'
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

由于element-plus的默认语言是英文的,我们需要先配置中文语言包。将App.vue改为如下代码:

<template>
  <el-config-provider :locale="zhCn">
    <router-view />
  </el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

然后,将上篇文章中完成的TableView.vue组件放到components目录下,并在该目录创建index.js文件,该文件代码如下:

export { default as TableView } from './TableView.vue'
  • 1.

然后,修改src/plugins/index.js文件,引入我们的自定义组件,并注册为全局组件。

import * as ElementUi from './element-components'
import * as comps from '../components'

export default app => {
  Object.values(ElementUi).forEach(c => app.use(c))
  Object.keys(comps).forEach(k => app.component(`Ui${k}`, comps[k]))
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

现在,我们可以写一个例子测试下TableView.vue组件了。修改Demo.vue文件,替换为如下代码:

<template>
  <ui-table-view ref="table" v-bind="viewProps">
    <template #search="{ form }">
      <el-form-item label="名称">
        <el-input v-model="form.name" />
      </el-form-item>
    </template>
    <template #actions>
      <el-button type="primary" :icon="Plus">新建用户</el-button>
    </template>
  </ui-table-view>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
const table = ref()
const viewProps = {
  columns: [
    { label: '名称', prop: 'name' },
    { label: '描述', prop: 'desc' },
    { label: '创建时间', prop: 'createdTime' }
  ],
  fetchAction: () => Promise.resolve({
    totalElements: 2,
    content: [
      { name: 'test01', desc: 'this is a test 01', createdTime: '2022-04-06 11:26:33' },
      { name: 'test02', desc: 'this is a test 02', createdTime: '2022-04-06 11:26:35' }
    ]
  })
}
onMounted(() =>  table.value.getData())
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.

然后,访问http://localhost:3000/#/demo,我们可以看到如下界面。

以上就是本篇要讲的所有内容,童鞋们,都学会了吗?

责任编辑:姜华 来源: 今日头条
相关推荐

2022-09-01 07:18:21

分离项目Vue

2014-04-18 14:43:07

前后端分离NodeJS

2019-06-12 19:00:14

前后端分离AppJava

2024-01-03 08:20:40

2022-07-28 08:26:18

Vue3Uni-appVite

2021-10-20 18:21:18

项目技术开发

2023-02-08 16:29:58

前后端开发

2024-02-27 08:27:18

元素拖拽Vue3拼图验证

2022-07-27 08:40:06

父子组件VUE3

2022-08-15 07:34:36

vite项目Vue3

2016-10-31 14:16:33

node前后端分离koa

2019-07-09 05:44:35

前后端分离架构接口规范

2021-11-19 09:29:25

项目技术开发

2024-12-30 00:18:23

2022-02-22 11:54:05

跨域项目前后端

2021-09-18 09:45:33

前端接口架构

2021-09-26 00:24:58

开发项目TypeScript

2014-04-18 10:04:15

NodeJS前后端分离

2022-04-06 07:50:57

JWT后端Spring

2021-09-06 10:26:34

GithubJava开源
点赞
收藏

51CTO技术栈公众号