elementUi 的踩坑

记录一下个人练习遇到的问题~ 不是完整的学习笔记

基本的使用

安装并使用Element UI

npm i element-ui -S

修改 /src/main.js 为：

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

import App from './App'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Element for Vue 安装文档

基于 Vue.js

步骤: 先布局 -> 然后插入模板 -> 注意下面的值

基础教程

关于组件之间的布局

要注意利用本身的el-col 以及el-row 还有span来控制组合宽度(这里默认是24)

整体布局

善于利用布局容器进行快速布局

关于elementUI Vue scss的全局引入方法

1. styles文件夹内声明一个your.scss文件

2. 添加依赖

   npm install sass-resources-loader --save-dev

3. 修改build/utils.js

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/styles/your.scss')
        }
      }
    )

4. 记得一定要重新运行文件~~

element UI icon

手册
官方

推荐练习

https://github.com/PanJiaChen/vue-admin-template

Reference

vue中引入scss样式变量，并在全局使用