网页制作神器—ElementUI（小白入门超详细）

目录

一、前置准备 ⚓ 

二、引入ElementUI  

三、使用ElementUI ⚙️

---

一、前置准备 ⚓ 

1、安装相关环境，使用VsCode或者webstrom初始化Vue 项目

软件环境下载地址：软件 - 坚果云 - |同步|备份|无限空间

vue-cli安装：

npm install -g @vue/cli

npm设置淘宝镜像加速：

​npm config set registry https://registry.npm.taobao.org

创建vue项目：

vue create vue

 

 

 

 

 

 当然，如果不使用yarn 就选npm

vue create vue--packageManager npm

        这将告诉 Vue CLI 在初始化项目时使用 npm 作为软件包管理器。这样，你就不需要后续手动更改依赖管理器了。(请注意，这个标志只在 Vue CLI 版本 4.5.0 或更高版本上可用。如果你的 Vue CLI 版本较旧，请先升级到最新版本)

运行vue项目：

cd vue
​npm run serve

Vue项目的初始化文件结构通常如下所示：

       App.vue是根组件，是项目的入口组件，可以在其中定义整个应用的布局和结构。main.js是项目的主入口文件，在这里创建Vue实例，并进行其他的配置和初始化操作。 public目录用于存放不需要经过打包处理的静态资源。 其中vue.config.js是Vue项目的配置文件，可以对构建过程进行自定义配置，如更改输出路径、配置代理、压缩等。如将初始项目端口号修改为 7000。

 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:7000
  },
  chainWebpack: config => {
    config.plugin('html')
        .tap(args => {
          args[0].title = "firstVue"
          return args;
        })
  }
})

 可以发现现在修改了title的名字，如果不加这段代码，默认展示的就是新建项目时起的名子。

2、安装组件 | Element

 

 3、修改初始化文件

 删除之后为：

 删除之后为：

增加全局样式： 

*{
    box-sizing:border-box;
}
body {
    color: #333;
    font-size: 14px;
    /* 外和内边框都为0 */
    margin: 0;
    padding:0;
}

import '@/assets/css/global.css

至此，项目初始化完成！ 

 

二、引入ElementUI  

安装成功后，即可引入

 在 main.js 中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI, { size: "small" });

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

三、使用ElementUI ⚙️

学习两种布局

在 HomeView.vue 文件中 

 再学习第二种方式，使用Container 布局容器，创建一个导航栏

：外层容器。管理定义内容的子元素 

:default-openeds  设置el-menu列表默认打开。

：定义一个可点击的点击菜单。