vue中mint-ui使用

骑猪看日落 2022-11-27 03:17 150阅读 0赞

### mint-ui 如何按需引入 ###

cnpm i mint-ui -S

注意：npm下载出现问题（终端中出现Error红色提示，就得重新下载），用cnpm替换npm

### npm install mint-ui -S -S ==== --save 表示把依赖安装到 （dependencies）生产环境（项目上线的环境） ###

### npm install sass -D -D=== --save-dev 表示把依赖安装到 （devDependencies）开发环境（在本地运行的环境） ###

### 按需引入步骤 ###

1.  安装插件：  
    npm install babel-plugin-component -D
2.  修改配置(找到 .babelrc 文件，内容修改成：)

{
      "presets": [
        ["es2015", { "modules": false }]
      ],
      "plugins": [["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]]
    }

1.  main.js 进行按需引入

import { Button, Cell } from 'mint-ui'
    
    Vue.component(Button.name, Button)
    Vue.component(Cell.name, Cell)
    /* 或写为
     * Vue.use(Button)
     * Vue.use(Cell)
     */

1.  备注，如此修改 项目无法正常启动，还需要下载 es2015

cnpm install babel-preset-es2015 --save-dev

### vue-cli中如何使用sass ###

首先安装两个插件: node-sass sass-loader

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

1.  修改配置 build ----》 webpack.base.conf.js -----> roules添加入下：

{
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    }

1.  使用 vue组件的 style lang=‘scss’

### \-S -D 区别 ###

是什么？ 都是npm下载包是，携带的参数？

npm install mint-ui ?

我们要把下载的mint-ui用在哪个环境下？

\-S 指得是 --save 表示把依赖配置在生产环境。

\-D 指的是 --save-dev 表示把依赖配置到开发环境。

什么样的插件 应该用-S 什么插件用-D参数？

判断该插件是用在生产环境，还是开发环境。改插件用在哪个环境。sass为例。

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

**scss语法—>css**

线上 ： 需要在线下把scss编译成css, 不需要scss.

线下： scss 。node-sass sass-loader

mint-ui 生产环境也需要

npm install mint-ui --save

vue-cli 有两个环境：

开发环境：当前编辑的环境就是开发环境。 npm run dev 启动的就是开发环境

生产环境：项目开发完了，我们打包完成后，放到服务器上。服务器这个环境就是生产环境。npm run bulid

1.  如果全局引入， 就会把整个mint-ui打包到项目中。项目很大。
2.  按需引入，只会把项目中需要的模块打包到项目中，项目就会减少体积。

按需引入要下载插件。只会在开发环境中生效。

### 移动端项目。 rem布局。 手机端。屏幕大小各有不同。 ###

**rem.js**

html元素的font-size==就是1rem

根据屏幕尺寸的不同，动态的修改html的font-size.

function setRemUnit(){ 
    
            //获取屏幕宽度
            var deviceWidth = document.documentElement.clientWidth;
            // 屏幕宽度 / 7.5 ? 方便计算。 
            // 1. ui给的设计图宽度一般：750px
            // 2. 把屏幕宽度进行切割750份，每一份可以容纳设计稿1px的宽度。
            //3. 浏览器最小能识别的font-size为12px, 所以*100
            //4.html font-size ===100px 1rem==100px;
            // 5.在计算的时候， 200px 就用2rem表示。
            document.documentElement.style.fontSize = deviceWidth / 7.5+ 'px';
        
        }