nuxt+vant+rem项目构建

原文链接：https://blog.csdn.net/Young_Gao/article/details/93605428

一、创建项目

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

vue init nuxt-community/starter-template testPro  --testPro为项目名称

2、进入到项目根目录下，使用npm install 安装依赖

3、npm run dev 在开发环境下运行项目

二、修改项目的host 和 port

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

"config": {

    "nuxt": {

      "host": "192.168.124.4",    // 此处可以改成自己的ip

      "port": "1818"              //  端口可以随意更改

    }

  },

三、配置全局css样式

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

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

四、在nuxt中使用sass

只需要安装 node-sass sass-loader 就可以了

npm i node-sass sass-loader -D

如果需要引入.scss文件，只需在nuxt.config.js中添加如下配置：

css:[

    '~assets/common.scss'

  ],

如果需要引入scss全局变量或函数之类的话，需要如下步骤

　　1）安装此插件

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

　　2）接下来我们需要修改nuxt.config.js里面的配置，如下：

来源https://blog.csdn.net/WU5229485/article/details/99291603

export default {

  modules: [

    '@nuxtjs/style-resources',

  ],

  styleResources: {

    scss: './assets/variables.scss',

    less: './assets/**/*.less',

    // sass: ... 需要什么配置什么，这里是全局的   根据需要配置，没有可以不配置

  }

}

五、使用sass函数实现px2rem

1、方法一（通过插件动态的设置不同尺寸屏幕下的跟字体）当前位置 ~assets/sass/resources.scss

$baseFontSize: 10;//开发设备下的跟字体

@function px2rem($px){

  @return $px/$baseFontSize * 1rem;

}

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

var ui = 750;

// 自己设定的font值

var font = 100;

// 得到比例值

var ratio = ui/font;

var oHtml = document.documentElement;

var screenWidth = oHtml.offsetWidth;

// 初始的时候调用一次

getSize();

window.addEventListener('resize', getSize);

// 在resize的时候动态设置fontsize值

function getSize(){

  screenWidth = oHtml.offsetWidth;

  // 限制区间

  // if(screenWidth <= 320){

  //   screenWidth = 320;

  // }else if(screenWidth >= ui){

  //   screenWidth = ui;

  // }

  oHtml.style.fontSize = screenWidth/ratio + 'px';

}

　　使用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: {

plugins: {

　　'postcss-pxtorem':{

　　   rootValue: 40,

　　   propList: ['*']

　　 }

　　},

　　preset: {

　　   autoprefixer: true

　　}

 }

}

六、实现接口代理

　　使用@nuxtjs/axios

npm install @nuxtjs/axios

　　nuxt.config.js中配置如下：

modules: ['@nuxtjs/axios'],

axios: {

    proxy: true

},

proxy: {

    '/api/': {

      target: 'http://lichunshan.top:3000',

      pathRewrite: {'^/api': ''}}

}

七、使用第三方插件库vant

在plugins文件夹中新建文件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

    }

  ]

//  如果plugins对象中已有内容的话只需将对象追加在后面即可

例如

plugins: [

    {

      src: '~plugins/rootFontSize.js', ssr: false

    },

    {

      src: '~plugins/vant.js', ssr: true

    }

  ],

巴特西

nuxt+vant+rem项目构建

最新文章

热门文章