Vue脚手架结合iView文档引入iView组件步骤详解

可同时参考iView文档：

https://www.iviewui.com/docs/guide/install

https://www.iviewui.com/docs/guide/start

https://www.iviewui.com/components/icon

1.安装iView

项目下：$ npm install iview --save

安装到node_modules

*：--save 和 --save-dev等命令区别：NPM install -save 和 -save-dev 傻傻分不清

2.入口文件main.js

// iview文档示例：https://www.iviewui.com/docs/guide/start
import Vue from 'vue'
import App from './App.vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

Vue.use(iView);

3.Main.vue/自己新建的vue文件

<template>
    <div>
        <!-- iView文档示例：https://www.iviewui.com/docs/guide/install -->
        <Button @click="show">Click me!</Button>
        <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>

        <!-- iView文档示例：https://www.iviewui.com/components/icon -->
        <Icon type="ios-checkmark" />
    </div>
</template>

<script>
    import {Modal,Button,Icon} from 'iview'

    // iView文档示例：https://www.iviewui.com/docs/guide/install
    export default {
        name: "Main",
        data: function () {
            return {
                visible: false
            };
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        },
        // 注意名字别写错
        components:{
            Modal,
            Button,
            Icon
        }
    }
</script>

<style scoped>

</style>

4.HelloWorld.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Main/>
  </div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'
import Main from "./common/Main";


export default {
  name: 'app',
  components: {
    HelloWorld,
    Main
  }
}
</script>

5.运行