## 安装View UI组件库
进入项目根目录,执行`npm install view-design --save`
在main.js中引入`import 'view-design/dist/styles/iview.css';`
按需引用
借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积。首先安装,并在文件 .babelrc 中配置:
```
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "view-design",
"libraryDirectory": "src/components"
}]]
}
```
[参考文档](https://www.iviewui.com/docs/guide/start)
## 构建主目录
使用iview中的menu组件,以及vue-router构建如下主目录
![](https://img.kancloud.cn/2e/97/2e97687cc8e847ce07f185208a1d53cc_1366x727.png)
![](https://img.kancloud.cn/03/e9/03e9f481bab69e0ddef9a81f56a7136b_1032x532.png)
![](https://img.kancloud.cn/f2/37/f237ab15c302b9f08f03b71a8fe471f8_1072x589.png)