nuxt+vant+rem项目构建

Posted 2022-12-02 cscredis

原文链接：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
    
  ],