采用Element组件搭建Web应用程序以及遇到的问题

Element提供了丰富的Web端开发组件库，近50多种组件基本满足了Web前端开发要求，可以方便、快捷搭建一套Web应用程序。本文主要介绍采用Element组件搭建Web应用程序以及遇到的问题解决方法。

第一步，是搭建项目工程，自己生成一个工程是一件挺麻烦的事情，偷懒的做法是：可以直接使用Element提供的通用模板项目element-starter-master，官方有下载。

第二步，自然是解压缩，进入工程项目目录，然后运行npm run dev命令，但却提示如下错误：

错误提示之一

尝试运行npm i element-ui -S命令，提示如下错误：

错误提示之二

原因分析：开始以为缺少element依赖包，因此运行npm i element-ui -S命令，结果发现缺少的依赖包还有很多，因此运行npm install命令，才解决问题。

第三步，再次运行npm run dev 命令，运行结果如下图所示：

正常运行结果

第四步，在浏览器中输入localhost:8010，能够正常访问网页，显示的是VUE的LOGO和一个start按钮。

接下来，可以开始我们的Web应用程序开发之旅了。例如，实现一个上下左右布局页面，在App.vue代码中，添加如下图代码：

上下左右布局代码

千万注意：不要遗漏了el-header等样式，否则显示达不到预期效果。在浏览器中输入localhost:8010，显示效果如下图所示：

运行结果