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)开发环境(在本地运行的环境)
按需引入步骤
- 安装插件:
npm install babel-plugin-component -D - 修改配置(找到 .babelrc 文件,内容修改成:)
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
- main.js 进行按需引入
import { Button, Cell } from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
* Vue.use(Button)
* Vue.use(Cell)
*/
- 备注,如此修改 项目无法正常启动,还需要下载 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
- 修改配置 build ----》 webpack.base.conf.js -----> roules添加入下:
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
- 使用 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
-
如果全局引入, 就会把整个mint-ui打包到项目中。项目很大。
-
按需引入,只会把项目中需要的模块打包到项目中,项目就会减少体积。
按需引入要下载插件。只会在开发环境中生效。
移动端项目。 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';
}