Vue+elementui和uniapp小程序+vant weapp

前端成长笔记

已于 2023-02-13 16:09:30 修改

阅读量6.8k

点赞数 5

分类专栏： vant uniapp vue 文章标签： vue.js elementui uni-app

于 2023-02-10 16:07:01 首次发布

本文链接：https://blog.csdn.net/ds0604/article/details/128972378

版权

本文介绍了作者在尝试使用Vue+ElementUI开发PC应用时遇到的问题，并转向学习使用UniApp+Vant Weapp进行小程序开发的过程。详细讲述了从初始化Vue项目、安装ElementUI和解决不兼容问题，到搭建UniApp环境、引入Vant Weapp组件及打包运行的步骤。同时，分享了学习资源和开发中遇到的常见错误及其解决办法，如端口冲突、微信开发者工具的使用、appid申请等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

人都傻了，搞了两天一直报错，才知道elementui是PC端的ui，不能用于小程序。
所以我要做两个vue的练习项目，，，，又发现新大陆，小程序除了uniapp还有taro,又有新东西学了

第一种PC端VUE+elementui
① npm init vue@latest
②npm install element-plus --save
顺便说一句，如果安装了一个不想要的包，在package.json里面删掉然后重新npm 就可以了
③配置

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 './assets/main.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

在这里插入图片描述 ④如果你遇到这种问题，请检查你是否安装了插件vetur，卸载它，vue3不支持这个

⑤照着写进页面，然后运行就可以了
https://element-plus.gitee.io/zh-CN/component/button.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
⑥如果使用图标的话，看这个，两个步骤搞定
https://element-plus.gitee.io/zh-CN/component/icon.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8

第二种uniapp小程序+vant weapp组件
历时三天，终于成功搭建，翻遍了别人的csdn终于慢慢的找到正确的路
所以我不允许还有人跟我一样走弯路。
①全局安装vue-cli,npm install -g @vue/cli
②新建一个文件夹npx degit dcloudio/uni-preset-vue#vite my-vue3-project，失败的话就访问这个https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip地址，或者直接用hbuilder创建项目。
。。。。如果你npm i报错，那就用镜像npm install cnpm -g --registry=https://registry.npmmirror.com
③项目创建好了，上这个地址下载文件https://github.com/youzan/vant-weapp。
把dist文件夹里的东西复制出来
在这里插入图片描述
④放在vant里面

⑤手动引入组件

"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index",
			"van-cell": "/wxcomponents/vant/cell/index",
			"van-cell-group": "/wxcomponents/vant/cell-group/index",
			"van-icon": "/wx

最低0.47元/天解锁文章