element五 项目搭建和技术选型

一、使用scss

image.png
1. 安装sass依赖包
cnpm install sass-loader --save
cnpm install node-sass --save
cnpm install style-loader --save
2. 配置全局变量
修改build下的utils文件
_variable.scss下定义的变量就可以在任意地方使用了

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          //你自己的scss全局文件的路径
          resources: path.resolve(__dirname, '../src/assets/scss/_variable.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

3. 设置默认scss
在main.js中加入import './assets/scss/reset.scs

二、页面布局

image.png

二、使用element

1.安装：
npm i element-ui -S
2.main.js中引入

image.png
3.布局

3.1 在app.vue中填充高度

image.png

3.2 在view下创建Main.vue，用于整体布局

• 从外部引入头部和侧栏

  
  image.png

3.3 侧栏

image.png

• 优化：接收一个数组，后期与权限有关

  
  image.png

• 数据定义

  
  image.png

• 渲染数组

  
  image.png