Vue中使用BootstrapVue

发表于 | 分类于
字数统计: 408

项目运行报错: System limit for number of file watchers reached

原来是linux系统中限制了用户可以watch文件变更的最大数，因此需要通过sysctl.conf进行更改数值

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

解决方案参考

重启服务，不再报错。

接下来集成 bootstrap-vue CSS框架。官方文档 简单使用教程

报错

GET https://registry.npmjs.com/boostrap-vue - Not found

怎么会找不到？？

先装个nrm来管理镜像 npm install -g nrm nrm用法

诶，我明明用的是淘宝源啊？？

测下速度，这么感人的吗？

试了一下还是不行，然后我把 i 换成 install 分开安装，就可以了？？这是什么鬼bug啊…

所以最好用这个命令装 npm install bootstrap-vue bootstrap

在Vue项目的main.js中引入

1
2
3
4
5
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.Vue.use(BootstrapVue)

点击VS Code下面的spaces可以切换缩进格式

然后就可以愉快的引入样式啦

浏览器安装了对于的vue devtools后就可以更方便的查看组件了

父组件在export default 中定义获得数据的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
data() {
  return  {
    questions: []
  }
},
mounted: function() {
  fetch("url for api...",{
    method: 'get'
  })
  .then((response) => {
    return response.json()
  })
  .then((jsonData) => {
    return this.questions = jsonData.results
  })
}

子组件在export default 中用props获得父组件的数据, 除了object还可以传递function等

1
2
3
4
5
6
7
<script>
export default {
  props: {
    currentQuestion: Object,
  }
}
</script>

Lodash是一个好用的Javascript原生库，可以学到各种算法的实现 官方文档 源码