在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>：底栏容器。

在vue脚手架项目里面使用elementui相关推荐

vue脚手架项目使用element-ui
1.通过脚手架创建一个项目 2.在vue脚手架项目中安装elementui npm i element-ui -S 使用elementui,在mian.js中全局引入element-ui 2.配置路由 ...
Vue脚手架项目流程
Vue脚手架项目流程一.Vue脚手架的安装 1.node.js安装 2.npm 3.vue-cli安装二.初始化一个vue项目三.项目目录结构 1.主要目录 2.核心文件 3.关系图四.vue ...
vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
使用mac搭建vue脚手架项目
1. 需要安装Node.js C:\Users\wheat> node -v v8.9.3 C:\users\wheat> npm -v 2. 安装vue 脚手架用cnpm(使用国内镜 ...
vue脚手架项目如何加入html文件,使用vue脚手架怎么搭建项目
使用vue脚手架搭建项目的方法:1.全局安装vue-cli脚手架:2.打开命令提示符,通过cd命令进入项目所在文件夹:3.创建vue-cli工程项目:4.安装依赖:5.启动项目. 本教程操作环境:wi ...
Vue脚手架项目结构分析
一.脚手架项目目录结构 ① build 目录内文件介绍文件名描述 build.js 构建生产环境的代码 check-versions.js 检查 Node.js 环境和 NPM 的版本 util ...
vue脚手架项目搭建以及常见命令
1.安装vue2脚手架: (1)在cmd命令行中输入脚手架安装命令: (2)全局安装vue脚手架:npm install -g vue-cli 或者指定版本:npm i vue-cli@5.0.4 - ...
vue脚手架项目技术集合
1. vue项目中都用到了哪些技术? vue2.0: 渐进式的js框架,特点是双向数据绑定和组件系统 vue-router:vue官方的路由管理器模块化的基于组件的路由配置 axios: 用于发起g ...
创建一个vue脚手架项目
首先 ,创建脚手架需要安装vue-cli 安装vue-cli就需要npm 所以第一步需要安装Node.js 安装好后,查看版本之后在想要放项目的地方cmd ,安装脚手架 npm install -g ...

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

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

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

2.使用路由router

3.Loyout组件

3.1使用Layout组件

3.2属性的使用

4.Container布局容器

4.1创建布局容器

4.2容器中包含的子元素

在vue脚手架项目里面使用elementui相关推荐

最新文章

热门文章