-
.vue
文件中的style
标签内因为scoped
的原因样式只对.vue
文件中的template
模板标签内的结构有效,引入的第三方vant文档
中的组件是无效的 定义一个全局的样式文件,例如在
src
目录中添加一个resetvant文档.less
文件(这里我使用的是less
文件也可以是scss
文件或者css
文件),专门用来存放vant文档组件
中需要修改的样式为了便于维护最好使用组件原有的样式類名进行样式修改。最后在main.js
文件中全局引入就可以了
.vue
文件中的style
标签内因为scoped
的原因样式只对.vue
文件中的template
模板标签内的结构有效,引入的第三方vant文档
中的组件是无效的
src
目录中添加一个resetvant文档.less
文件(这里我使用的是less
文件也可以是scss
文件或者css
文件),专门用来存放vant文档组件
中需要修改的样式为了便于维护最好使用组件原有的样式類名进行样式修改。最后在main.js
文件中全局引入就可以了
之前有搭建过mpvue+vant文档不过没有做記录,这次公司又有新的小程序项目启动所以再从头搭建。顺便记录一下要不然时间久了也就忘记怎么搭建了。文章末尾含有代码需要学习的童鞋,拿走不谢
先要进入你的代码目录,然后再创建需要了解
执行后,过一会它会再次询问你项目名称,微信小程序appid項目描述,作者是否开启ESLint等信息。
完成后它就会在你执行命令的目录创建项目,接下来进入项目下载依赖,并启动
这时,我们用微信开发者工具导入项目目录运行起来看看效果
回到刚才的命令窗口,还是依旧在项目目录下面添加vant文档组件的依赖
在src/app.json文件用全局引鼡某个组件,比如按钮组件
我们去首页的文件中加入按钮的代码看看效果
运行项目,然后微信开发者工具看看
发现了微信开发者工具控制台报错
解决方法 将ES6转ES5的复选框,钩上
就这样就可以看到首页,已经成功显示vant文档的按钮mpvue+vant文档搭建成功!!! 下一篇文章,我们来介绍怎么引入flyio:
这里我上传了一个名字叫mpvue-vant文档-flyio的项目步骤是按照上文操作的,只是项目名不同而已