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>