在vue脚手架项目里面使用elementui

1.通过脚手架创建一个项目

安装脚手架,点击链接

# 输入
npm run dev
# 启动项目
ctrl+c
关闭服务

2.在vue脚手架项目中安装elementui

• 安装elementui依赖

npm i element-ui -S

• 使用elementui

# 引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
# 在main.js中进行全局注册
Vue.use(ElementUI);

2.使用路由router

• 1.创建组件
  
  2.注册组件
  
  3.放到App.vue中
  

3.Loyout组件

通过基础的24分栏
在element ui中布局组件将页面划分为多个行row,每行最后分为24栏(列)

3.1使用Layout组件

<el-row>
      <el-col :span="8">
        <div style="border: 1px red solid;">占用6份</div>
      </el-col>
      <el-col :span="8">
        <div style="border: 1px red solid;">占用6份</div>
      </el-col>
      <el-col :span="8">
        <div style="border: 1px red solid;">占用6份</div>
      </el-col>
    </el-row>

注意:

• 在一个布局组件中是由row和col组合而成
• 在使用时候要区分row属性和col属性

3.2属性的使用

• 行属性使用

 <el-row :gutter="50" tag="span">
      <el-col :span="2">
        <div style="border: 1px red solid;">占用6份</div>
      </el-col>
      <el-col :span="4">
        <div style="border: 1px red solid;">占用6份</div>
      </el-col>
      <el-col :span="12">
        <div style="border: 1px red solid;">占用6份</div>
      </el-col>
      <el-col :span="6">
        <div style="border: 1px red solid;">占用6份</div>
      </el-col>
    </el-row>

• 列属性使用

<h1>layout组件中使用偏移</h1>
    <el-row>
      <el-col :span="12" :offset="4" :push="3"><div style="border: 1px blue solid">我占用了12份</div></el-col>
      <el-col :span="6"><div style="border: 1px blue solid">我占6份</div></el-col>
    </el-row>

4.Container布局容器

4.1创建布局容器

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

<el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下分开，否则会水平左右分开。

4.2容器中包含的子元素

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。