Vue | Element UI 的快速入门指南

一、创建项目新建一个文件夹，命名为 vue-elementui：地址栏中 cmd 进入到命令行，输入如下命令初始化：vue init webpack具体步骤可参考：安装 vue-routernpm install vue-router --save-dev安装 elementuinpm i element-ui -S安装所有依赖：npm install安装 SASS 加载器npm install

只是曾路过

1880人浏览 · 2021-01-22 09:15:59

只是曾路过 · 2021-01-22 09:15:59 发布

文章目录

一、创建 Vue 项目
二、安装所需依赖
三、开始写 Demo
四、侧边栏以及嵌套路由

一、创建 Vue 项目

新建一个文件夹，命名为 vue-elementui
然后在地址栏中敲 cmd 进入到命令行，输入如下命令初始化项目：

vue init webpack

可在命令行中看到成功信息：
在这里插入图片描述
创建成功后，进入到项目所在目录，可以看到，前端项目文件自动生成

具体步骤可参考：https://blog.csdn.net/qq_45716120/article/details/112848675

二、安装所需依赖

在项目目录的地址栏中输入 cmd 进入到命令行
在这里插入图片描述
接下来，需安装如下几个包

1、安装 vue-router

输入如下命令安装 vue-router

npm install vue-router --save-dev

安装成功如下所示：
在这里插入图片描述

2、安装 element-ui

输入如下命令安装 elementui

npm i element-ui -S

安装成功如下所示：
在这里插入图片描述

3、安装 npm 的基础依赖

输入如下命令安装 npm 的基础依赖：

npm install

安装成功如下所示：
在这里插入图片描述

4、安装 SASS 加载器

输入如下命令安装 SASS 加载器

npm install sass-loader node-sass --save-dev

安装成功如下所示：
在这里插入图片描述

5、测试环境

在终端窗口中，输入如下命令运行项目：

npm run dev

运行成功如下所示：
在这里插入图片描述
浏览器地址栏中输入：localhost:8080

出现以上界面，说明 Vue 项目搭建完毕并且环境测试通过。

三、开始写 Demo

1、删掉多余文件

环境没问题后，在 VSCode 中打开项目文件
删除掉自带的 logo 以及 HelloWorld.vue，注意需在 App.vue 中将相关的引用等也删掉
得到的基础 Vue 工程如下：
App.vue

<template>
  <div id="app">
    
  </div>
</template>

<script>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2、编写视图文件

src 下新建 views 目录，其中存放各个组件视图
这里创建一个 Main.vue 以及 Login.vue，并在其中引入 Element UI 组件
Main.vue 中引入日历组件， Login.vue 中引入表单组件，其他组件效果可从 Element UI 官网中查找使用
Main.vue

<template>
    <el-calendar v-model="value">
    </el-calendar>
</template>

<script>
export default {
    name: 'Main',
    data() {
      return {
        value: new Date()
      }
    }
}
</script>

<style scoped>

</style>

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
export default {
    name: 'Login',
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  
}
</script>

<style scoped>

</style>

3、配置路由

src下新建 router 目录，其中创建 index.js，用于配置路由
index.js

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/main',
            component: Main
        },
        {
            path: '/login',
            component: Login
        }
    ]
});

4、Main.js 中引入路由、Element-UI 相关依赖

在 Main.js 中引入路由文件 index.js、Element-UI 以及对应的 css 文件
Main.js

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

Vue.use(router);
Vue.use(ElementUI);

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

5、App.vue 中展示路由视图

最后在，App.vue 中展示路由视图
App.vue

<template>
  <div id="app">
    <router-link to="/main">点我进入 Main</router-link>
    <router-link to="/login">点我进入 Login</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

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

6、运行效果

在终端窗口中，输入如下命令运行程序：

npm run dev

运行成功如下所示：
在这里插入图片描述
点击超链接发送 main 请求：

点击超链接发送 login 请求：

可以看到，Element-UI 的界面还是十分好看的。

四、侧边栏以及嵌套路由

侧边栏是经常使用到的一个控件，在 Element-UI 中也有不错的 Demo，同时结合 Vue 的嵌套路由，可以很好地实现内容区域的局部刷新。
在 view 目录下新建 class 目录，用于存放班级视图，其中创建 Class.vue 以及 List.vue
Class.vue

<template>
    <h1>班级信息</h1>
</template>

<script>
export default {
    name: 'ClassInfo'    
}
</script>

<style scoped>

</style>

List.vue

<template>
    <h1>学生列表</h1>
</template>

<script>
export default {
    name: 'StudentList'    
}
</script>

<style scoped>

</style>

在 Index.js 中配置新路由，其中 children 表示嵌套路由，其格式与外层是一致的，都包含 path、name 等属性
index.js

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

import ClassInfo from '../views/classes/Class'
import StudentList from '../views/classes/List'

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/main',
            component: Main,
            children: [
                { path: '/class/info', component: ClassInfo },
                { path: '/class/list', component: StudentList }
            ]
        },
        {
            path: '/login',
            component: Login
        }
    ]
});

修改 Main.vue，其中引入侧边栏，并添加 router-link、router-view
Main.vue

<template>
<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>班级管理</template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
              <router-link to="/class/info">班级信息</router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
              <router-link to="/class/list">学生列表</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>个人中心</template>
        <el-menu-item-group>
          <el-menu-item index="2-1">账号信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
        <el-menu-item-group>
          <el-menu-item index="3-1">系统信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>Settings</span>
    </el-header>
    
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  
</template>

<script>
export default {
    name: 'Main',
    data() {
      const item = {
        date: '2016-05-02',
        name: 'XXX',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
}
</script>

<style scoped>
  .el-header {
    background-color: #67C23A;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #909399;
  }
</style>

关键地方如下：
在这里插入图片描述
浏览器中查看运行效果：

可以看到，我们只要点击左侧的链接，便能完成右边内容区域的内容替换，用起来十分方便
这也是前端模块化与工程化带来的好处，大大提高了前端工程的开发效率

附录：

Element UI 官方文档：https://element.eleme.cn/#/zh-CN/component/installation

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue+element ui实现好看的登录界面

ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...