可同时参考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.运行