iView的初步探索

一. 尝试使用官方的推荐工程,发现iview版本太低,webpack模板不是使用实际项目开发的webpack版本,而是simple版本,因此不使用

二.自己搭建

步骤如下

1.vue init webpack my-iview

2.npm install

3.cd my-iview

4.npm run dev

5.引入iview

官方介绍(主要是我一开始没有搞明白,这里记录一下): https://www.iviewui.com/docs/guide/start

(1)全局引入iview,不做记录,很简单
(2)按照需求引入,需要使用babel-plugin-import插件

特别注意,按需加载就是不使用全局加载的方式了,因此(1)中的main.js中引入的iview相关代码可以删除了,不然后面报错(就是这里迷茫了)

npm install babel-plugin-import --save-dev
// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

(3)按需使用

<script>
import { Button, Table } from 'iview';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
  Button,Table 
  }
}
</script>

6.全局使用的需求

比如响应式布局,几乎每个页面都会使用Row,Col,这时我觉得全局引入一下比较好

在main.js中
import {Row,Col} from 'iview';
Vue.component('Row',Row);
Vue.component('Col',Col);

7.WebStorm中不能识别iview标签的问题

例如iview中的Input标签,是双标签,但是html中是单标签,but,iview的Input和html的input是一样的(html不区分大小写),这时会出现WebStorm语法识别的问题,且会自动将我们写的代码标红,很不爽.
(1)解决1:放弃WebStorm
(2)解决2:使用iview的别名,如:Row可以写成i-row等,但是这样代码命名不统一,不太好.

---

所以我的解决办法是:使用sublime吧