Vue+elementui和uniapp小程序+vant weapp

这篇具有很好参考价值的文章主要介绍了Vue+elementui和uniapp小程序+vant weapp。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

人都傻了,搞了两天一直报错,才知道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')

微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app④如果你遇到这种问题,请检查你是否安装了插件vetur,卸载它,vue3不支持这个
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
⑤照着写进页面,然后运行就可以了
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文件夹里的东西复制出来
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
④放在vant里面
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app

⑤手动引入组件

"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index",
			"van-cell": "/wxcomponents/vant/cell/index",
			"van-cell-group": "/wxcomponents/vant/cell-group/index",
			"van-icon": "/wxcomponents/vant/icon/index",
			"van-image": "/wxcomponents/vant/image/index",
			"van-row": "/wxcomponents/vant/row/index",
			"van-col": "/wxcomponents/vant/col/index",
			"van-popup": "/wxcomponents/vant/popup/index",
			"van-toast": "/wxcomponents/vant/toast/index"
		}

微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
⑥引入样式,少了这一步打包的时候是不会把wxcomponents打包上的,这文件夹是自己创建的哈
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
⑦页面上使用
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
⑧npm i
⑨打包
⑩运行
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
运行成功就会打包一个dist文件

2、打开微信开发者工具
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app

微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
导入文件的时候按上图即可,有什么讲究呢?因为这个文件夹里有一个app.json文件,这样开发者工具才会认,不然就报错。
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
3、把这几个视频学完https://ke.qq.com/course/3169971/10920598598344371#term_id=103296764。不要钱
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
4、有几个插件需要安装,我用的vscode
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app

5、去申请一个appid,入口:https://mp.weixin.qq.com/
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
成功之后登陆就可以了。
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app 以上一个项目就可以开始写了。


以下是2021年8月30日完笔
1.创建项目步骤
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
版本低于3不能执行vue init webpack vue_test (vue_test是自己的项目名字)
怎么办?升级?
重装node
步骤一:重装,选择安装路径的时候如果是C:\Program Files\nodejs,记住这个地址,下一个界面选择add to path选项继续;
安装成功之后以管理员身份打开命令提示符
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
步骤二:改变环境变量
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
*打开path之后新建一个路径为C:\Program Files\nodejs\node_global
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
*打开path之后,新增路径C:\Program Files\nodejs\node_global\node_modules
步骤三:在安装node的文件夹下新建两个文件夹
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
步骤四:在cmd里面输入npm config set prefix “C:\Program Files\nodejs\node_global”;
npm config set cache “C:\Program Files\nodejs\node_cache”;
接着输入
npm install express -g微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
步骤五:npm install -g @vue/cli微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
如果不成功,一定要记住把以前安装过node的文件夹删掉,没用的都删掉,我的一开始报错,然后我找到D盘nodejs里面安装的文件删了就好了。微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
步骤六:vue create -p dcloudio/uni-preset-vue my-project(my-projiect是项目名字),选择hello uni app
成功之后会出现这个,按顺序再输入cmd就行,
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
运行成功就是这样
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
2.卸载vue cli的步骤:
npm uninstall -g vue-cli
npm uninstall -g @vue/cli

————————手动分割线————————————
接下来是在hbuilderX里面操作了
步骤一:打开之前安装的文件夹(我的名字叫my-project)
然后运行微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
第一次运行会遇到一些问题
首先打开微信开发者工具,把端口打开
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
然后在项目里面打开src文件夹里面的manifest.json文件,输入iD,我用的测试号,如下图
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
配置完成之后再次运行就没问题了
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
如果报错Uncaught TypeError: Cannot delete property ‘WeixinJSBridge’ of #< Window >
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
多改几次低版本,我用的17版就可以了
如果要用第三方比如百度地图api在小程序上,首先在百度地图申请一个key,然后按如下步骤
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app

————————————————手动分割————————————
知识点总结:
1.底部导航栏的这个标题是规定的用tabBar
2.改小程序的名字
微信小程序 elementui,vant,uniapp,vue,vue.js,elementui,uni-app
3.app.json文件里是路由的设置,放在第一行的路由就是首页
4.每个vue文件的根节点必须为 < template >,且这个 < template > 下只能且必须有一个根 < view > 组件。
5.uni-app的组件,分为基础组件和扩展组件。
6.onload是小程序加载,onready是页面加载

     onLoad: function(option) {
		option可以拿到另一个页面传来的参数
		},

7.config文件夹下的api文件放的内容是接口
8.data里的变量用this.name 就能在方法里改动this.name=1;如果在success方法里面,this.name要变成that.name,在方法里要加上that=this
9.静态资源放在static文件夹里
10.代码里如果要用变量的值写法为:{{baoxiuma}},如果要写在标签里,在属性前加冒号,比如

<picker :value="index" ></picker>

index就是一个变量
11.想显示和隐藏一个元素的话

<view v-show="zhi">
这个zhi为true或者false
</view>

12.样式就是class=“name’,然后在style里面去写样式,有很多样式只能在view组件里写
13.事件方法@click=“repair”,很多特定组件里也有自己的方法比如@change,@success。。。;如果要带参数@click=“detail(name)”,这个参数可以是定量也可以是变量,在method里写方法的时候也是在后面打个括号即可,命名不用一样
14.如果想遍历元素

<view v-for="(item,index) in list" :key="index"></view>

list是一个数组变量;index是数组里的唯一标识;然后内容就取item.属性名即可
15.表格中uni-table在uni-th里直接写width=“”就可以控制表格一列的宽度
16.在data定义的对象可以直接使用{{对象.属性名}}
17.如果拉取仓库分支的代码时需要安装依赖,npm install之后运行不成功,可能考虑是和分支上的npm版本不一致,将本地的npm版本改为一致的就行npm install npm@版本号 -g文章来源地址https://www.toymoban.com/news/detail-778371.html

到了这里,关于Vue+elementui和uniapp小程序+vant weapp的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序安装和使用 Vant Weapp 组件库

    Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 在小程序项目上安装Vant Weapp,(你的电脑应该有npm环境才行)。 win + R 输入 npm -version 查看一下 如果没有

    2024年02月16日
    浏览(67)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(66)
  • 微信小程序引入vant-weapp后出现[‘vant-XXX‘]:‘@vant/weapp/xxx‘未找到,错误解决

    出现“[‘vant-XXX’]:\\\'@vant/weapp/xxx’未找到”的错误提示 1、找到小程序所在的目录,用管理员模式下打开cmd 2、运行npm init,一路回车,用默认的即可 3、运行npm i @vant/weapp -S --production 如果用的是淘宝镜像的,使用cnpm i @vant/weapp -S --production 4、将 app.json 中的 “style”: “v2” 去

    2024年02月13日
    浏览(58)
  • 微信小程序用vant weapp组件设置圆角边框输入框

    vant weapp的输入框样式默认都是方形的,有时候需要设置成圆角的样式,发现直接设置以下样式根本不起作用,这是因为框架自带的样式导致的,这时候我们需要看看style,找到为什么修改不成功。 起初我把所有能试的方法都试了发现就是没有办法改变边框的样式,后来才发现

    2024年02月13日
    浏览(83)
  • 微信小程序自定义tabBar以及图标-使用vant-weapp

    微信官方文档介绍 官方文档 1、在小程序根目录下创建custom-tab-bar文件夹,并创建以下文件。 custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-barr/index.wxss 2、修改custom-tab-bar/index.js(清除初始化的内容) 3、修改custom-tab-bar/index.json(引入vant 组件) 4、修改custom-tab-

    2024年02月11日
    浏览(55)
  • 解决微信小程序vant weapp组件库时间选择器只显示年year的问题 vant weapp版本1.10.5

    当今网上十篇文章九个抄,抄的还都是远古文章,完全不适用现在的版本,故于2023.3.10日,出一篇现vant weapp版本1.10.5的时间选择器只显示year模式的需求,解决官方无法显示只带有年份year的时间选择器问题 找到时间选择器文件,修改datetime-picker/index.js源码 1. 先让面板支持只

    2024年02月12日
    浏览(38)
  • 微信小程序Vant Weapp-Card 商品卡片自定义修改样式

          商品卡片,用于展示商品的图片、价格等信息。       官方文档给出的配置项对大多数人来说都太官方,这是官方给出的。       高级用法               可以通过插槽添加定制内容。         在官方文档中给出的示例配置中,你根本无法调整中部宽度。  van-card

    2024年03月24日
    浏览(55)
  • 微信小程序中 vant weapp 使用外部的icon作为图标的步骤

    首先在当前项目的根目录中,创建assets文件夹,用于存放静态资源,assets里面的文件夹可以自己定义,图片,css… iconfont官网 https://www.iconfont.cn/ 添加一个图标到iconfont项目中,点击生成在线链接,记得选unicode,然后再生成在线链接(待会儿会使用) 接着将当前项目的代码下

    2024年02月05日
    浏览(68)
  • 微信小程序导入Vant Weapp ui组件库2023年最新版

    写这篇文章的原因是Vant Weapp的官方文档快速上手是有一定的问题的,没错,我就是那个试错的人,弄了一下午才发现问题所在,所以写了一篇正确的导入教程。 第一步:在项目所在目录打开控制台 第二步:查看自己电脑npm的版本,如果有会有版本号显示,没有则需要去下载

    2024年02月09日
    浏览(50)
  • 微信小程序引入Vant Weapp修改样式不起作用,使用外部样式类进行覆盖

            在项目中使用第三方组件修改css样式时,总是出现各种各样问题,修改的css样式不起作用,没有效果,效果不符合预期等。 栗子(引入一个搜索框组件) 实现效果:  左侧有一个搜索文字背景为蓝色,接着跟一个搜索框 wxml wxss emmm...明明我们css都写了,这出现的是什么鬼   审查

    2024年02月02日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包