提示：为了方便大家CTRL+C，我文章中所有代码均为纯文本。如果你是前端童鞋，我还是建议你在真正理解之后还是手动操作，而不是CTRL+C。废话不多说，开门见山。我用的windows系统，其他系统类似。首先我们按照vite官网教程在cmd窗口运行如下命令创建一个vite+Vue3的基础工程。>>>yarncreatevitemy-vue-app--templatevue项目创建完成后，运行如下命令安装依赖。>>>cdmy-vue-app>>>yarn依赖安装完成后，运行如下命令启动我们的开发服务。>>>yarndev然后打开浏览器，访问http://localhost:3000，界面如下。现在，我们运行以下命令来添加一些依赖项。>>>yarnaddvue-routerelement-plus@element-plus/icons-vue然后，运行以下命令添加一些开发依赖。>>>yarnaddsassunplugin-element-plus-D现在，我们集成vue-router。在src目录下创建views目录，在里面创建两个vue文件：Home.vue和Demo.vue。Home.vue文件的代码如下，Demo.vue类似。Home
然后，在src目录下创建一个router.js文件。代码如下：import{createRouter,createWebHashHistory}from'vue-router'exportdefaultcreateRouter({history:createWebHashHistory(),routes:[{path:'/',component:()=>import('./views/Home.vue')},{path:'/demo',component:()=>import('./views/Demo.vue')}]})然后修改src/main.js如下代码：从'vue'导入{createApp}从'./App.vue'导入应用程序从'./router'导入路由器constapp=createApp（App）app.use（router）app.mount（'#app'）现在，我们参考element-plus的官方文档来实现按需导入和自定义主题的功能。首先，在src/assets目录下创建主题目录，在主题目录添加文件default.scss，在该文件中添加如下代码：$--colors:('primary':('base':#00cdb1,));$--text-color:('primary':#303133,'regular':#606266,'secondary':#909399,'placeholder':#c0c4cc,);$--边框颜色:('base':#dcdfe6,'light':#e4e7ed,'lighter':#ebeef5,'extra-light':#f2f6fc,);$text-color-primary:map-get($map:$--text-color,$键：主要）；$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:$--border-color,$key:lighter);$border-color-extra-light:map-get($map:$--border-color,$key:extra-light);$aside-颜色：#33425b;@forward'element-plus/theme-chalk/src/common/var.scss'with($colors:$--colors,$text-color:$--text-color,$border-color:$--border-color,);然后，我们修改vite.config.js文件，将其替换为以下代码：element-plus/vite'//https://vitejs.dev/config/exportdefaultdefineConfig({resolve:{alias:{'~/':`${path.resolve(__dirname,'src')}/`}},css:{preprocessorOptions:{scss:{//注入全局scss变量additionalData:`@use"~/assets/theme/default.scss"as*;`}}},plugins:[vue(),ElementPlus({useSource:true})]})现在，我们在src目录下创建plugins目录，在plugins目录下创建element-components.js和index.js文件。注册的功能。export{ElButton}from'element-plus'index.js文件代码如下：import*asElementUifrom'./element-components'exportdefaultapp=>{//创建element-components文件的主要目的分开是为了方便循环注册组件Object.values(ElementUi).forEach(c=>app.use(c))}现在，我们修改src/main.js文件，在这个文件中导入plugins/index.js文件,并注册插件。import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importVuePluginsfrom'./plugins'//importconstapp=createApp(App)app.use(VuePlugins)//注册插件app.use(router)app.mount('#app')现在，让我们修改Demo.vue文件并测试我们上面介绍的ElButton组件。Demo.vue文件的代码改成如下：Test
确保开发服务已经启动，访问http://localhost:3000/#/demo，我们会看到如下界面，点击测试按钮，会弹出成功信息。现在，我们将上一篇文章中实现的TableView组件添加到这个项目中。首先介绍一下使用的element-plus组件。修改element-components.js文件为如下代码：export{ElButton,ElForm,ElFormItem,ElInput,ElTable,ElTableColumn,ElLoading,ElPagination,ElConfigProvider//用于配置语言，默认为英文，我们需要配置asChinese}from'element-plus'由于element-plus默认的语言是英文，所以我们需要先配置中文语言包。将App.vue更改为以下代码：然后，将上篇文章中完成的TableView.vue组件放到components目录下，并在该目录下创建一个index.js文件，其中代码如下：export{defaultasTableView}from'./TableView.vue'然后修改src/plugins/index.js文件，导入我们的自定义组件，注册为全局组件。import*asElementUifrom'./element-components'import*ascompsfrom'../components'exportdefaultapp=>{Object.values(ElementUi).forEach(c=>app.use(c))对象。keys(comps).forEach(k=>app.component(`Ui${k}`,comps[k]))}现在，我们可以编写一个示例来测试TableView.vue组件。修改Demo.vue文件，替换为如下代码：新用户然后，访问http://localhost:3000/#/demo，我们可以看到如下界面，以上就是本文的全部内容，童鞋们都学会了吗？
