nuxt + vant + rem building project

Original link: https://blog.csdn.net/Young_Gao/article/details/93605428

 

First, create a project

1, using the following command to generate the project

vue init nuxt-community / starter-template testPro --testPro name for the project

2, the root directory to the next item, using the installation-dependent npm install

3, npm run dev run the project in the development environment

 

Second, modify the host and port project

Add the following code in package.json file:

"config": { 
    "nuxt": { 
      "Host": "192.168.124.4", // here can change your ip 
      "Port": "1818" // port free to change 
    } 
  },

　

Third, configure the global css styles

New ~ assets / css / reset.css, and add the nuxt.config.js follows:

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

Fourth, the use of sass in nuxt

   Only you need to install node-sass sass-loader 就可以了

npm i node-sass sass-loader -D

 If you need to introduce .scss file, simply add the following configuration in nuxt.config.js in:

css:[
    '~assets/common.scss'
  ],

If desired function or global variable scss introduced to the group, the steps required

　　1) Install this plugin

　　　　cnpm install --save-dev @nuxtjs/style-resources

　　2) Next we need to modify the nuxt.config.jsconfiguration inside, as follows:

          Source https://blog.csdn.net/WU5229485/article/details/99291603

default {Export 
  modules: [ 
    '@ nuxtjs / style-Resources', 
  ], 
  styleResources: { 
    SCSS: './assets/variables.scss', 
    less: './assets/**/*.less', 
    // Sass : ... what needs to configure, here are global configuration needed, no not configure 
  } 
}

　　

Fifth, the use of functions implemented sass px2rem 

. 1, a method (dynamic widget set different from the font size of the screen) the current position ~ assets / sass / resources.scss

$ baseFontSize: 10; // with the development of fonts in device 
@function px2rem ($ PX) { 
  @return PX $ / $ 1 rem * baseFontSize; 
}

　　Adding modified with js font (current location ~ plugins / custom / rootFontSize.js)　

= 750 UI var; 
// own font set value 
var font = 100; 
// get the scale value 
var ratio = UI / font; 
var = oHtml document.documentElement; 
var = screenWidth oHtml.offsetWidth; 
// call to the initial time a 
getSize (); 
window.addEventListener ( 'resize', getSize); 
// set dynamically resize fontsize value when the 
function getSize () { 
  screenWidth = oHtml.offsetWidth; 
  // limit interval 
  // if (screenWidth <= 320) { 
  // = 320. screenWidth; 
  //} the else IF (screenWidth> = UI) { 
  // screenWidth = UI; 
  //} 
  oHtml.style.fontSize = screenWidth / + ratio 'PX'; 
}

　　Use rootFontSize.js (current position nuxt.config.js)

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

　　

 2, Method 2 (using postcss plug)  This method pro-test No

　　postcss-pxtorem (px will automatically be converted into REM)

　　autoprefixer (prefix is ​​automatically added css selector)

cnpm install postcss-pxtorem autoprefixer --save-dev

　　nuxt.config.js following configuration

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: {
plugins: {
　　'postcss-pxtorem':{
　　   rootValue: 40,
　　   propList: ['*']
　　 }
　　},
　　preset: {
　　   autoprefixer: true
　　}
 }

}

　　

　

Sixth, the agency implements the interface

　　Use @ nuxtjs / axios

@ nuxtjs altitude install / Axios

　　nuxt.config.js configured as follows:

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

　　

Seven, the use of third-party plug-in libraries vant

      In the plugins folder new file vant.js, reads as follows

Import View from 'view'; 
Vant import from 'efore'; 
import 'efore / lib / index.css'; 

Vue.use (Vant);

　　nuxt.config.js configured as follows

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

// if the existing content object plugins then simply be appended to the object can be 
e.g. 
plugins: [ 
    { 
      the src:' ~ plugins / rootFontSize.js', SSR: to false 
    }, 
    { 
      the src: '~ plugins / vant.js', SSR: to true 
    } 
  ],