element-plus + VUE3 项目 build 之后 el-select无法选中

这个项目在运行npm run dev,一切正常,但是build之后,所有el-select无法选中。项目里的el-select是被我单独封装了一个组件。

最后才发现是在data里定义的时候,没有定义对象的属性。

之前在vue2.0中,一直偷懒,data定义弹窗加载的对象都是直接定义的一个空对象,后面axios加载数据赋值后直接就能读取绑定上。

最后改成这样,build之后正常了。

也许因为没有定义对象的属性,不属于响应式对象,也许更多的原因,可能是因为封装的组件还不够完美,能觉得就是好事,哎。。。

### Vue3 功能介绍及用途 Vue3 是新一代的渐进式 JavaScript 框架,其核心设计目标是提高性能、增强可维护性和扩展性。通过引入 Composition API 和改进的响应式系统,Vue3 提供了一种更灵活的方式来组织代码逻辑[^4]。 ```javascript // 使用 Composition API 的示例 import { ref, reactive } from &#39;vue&#39;; export default { setup() { const count = ref(0); const state = reactive({ name: &#39;Vue&#39; }); function increment() { count.value++; } return { count, state, increment }; } }; ``` --- ### Element Plus 功能介绍及用途 Element Plus 是一款专为 Vue3 设计的现代化 UI 组件库,提供了丰富的组件集合,能够快速构建美观且功能强大的用户界面。它继承了 Element UI 的设计理念,并针对 Vue3 进行了全面优化,支持 TypeScript 和 Composition API。 ```html <!-- 使用 Element Plus 的按钮组件 --> <el-button type="primary">Primary Button</el-button> <script> import { ElButton } from &#39;element-plus&#39;; export default { components: { ElButton }, }; </script> ``` --- ### Vue Router 功能介绍及用途 Vue Router 是 Vue.js 官方推出的路由管理工具,主要用于实现单页应用程序 (SPA) 中的导航和视图切换。通过定义路由规则并结合 `<RouterView>` 渲染对应的组件,开发者可以轻松创建复杂的多页面布局[^3]。 ```javascript // 路由配置示例 const routes = [ { path: &#39;/&#39;, component: Home }, { path: &#39;/about&#39;, component: About }, ]; const router = createRouter({ history: createWebHistory(), routes, }); createApp(App).use(router).mount(&#39;#app&#39;); ``` --- ### Axios 功能介绍及用途 Axios 是一个基于 Promise 的 HTTP 请求客户端,适用于浏览器端和 Node.js 环境。它可以用来发起 GET/POST 等类型的网络请求,简化前后端数据交互的过程。由于其简单易用的 API 接口以及良好的跨平台兼容性,Axios 成为了许多前端项目的首选方案之一。 ```javascript // 发起 GET 请求 axios.get(&#39;/api/data&#39;) .then(response => console.log(response.data)) .catch(error => console.error(error)); // 配置拦截器 axios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${token}`; return config; }); ``` --- #### 总结 - **Vue3**: 新一代框架,提升开发体验与运行效率。 - **Element Plus**: 基于 Vue3 的高质量 UI 库,助力快速构建界面。 - **Vue Router**: 实现 SPA 导航的核心工具,便于动态加载不同视图。 - **Axios**: 异步通信利器,负责处理 RESTful 数据交换需求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值