打开项目的根目录,然后打开命令窗口,输入 npm install swiper@4.4.1 @后为指定版本号,也可以不写 在main.js 中,引入 import Swiper from 'swiper' import 'swiper/dist/css/swiper.css'; 同时在你所要使用的vue文件中,再次引入,(不知道为什么还要再次引入,否则获取不到Swiper) import Swiper from 'swiper' 然后在页面渲染完成后,初始化Swiper var lunbo =n…
问题情景:开发中发现我的项目四周有白边,但是并没有设置样式 问题原因:vue脚手架中静态文件夹public中的index.html造成的 解决方案:找到vue脚手架中index.html页面,设置margin为0即可 <style> body { margin: 0; } </style>…
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.Vant作为一款优秀的移动端vue组件库,自然也是支持的.由于当下手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做才能更好地适配不同屏幕宽度的移动设备?因而,在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)…
文章目录 1.第一步编写组件 1.1 编写一个 展示学校的组件 1.2 定义一个展示学生的信息组件 2.第二步引入组件 3.制作一个容器 4.使用Vue接管 容器 5.实际效果 6.友情提示: 7.项目的目录结构 1.第一步编写组件 template中进行页面结构(必须要有一个根节点(div)) script 中进行数据的交互操作.data.method.watch- style 进行页面样式设计 注意 :需要向外抛出组件 1.1 编写一个 展示学校的组件 <template> <div…
虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下:  npm install axios --save-dev 2.在main.js中引入axios. import axios from 'axios' 3.接着将axios改写为Vue的原型属性 Vue.prototype.$http=axios 4.全局配置baseURL(后面如果接口baseURL更改了,可直接修…
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vue和载入其他组件或者依赖库 只支持单个script标签: 支持通过import方式载入其他.vue后缀的组件文件: style:设置样式 支持多个style标签: 支持scoped属性,css只应用于当前组件的元素中: 支持lang配置多种预编译语法: 局部组件:这里是一个三级地址组件 首先看一下目…
问题描述: 输入npm run dev 没有报错也没有显示可以点击的地址链接,如下图: 解决方法: 具体配置: autoOpenBrowser默认为false,改为true.重新 npm run dev 即可自动弹出界面…
需要先导入: import logo_st_ga from '../assets/big_st_ga.png'; import logo_st_sp from '../assets/big_st_sp.png'; 然后根据后端传递过来的标识符引入对应的图片: if(res.data.data == 'st_ga'){ thiz.logoName = logo_st_ga;}else if(res.data.data == 'st_sp'){ thiz.logoName = logo_st_sp;…
参考哦 https://blog.csdn.net/qq_36742720/article/details/83620584 https://jingyan.baidu.com/article/c1a3101e7aeb93de656debe4.html https://www.jianshu.com/p/21060234e9a6…
我们在写属性时经常会加入’-‘来进行分词,比如:<panda from-here=”China”></panda>,那这时我们在props里如果写成props:[‘form-here’]是错误的,我们必须用小驼峰式写法props:[‘formHere’].…