移动端项目vue+vant3（一）

王同学学出来

已于 2024-04-22 10:16:49 修改

阅读量625

点赞数 8

文章标签：前端框架 vue.js

于 2024-04-21 23:58:25 首次发布

本文链接：https://blog.csdn.net/Wang3317866410/article/details/138050298

版权

了解rem适配安装插件

这是只做移动端的

确定一个最好使用的环境

nodejs：16.18.0

vuecli：4.5.15

1.新建项目

1.1项目初始化

1.2通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作

安装

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save
npm i autoprefixer

在mian.js中导入


import { createApp } from 'vue'
import { createPinia } from 'pinia'

import { px2rem } from "@/utils/index";
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.provide("px2rem", px2rem);
app.use(createPinia())
app.use(router)

app.mount('#app')

使用则需要引入

<script setup>
import { inject } from "vue";
const px2rem = inject("px2rem");
</script>

App.vue

<script setup>
import { inject } from "vue";
const px2rem = inject("px2rem");
</script>

<template>
<nav class="m-nav" :style="{ top: px2rem(top) }">
  <h2>移动端-适配</h2>
</nav>

</template>

<style scoped>
</style>

手机端

但是这个不会补全所以很奇怪

解决半天没办法了，

换下一个创建命令试试

并且报错最后发现是没有安装淘宝镜像的问题

npm config set registry https://registry.npmmirror.com/

使用rem适配

项目起步

启动项目

（1）更新脚手架

npm install -g @vue/cli

（2）使用简易命令创建vue项目

npm config set registry https://registry.npmmirror.com/

npm --registry https://registry.npm.taobao.org install -g @vue/cli@4.5.15

如果返回https://registry.npmmirror.com/，说明配置的是淘宝镜像,

vue create 文件名

（3）选择d开头的vue3

code终端使用

（4）启动vue3

更改配置文件

App.vue

<template>
<div>这是app组件</div>
</template>

<script>


export default {
  name: 'App',
}
</script>

<style>

</style>

安装

yarn add postcss-pxtorem@5.1.1 amfe-flexible -S

我报了处错误，是配置文件的问题

vue.consig.js

网上给的是

// vue.config.js

module.exports = {

  css: {
 
    loaderOptions: {
 
      postcss: {
 
        plugins: [
 
          require('postcss-pxtorem')({ rootValue: 16 , propList: ['*']}),

        ],

      },
 
    },

  },

};

// vue.config.js
const pxToRem = require('postcss-pxtorem')

const postcss = pxToRem({
  rootValue: 16,
  propList: ['*']
})

module.exports = {

  css: {
 
    loaderOptions: {
 
      postcss: {
        postcssOptions: {
          plugins: [
            postcss
          ],
        }

      },
 
    },

  },

};

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'
import 'amfe-flexible';
createApp(App).mount('#app')

rem适配完成

以推送到git上

下载命令

git clone https://gitee.com/wangyan3317/yys.git