nuxt + vant + postcss-px2rem rem適配

原文鏈接：https://www.cnblogs.com/chunshan-blog/p/9950474.html

 

一、創建項目

1、使用如下命令生成項目

vue init nuxt-community/starter-template testPro  --testPro爲項目名稱

2、進入到項目根目錄下，使用npm install 安裝依賴

3、npm run dev 在開發環境下運行項目

二、修改項目的host 和 port

在package.json文件中新增如下代碼：

 View Code

三、配置全局css樣式

新建~assets/css/reset.css，並在nuxt.config.js中添加如下配置：

css: ['~assets/css/reset.css']

四、在nuxt中使用sass

使用nuxt-sass-resources-loader全局引入sass

cnpm install nuxt-sass-resources-loader --save-dev

 

modules: [
  'nuxt-sass-resources-loader'
],
sassResources: ['~assets/sass/resources.scss'],

五、使用sass的mixin實現動態樣式

當前位置 ~assets/sass/resources.scss

按 Ctrl+C 複製代碼

 

按 Ctrl+C 複製代碼

六、使用sass函數實現px2rem

1、方法一（通過插件動態的設置不同尺寸屏幕下的跟字體）當前位置 ~assets/sass/resources.scss

$baseFontSize: 10;//開發設備下的跟字體
@function px2rem($px){
  @return $px/$baseFontSize * 1rem;
}

 添加js修改跟字體 （當前位置 ~plugins/custom/rootFontSize.js）

按 Ctrl+C 複製代碼

 

按 Ctrl+C 複製代碼

 

使用rootFontSize.js (當前位置nuxt.config.js )

plugins: [
   {
     src: '~plugins/custom/rootFontSize.js', ssr: false
   }
]

 2、方法二（使用postcss插件）

postcss-pxtorem（將px自動轉換成rem）

autoprefixer（自動爲css選擇器添加前綴）

cnpm install postcss-pxtorem autoprefixer --save-dev

nuxt.config.js中的配置如下

build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    postcss: [
      require('postcss-pxtorem')({
        rootValue: 10,
        propList: ['*']
      }),
      require('autoprefixer')({
        browsers: ['Android >= 4.0', 'iOS >= 7']
      })
    ]
  }

七、實現接口代理

使用@nuxtjs/axios

npm install @nuxtjs/axios

nuxt.config.js中配置如下：

modules: ['@nuxtjs/axios'],
axios: {
    proxy: true
},
proxy: {
    '/api/': {
      target: 'http://lichunshan.top:3000',
      pathRewrite: {'^/api': '/api'}}
}

八、使用第三方插件庫（vant爲例）

cnpm install vant --save

新建文件~plugins/three_sides/vant.js

vant.js文件如下：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

nuxt.config.js中配置如下：

plugins: [
    {
      src: '~plugins/three_sides/vant.js', ssr: true
    }
  ]

九、開發環境下運行

npm run build

npm run start/pm2 start npm --name "nuxt-demo" -- run start