使用Element进行vue开发

前言:Element是一个非常方便的工具，使得vue开发者不需要花大量时间去设计样式和布局，大大缩短开发者的负担。

• 使用步骤

  1. 下载 Element 核心库。

  2. 引入 Element 样式文件。

  3. 引入 Vue 核心 js 文件。

  4. 引入 Element 核心 js 文件。

  5. 选择所需内容。

  6. 通过 Vue 核心对象加载元素。

• 常用布局

1.使用步骤：

1.下载Element 核心库。

安装Element UI组件库，在当前目录下，在命令行执行指令：npm install element -ui@   //@后面写版本号

下载成功后项目文件会有文件如图所示

如果无法安装，执行以下指令：npm install --legacy-peer-deps element-ui --save

2.引入 Element 样式文件（按需引入）。

借助 babel-plugin-component插件，我们可以只引入需要的组件，以达到减小项目体积的目的。

• 首先，安装 babel-plugin-component：npm install babel-plugin-component -D
•  配置文件babel.config.js ：按下图所示写入代码

• 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

 

 3.引入 Vue 核心 js 文件。

• 比如： <script src="js/vue.js"></script>

4. 引入 Element 核心 js 文件。

• 比如：<script src="element-ui/lib/index.js"></script>

5.选择所需内容（比如按钮）。

 6.通过 Vue 核心对象加载元素。

 2.常用布局：

• 基础布局：将页面分成最多24个部分,自由切分。通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

                

                

• 容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域。 最多只能包含这四种区域，最少可以有1个+。

            

用于布局的容器组件，方便快速搭建页面的基本结构：

• <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
• <el-header>：顶栏容器。
• <el-aside>：侧边栏容器。
• <el-main>：主要区域容器。
• <el-footer>：底栏容器。
• 注：<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。