Vue 3.x + Vant 3.x + Vue-Router 4.x 快速上手

前提

安装node.js。                                                                                                                           

Node 版本要求：
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

创建项目

创建项目有三种形式

• Vue-Cli
• Vite
• Webpack

虽然Vite很好用，快速的创建项目。但是我选择了Vue-Cli，因为本人比较懒，Vue-Cli基本的配置都弄好，不用自己在动手配置。

已经安装vue-cli的老板们执行命令

npm update -g @vue/cli

未安装vue-cli 执行命令：

npm install -g @vue/cli

安装完最新版vuecli后，执行命令

vue create (项目名称)

接下来选项

Defdult （Vue 3 Preview）

后面选项看你个人喜好，以下是我的选项，开发用到的基本配置

安装vant3

npm i vant@next -S

引入组件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。

npm i babel-plugin-import -D

在.babelrc 或 babel.config.js 中添加配置,没有文件的可自己创建一个。配置如下：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式

import { Button } from 'vant';

也可以导入所有组件，Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);

路由配置

没有安装的自行安装，安装好后在src文件夹下创建router文件夹，然后创建index.js

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/index.vue'

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path:'/Product',
        component: () => import('../views/product/product.vue')
    }
]
// createRouter 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 抛出路由实例, 在 main.js 中引用
export default router

在main.js引入

import router from './router'

在 App.vue 文件下添加 router-view 组件，渲染路由匹配到的页面组件：

<template>
<!-- 和 vue-router3 一样，展示路由的组件的地方 -->
  <router-view />
</template>

<script>

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

怎么使用呢，首先我创建了两个组件

在index.vue添加个点击事件跳转到其他页面，如下：

<template>
  <div>
    <div @click="product()" class="title">首页</div>
    <list></list>
  </div>
</template>
<script>
import list from "../components/list.vue";
import { useRouter } from "vue-router";
export default {
  name: "index",
  components: { list },
  setup() {
      const router = useRouter();
      function product(){
          router.push({
         path:"/Product",
         params: { userId: '123' }
       })
      }
   return { product }
  },
  methods: {
    
  },
};
</script>
<style>
.title{
    font-size: 18px;
}
</style>

 setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。创建组件实例，然后初始化props，紧接着就调用setup函数，从生命周期钩子的视角来看，它会在beforeCreate钩子之前被调用

移动端 rem 适配

如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的，Vant 官方也为我们提供了方案，如下图所示：

 Vant 中的样式默认使用px作为单位，如果需要使用rem单位，需要安装postcss-pxtorem、lib-flexible两个插件，postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

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

postcss 配置：创建vue.config.js配置：

const AutoPrefixer = require('autoprefixer')
const pxtorem = require('postcss-plugin-px2rem')
module.exports = {
    devServer: {
        disableHostCheck: true,
        // 设置代理
        proxy: {
            "/api": {
                target: "http://192.168.xxx.xxx", // 域名
                ws: true, // 是否启用websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    "^/api": "/"
                }   
            }
        }
    },
    lintOnSave: true,
    css: {//用于将单位转化为 rem
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
                AutoPrefixer({
                    browsers: ['last 20 versions', 'android >= 4.0']
                }),
                pxtorem({
                    rootValue: 37.5,
                    propList: ['*'],
                    selectorBlackList: ['.norem']
                })
            ]
          }
        }
    }
}

这段配置就算是css的预加载配置。rootValue 中设置37.5的值结合UI设计稿2x的设计图开发，引用的时候css直接写宽375px就相当于100％，它会自动根据屏幕进行计算成rem。如果rootValue 设置为75，则引用时写宽750px就相当于100％（这是因为Vant组件默认10rem为100%）。selectorBlackList中写不想被转成rem的类名。

在main.js中引入lib-flexible/flexible.js

import 'lib-flexible/flexible.js'

这样整个rem适配就完成了。

以上是搭建 Vue3.0 + Vant3.0 + Vue-Router4.0 移动端项目的内容

最近项目 微信小程序实现水果转盘游戏-小程序文档类资源-CSDN下载