vue3.0 项目搭建过程

1. 搭建项目

 vue create project name

2. 运行项目

cd project name

 npm run serve

3. 按需加载ant-design-vue

引用地址：https://www.cnblogs.com/IwishIcould/p/15070795.html

 npm install ant-design-vue@next --save

 cnpm install babel-plugin-import --save-dev 下载在开发环境中

在项目的根目录下创建 babel.config.js

 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ["import", 
      { 
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: true,   // `style: true` 会加载 less 文件
      }
    ]
  ]
}

4. 安装less,less-loader

 cnpm install less@3.13.1 less-loader@7.1.0 --save-dev

注意：只需从 ant-design-vue 引入模块即可，无需单独引入样式.
babel-plugin-import 会帮助你加载 JS 和 CSS

5. PC 页面自适应

引用地址：https://blog.csdn.net/weixin_49587122/article/details/123582766

• 引入插件

 npm install px2rem-loader -S
 npm install postcss-px2rem -S

• 在根目录新建文件vue.config.js

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 100
})

module.exports = {
	publicPath: "./",
	lintOnSave: true,
	css: {
		loaderOptions: {
			postcss: {
				plugins: [postcss]
			}
		}
	}
};

• 在utils中创建rem.js

 / /设置 rem 函数
function setRem() {
  //  PC端
  console.log('非移动设备')
  // 基准大小
  let baseSize = 100;
  let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
  let vW = window.innerWidth; // 当前窗口的宽度
  let vH = window.innerHeight; // 当前窗口的高度
  // 非正常屏幕下的尺寸换算
  let dueH = vW * 1080 / 1920
  if (vH < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
    vW = vH * 1920 / 1080
  }
  let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
  document.documentElement.style.fontSize = rem + "px";
  console.log(rem)
  // //得到html的Dom元素
  // let htmlDom = document.getElementsByTagName('html')[0];
  // //设置根元素字体大小
  // htmlDom.style.fontSize = rem + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
};

• main.js引入rem.js

import './utils/rem'

• 安装lib-flexible依赖

npm install lib-flexible -S

• 找到目录 ：node_modules/lib-flexible/flexible.js ，修改flexible.js； （不要直接搜索，搜不到的）

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
        	// width = 540 * dpr;
            width = width * dpr; // 这行代码 pc适配的话 540改为width
        }
        var rem = width * dpr;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

6.添加路由

npm install --save vue-router

• 创建router.js文件

import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";

const Home=()=>import ('../pages/home/Home.vue')

export default createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        }
    ]
})

• 如何使用

	<router-link to="/home">hengju</router-link>

	<router-view></router-view>