iview-admin源码分析（二）：创建Vue.js项目+引入IView

一、IDEA中创建Vue项目

Vue.js和IDEA的安装这里就不讲了，直接从IDEA创建项目开始讲起。
导航栏【File=>New=>Project…】，出现如下页面：

选择【Static Web=>Vue.js]，点击Next，跳转到如下页面：

输入项目名，和选择项目地址，我这里项目名称为"demo1"，填好后点击"Next"，然后会出现








之后一路点Next




这样就创建好了一个项目，如下

点击导航栏的"Add Configuration"，弹出如下页面：

点击“+”，选择npm，然后在右边填入如下：

代表执行命令"npm run dev"，点击"Apply"，“OK”
再点击右边的绿色三角，下方出现"Run"框，如下

点击链接，浏览器出现如下页面

二、引入IView

在terminal中输入

cnpm install view-design --save

再在main.js文件中添加

import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'

Vue.use(ViewUI)

然后在HelloWorld.vue中试验是否引入成功，将template中内容都注释掉，再添加

<Button type="primary">IView按钮Button>

刷新网页，若出现如下界面，则表示引入成功

三、总结

这一章介绍了如何在IDEA中创建vue项目和导入IVIEW，下一步将介绍登陆页面的功能及实现。
上一篇文章地址：iview-admin源码分析（一）：项目背景及目录
下一篇文章地址：iview-admin源码分析（三）：登录页面及功能