移動端項目使用vue-cli項目的兩種適配方案

 1、flexsible：轉載 http://www.javashuo.com/article/p-ydcqsuvo-hu.html

1.下載lib-flexible

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安裝px2rem-loader

1	npm install px2rem-loader

4.配置px2rem-loader

在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如：

  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

    const postcssLoader = {
        loader: 'postcss-loader',
        options: {
           sourceMap: options.sourceMap
        }
    }

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

同時，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      　　loaders.push({
        　　loader: loader + '-loader',
        　　options: Object.assign({}, loaderOptions, {
          　　sourceMap: options.sourceMap
        　　})
      　　})
    　　}

    if (options.extract) {
      　　return ExtractTextPlugin.extract({
        　　use: loaders,
        　　fallback: 'vue-style-loader'
      　　})
    　　} else {
      　　return ['vue-style-loader'].concat(loaders)
    　　}
  }

6.重啓

當配置完以後，必定要重啓下服務，這樣去調試臺看的時候就會發現px自動轉化爲rem了

1	npm run dev

7.px2rem 用法

安裝px2rem後，再使用px上有些不一樣，你們能夠參考px2rem官方介紹，下面簡單介紹一下。

直接寫px，編譯後會直接轉化成rem ---- 除開下面兩種狀況，其餘長度用這個
在px後面添加/*no*/，不會轉化px，會原樣輸出。 --- 通常border需用這個
在px後面添加/*px*/,會根據dpr的不一樣，生成三套代碼。---- 通常字體需用這個

示例代碼
編譯前（本身寫的代碼）

.selector { width: 150px; height: 64px; /*px*/ font-size: 28px; /*px*/ border: 1px solid #ddd; /*no*/ }

編譯後（打包後的代碼）

.selector { width: 2rem; border: 1px solid #ddd; } [data-dpr="1"] .selector { height: 32px; font-size: 14px; } [data-dpr="2"] .selector { height: 64px; font-size: 28px; } [data-dpr="3"] .selector { height: 96px; font-size: 42px; }

 

二  使用vw佈局   

1：npm install postcss-px-to-viewport --save-dev

二、在.postcssrc.js中增長

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // (Number) The width of the viewport.
      // viewportHeight: 1334, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines','.mobileSelect'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    }
  }
}

 

 

vue項目上安裝SCSS和開發入門

① 使用vue-cli模板建立新項目：vue init webpack myvue

② 安裝sass 依賴包 ，在cmd界面輸入：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

③ 在build文件夾下的webpack.base.conf.js的rules裏面添加配置

{test: /\.scss$/,loaders: ['style', 'css', 'sass']}④ 使用scss時候在所在的style樣式標籤上添加lang=」scss」便可應用對應的語法，不然報錯原文：https://blog.csdn.net/zhouzuoluo/article/details/81010331