https://github.com/tylerrrkd/responsive-element

开箱即用的element-ui响应式模板，基于vue-cli 3搭建，使用webpack 4。欢迎pr。
https://github.com/tylerrrkd/responsive-element

Last synced: about 1 month ago
JSON representation

开箱即用的element-ui响应式模板，基于vue-cli 3搭建，使用webpack 4。欢迎pr。

• Host: GitHub
• URL: https://github.com/tylerrrkd/responsive-element
• Owner: tylerrrkd
• License: mit
• Created: 2019-02-21T04:50:20.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-09T06:49:49.000Z (over 5 years ago)
• Last Synced: 2024-01-13T09:50:21.723Z (12 months ago)
• Language: JavaScript
• Homepage:
• Size: 78.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# responsive-element

开箱即用的`element-ui`响应式模板，基于`vue-cli 3`搭建，使用`webpack 4`，更多配置见[配置参考](https://cli.vuejs.org/zh/config/)。

### 响应式思路

通过`pxtorem`将`element-ui`中的单位转为`rem`以配合响应式。

### 项目配置

- 安装依赖

```

npm install

```

#### 配置响应式

- 文件目录 `public/index.html`

```

  const designWidth = 1920 // 设计稿宽度 1920px

  const rem2px = 100 // rem基数 1rem = 100px 基数请与wepack中pxtorem的rootValue保持一致

```

#### 配置`pxtorem`

- 文件目录: `./vue.config.js`

```

  // 将element px转换为rem

  css: {

    loaderOptions: {

      postcss: {

        plugins: [

          autoprefixer(),

          pxtorem({

            rootValue: 100, // 基数请与 public/index.html 中的rem2px保持一致

            propList: ['*']

          })

        ]

      }

    }

  },

```

### :rocket:启动项目(开发环境)

```

npm run dev

```

### 编译项目（生成环境）

```

npm run build

```