Element-ui第一次学习

第一次学element-ui不知道能不能学懂，将就学吧！

安装脚手架

脚手架又是什么呢，我也不知道，但是刚刚搜了一下是一个基于Vue.js的快速生成项目股价的工具，它可以帮助开发者快速搭建一个带有router、vuex、eslint等常用配置的项目模板

npm install -g @vue/cli

重点来了哈！！！！，居然报错，但是我不知道为啥错啊，百度了一下这样的错误通常是因为npm镜像源的SSL证书过期了。在中国大陆地区，很多人会使用淘宝NPM镜像（https://registry.npm.taobao.org/），如果该镜像的证书过期，就会出现这种错误

那该怎么解决呢，再去百度一下，将镜像地址改为npm config set registry http://registry.npm.taobao.org来更换为国内的镜像源 注意 之前的https://registry.npm.taobao.org 不能用了 将https改成http，然后再执行命令清除npm缓存

npm config set registry http://registry.npm.taobao.org
npm cache clean --force

现在再安装脚手架试试哈，就没有任何问题咯，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

现在来创建项目

vue create element-ui

记住千万不能选前两个，他会默认配置哒，听到没，不能选，实在想选的话也可以，嘿嘿，因为我看了一下，选择第二个和第三个好像没有区别（可能是我没找到的原因，大家可以帮我看看是啥原因哇），"Manually select features" 翻译成中文是“手动选择特性”。在使用 Vue CLI 创建新项目时，这个选项允许你自定义项目中包含的各种特性，如 Babel、ESLint、TypeScript 等。选择这个选项后，你可以逐个选择你希望在项目中启用的功能，而不是使用默认的预设配置。

然后我发现我没有配置到vuex,router之类的，然后又去百度了一下，知道了可以用空格选择，然后再按回车就可以进入下一步了，呜呜呜呜呜呜呜呜呜呜呜呜呜，那就解释一下以下是什么配置，大家想配置什么就配置什么，我后面又加了vuex,router

• Babel: 用于转换现代 JavaScript 语法，使其能在旧版浏览器中运行。
• TypeScript: 添加 TypeScript 支持，这是一种静态类型的 JavaScript 超集。
• Progressive Web App (PWA) Support: 为项目添加渐进式 Web 应用的支持，使应用可以在离线状态下工作，并且具有桌面应用的体验。
• Router: 添加 Vue Router，这是 Vue.js 官方的路由管理器。
• Vuex: 添加 Vuex，这是 Vue.js 的状态管理模式和库。
• CSS Pre-processors: 添加 CSS 预处理器支持，如 Sass、Less 或 Stylus。
• Linter / Formatter: 添加代码格式化和 linting 工具，如 ESLint，以保持代码风格一致和减少潜在错误。
• Unit Testing: 添加单元测试框架，如 Jest 或 Mocha。
• E2E Testing: 添加端到端测试框架，如 Cypress 或 Nightwatch。

这一步就需要选择项目将基于哪个版本的 Vue.js，我选的是2，为啥选2呢，因为3我不会

这一步呢是在配置 Vue Router 的历史模式，Vue Router 提供了两种模式：哈希模式（hash mode）和历史模式（history mode）。历史模式允许你使用干净的 URL，例如 /users 而不是 #/users。这使得 URL 更友好，也更接近传统的服务器路由。我以后在文章说明这个东西，因为我不会vue-router，嘿嘿

这些选项是在使用 Vue CLI 创建项目时关于代码质量和格式化的配置选项（编码风格又是啥，我也不知道，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈）

如何选择呢？

• 如果你希望只检查代码错误而不关心编码风格，选择 ESLint with error prevention only。
• 如果你希望遵循 Airbnb 的编码风格，选择 ESLint + Airbnb config。
• 如果你希望使用简单且易于维护的编码风格，选择 ESLint + Standard config。
• 如果你希望自动格式化代码，并且愿意接受 Prettier 的默认规则，选择 ESLint + Prettier。

 这些选项是在使用 Vue CLI 创建项目时关于代码质量和格式化的附加配置选项

 如何选择？

• 如果你希望每次保存文件时都能立即发现并修复潜在问题，选择 Lint on save。
• 如果你希望在提交代码之前确保代码质量，并尝试自动修复问题，选择 Lint and fix on commit。

 决定项目中 Babel、ESLint 等工具的配置文件的放置位置

 如何选择？

• 如果你希望配置文件独立且易于管理，选择 In dedicated config files。
• 如果你希望配置信息更加紧凑，并且不介意在 package.json 文件中管理配置，选择 In package.json。

 

 是否想要将当前的项目配置保存为预设，以便在将来创建新项目时快速使用相同的配置。如果以后经常用这些配置就选yes，否则no

创建项目终于创建完咯，累死我了，咋啥都不知道，果然我还是菜鸡，

接下来我们就浅浅运行一下吧,是没有任何问题的哦

npm run serve

Vue项目的初始化文件结构通常如下所示（看每个人的配置情况哈，这些只是主要的）：

-src

        -assets:存放静态资源文件，如图片，样式表等

        -components:存放可复用的vue组件

        -views:存放页面

        -router:存放路由配置文件

        -store:存放vuex状态管理相关文件

        -utils:存放工具函数或者模块

        -App.vue:根组件，是项目的入口组件

        -main.js:项目的主入口文件，进行vue实例的创建和其他配置

-.gitignore

-babel.config.js：Babel的配置文件，用于将ES6+代码转换为ES5代码等

-package.json：项目的配置文件，包含项目的依赖信息，脚本命令等

-vue.config.js：vue项目的配置文件，可以对构建过程进行自定义配置，如更改输出路径、配置代理、压缩等，下面举个例哈，记得vue.config.js修改之后一定要重新运行！！！

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{//将初始项目端口号修改为 7000
    port:7000
  },
  chainWebpack:config => {
    config.plugin('html')
      .tap(args => {
        args[0].title = 'f我的element-ui'//这里是修改了整个网页的名字，如果不加这段代码，默认展示的就是新建项目时起的名子。
        return args;
      })
  }
})

 修改之后的结果是什么呢，铛铛铛，之前都是http://localhost:8000/开头的

安装Element-ui 

npm i element-ui -S

然后在package.json里面就有element-ui了

修改初始化主页

在App.vue里面修改如下：

 增加global.css全局样式，并且在main.js里面引入

最后一步在router/index.js里面修改

最最最后呢，就成功咯

引入Element UI

我们之前是不是已经安装了，突然跑去初始化了一下页面，所以我们现在来引入一下

使用Element-ui

 首先呢，我们打开官网，Element - The world's most popular Vue UI framework，打开了没有哇

布局

布局呢有两种，先看看第一种吧

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。通过基础的 24 分栏，迅速简便地创建布局

<template>
  <div>
    
    <!-- 这是最基础的哈 -->
    基础 =============================================================================================
    <el-row>
      <el-col :span="8">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="8">
        <div style="background: red;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="8">
        <div style="background: blue;width: 100%;height: 30px;"></div>
      </el-col>
    </el-row>
    <!-- 用gutter栅格间隔,单位通常是像素（px）-->
    用gutter栅格间隔=============================================================================================
    <el-row :gutter="20">
      <el-col :span="8">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="8">
        <div style="background: red;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="8">
        <div style="background: blue;width: 100%;height: 30px;"></div>
      </el-col>
    </el-row>
    <!-- offset分栏偏移，支持偏移指定的栏数，通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。 -->
    offset分栏偏移=============================================================================================
    <el-row>
      <el-col :span="6" :offset="6">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6">
        <div style="background: red;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6">
        <div style="background: blue;width: 100%;height: 30px;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div style="background: red;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6">
        <div style="background: blue;width: 100%;height: 30px;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6">
        <div style="background: red;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div style="background: blue;width: 100%;height: 30px;"></div>
      </el-col>
    </el-row>
    <!-- 通过 flex 布局来对分栏进行灵活的对齐。将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 -->
    flex 布局来对分栏进行灵活的对齐=============================================================================================
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6">
        <div style="background: red;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :span="6">
        <div style="background: blue;width: 100%;height: 30px;"></div>
      </el-col>
    </el-row>
    <!-- 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。允许界面根据不同的屏幕尺寸自动调整布局 -->
    五个响应尺寸=============================================================================================
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <div style="background: red;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <div style="background: blue;width: 100%;height: 30px;"></div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <div style="background: pink;width: 100%;height: 30px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
}
</script>
<style>

</style>

 

注意点：（敲重点了哈）

1.使用 offset分栏偏移，前面的设置了offset之后，后面都会挪动，并不是指这一块挪动（我画个图吧，毕竟我表达不出来）

2.Element UI 中预设的五个响应尺寸包括：

1. xs (Extra Small) - 针对极小屏幕设备（如手机），通常指屏幕宽度小于 600px 的情况。
2. sm (Small) - 针对小型屏幕设备（如平板），一般指的是屏幕宽度介于 600px 至 960px 之间的情况。
3. md (Medium) - 针对中等屏幕尺寸，适用于屏幕宽度介于 960px 至 1280px 之间的设备。
4. lg (Large) - 针对大屏幕尺寸，适合屏幕宽度介于 1280px 至 1920px 的设备。
5. xl (Extra Large) - 针对超大屏幕尺寸，即屏幕宽度大于 1920px 的情况。

 

第二种布局是 Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

导航栏菜单

<el-menu>：外层容器。管理定义内容的子元素 （:default-openeds  设置el-menu列表默认打开。）

<el-submenu>：定义一个可点击的点击菜单。

      <template>：el-menu的子元素用来定义el-menu点击列表的列表名字。

     <el-menu-item>：按钮元素，菜单列表的单位元素。<el-menu-item-group>：el-men-item的分组元素。

<template>
  <div id="app">
    <el-container style="height: 100vh;border: 1px solid #eee;">
      <el-aside width="200px">
        <el-menu :default-openeds="['1','3']">
          <el-submenu index="1">
            <template slot="title">导航一</template>
            <el-menu-item>
              选项一
            </el-menu-item>
            <el-menu-item>
              选项二
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">导航二</template>
            <el-submenu index="1-1">
              <template slot="title">分组一</template>
              <el-menu-item index="1-1-1">选项1</el-menu-item>
              <el-menu-item>选项2</el-menu-item>
            </el-submenu>
            <el-submenu index="1-2">
              <template slot="title">分组二</template>
              <el-menu-item index="1-1-1">选项1</el-menu-item>
              <el-menu-item>选项2</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item>选项一</el-menu-item>
              <el-menu-item>选项二</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">分组二</template>
              <el-menu-item>选项一</el-menu-item>
              <el-menu-item>选项二</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        
      </el-aside>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {}
  }
}
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

 

 注意点：

1.template中一定要加slot="title"

2.:default-openeds="['1','3']"里面一定是字符串

3.el-submenu可以再嵌套一个el-submenu

下拉菜单

el-dropdown(下拉菜单组件)

        i（图标，这里用文字也可以）

        el-dropdown-menu(下拉菜单项组件)

                el-dropdown-item(下拉菜单项)

                el-dropdown-item(下拉菜单项)

                el-dropdown-item(下拉菜单项)

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
       <el-header style="text-align: right;font-size: 12px;">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px;"></i>
            <el-dropdown-menu>
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
       </el-header>
    </el-container>
  </div>
</template>
 

 

表格组件 

el-table(表格组件)

        el-table-column(表格列组件)

        el-table-column(表格列组件)

        el-table-column(表格列组件)

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-main>
          <el-table :data="tableData">
            <el-table-column prop="name" label="名字" width="140"></el-table-column>
            <el-table-column prop="date" label="日期" width="140"></el-table-column>
            <el-table-column prop="address" label="地址" width="140"></el-table-column>
          </el-table>
        </el-main>
    </el-container>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item)
    }
  }
}
</script>
 

就写这么多啦（谢谢白白白鲤鱼博主写的，因为我是按照他的学习的，还有很多组件可以跟着官网上学，我后面有空的话再写，就这样咯）