前提
安装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-flexiblepostcss 配置：创建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, // 是否启用websocketschangeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite: {"^/api": "/"} }}},lintOnSave: true,css: {//用于将单位转化为 remloaderOptions: {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下载