Fade away

Appearance

自适应解决方案 ​

1.自适应解决方案 ​

1.传统布局rem ​

js
function rem() {// 监控页面尺寸变化重新计算REM
	document.documentElement.style.fontSize = 
	document.documentElement.clientWidth / 7.5 + 'px'
  // 750  7.5
  // 640  6.4
  // ...
}
rem()
window.onresize = rem

src\main.js

js
// 配置全局文件
import '@/utils/rem.js'

2.手淘布局 => flexible.js、px2rem ​

1 下载模块

js
cnpm install amfe-flexible -S
cnpm install postcss-pxtorem -D

2 在main.js中引入flexible

js
import 'amfe-flexible'

3.配置postcss-pxtorem

cli2配置方式：在.postcss.js文件中的plugins下新增postcss-pxtorem的配置

js
module.exports = {
"plugins": {
"postcss-pxtorem": {
  rootValue: 192, // 根据设计图尺寸写，设计图是1920，就写192
  propList: ['*'], // 需要被转换的属性
  selectorBlackList: [] // 不进行px转换的选择器
}
}
}
复制代码

cli3+配置方式：在根路径下新增postcss.config.js文件

js
module.exports = {
"plugins": {
"postcss-pxtorem": {
  rootValue: 75, 		    // 根据设计图尺寸写，设计图是750，就写75
  propList: ['*'], 		  // 需要被转换的属性
  selectorBlackList: [] // 不进行px转换的选择器
}
}
}

3.流行布局 => postcss-px-to-viewport ​

1 下载模块

js
cnpm i postcss-px-to-viewport -D

2 根目录新建postcss.config.js文件

module.exports = {
plugins: {
"postcss-px-to-viewport": {
// options
unitToConvert: "px", // 需要转换的单位
viewportWidth: 750, // 设计稿的视口宽度
unitPrecision: 5, // 单位转换后保留的精度
propList: ["*"], // 能转换的vw属性列表
viewportUnit: "vw", // 希望使用的视口单位
fontViewportUnit: "vw", // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的css选择器
minPixelValue: 1, // 设置最小的转换数值，如果为1，只有大于1的值才会被转换
mediaQuery: false, // 媒体查询中是否需要转换单位
replace: true, // 是否直接更换属性值
exclude: [],
landscape: false,
landscapeUnit: "vw", // 横屏时使用的单位
landscapeWidth: 568, // 横屏时使用的视口宽度
},
},
};

2、项目初始化 ​

创建项目 ​

vue create qfsxcs

UI框架 ​

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

1 安装：cnpm i vant@latest-v2 -S

2 注册：src/main.js

// 配置UI组件库
import Vant from "vant";
import "vant/lib/index.css";
Vue.use(Vant);

编辑器配置 ​

步骤1：安装eslint、prettier插件（注：开发框架中选择了eslint、prettier

步骤2：打开setting.json

{
  /* 编辑器配置 */
  "window.zoomLevel": 2, // 窗口缩放级别
  "editor.mouseWheelZoom": true, // 是否开启编辑器字体缩放：按Ctrl键并滚动鼠标滚轮
  "workbench.iconTheme": "simple-icons", // 个人主题配置（可忽略）
  "workbench.colorTheme": "Dracula Soft", // 个人主题配置（可忽略）
  "terminal.integrated.fontFamily": "Hack Nerd Font", // 个人主题配置（可忽略）

  /* eslint配置 */
  "eslint.validate": [ "vue", "javascript" ], // 声明eslint检查的文件
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 是否开启eslint自动修正 

  /* prettier配置 */
  "editor.formatOnSave": true, // 是否开启保存自动代码格式化
  "[vue]": { 
    // 声明.vue文件采用prettier-vscode插件进行代码格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": { 
    // 声明.js文件采用prettier-vscode插件进行代码格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }, 
  "prettier.tabWidth": 2,    // 缩进字节数
  "prettier.useTabs": false, // 缩进不使用tab，使用空格
  "prettier.semi": true,     // 句尾添加分号
  "prettier.singleQuote": false,    // 使用单引号
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "always", //  (x) => {} 箭头函数参数只有一个时是否要有小括号：avoid-省略括号、always-总是有括号
  "prettier.bracketSpacing": true,  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.endOfLine": "auto",     // 结尾是 \n \r \n\r auto
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
}

移动端适配 ​

1 下载模块

js
cnpm i postcss-px-to-viewport -D

2 根目录新建postcss.config.js文件

module.exports = {
plugins: {
"postcss-px-to-viewport": {
  // options
  unitToConvert: "px", // 需要转换的单位
  viewportWidth: 750, // 设计稿的视口宽度
  unitPrecision: 5, // 单位转换后保留的精度
  propList: ["*"], // 能转换的vw属性列表
  viewportUnit: "vw", // 希望使用的视口单位
  fontViewportUnit: "vw", // 字体使用的视口单位
  selectorBlackList: [], // 需要忽略的css选择器
  minPixelValue: 1, // 设置最小的转换数值，如果为1，只有大于1的值才会被转换
  mediaQuery: false, // 媒体查询中是否需要转换单位
  replace: true, // 是否直接更换属性值
  exclude: [],
  landscape: false,
  landscapeUnit: "vw", // 横屏时使用的单位
  landscapeWidth: 568, // 横屏时使用的视口宽度
},
},
};

移动端适配：解决冲突 ​

selectorBlackList: ["van"], // 需要忽略的css选择器

重启

删除无效代码 ​

步骤1：创建全局的初始化重置样式

src/assets/css/reset.scss

* {padding:0px;margin:0px;}
html,body,#app { width:100%;height:100%; }
#app {font-size: 14px;}

步骤2：删除默认样式和内容

App.vue

<template>
<div id="app">
<router-view />
</div>
</template>

<style lang="scss">
// 配置 全局初始化样式
@import "assets/css/reset.scss";
</style>

步骤3：src/utils/filters.js

// import Vue from 'vue'

// 使用
// {{变量}}
// {{变量 | 过滤器名称}}
// 管道前面的数据 默认是第一个形参

步骤4：src/main.js

// 配置全局文件
import '@/utils/filters.js'

步骤5：src/utils/request.js

步骤5.1：cnpm i axios -S

步骤5.2：

// 一、导入模块
import axios from 'axios'


// 二、创建axios实例
const request = axios.create({
// baseURL: "/api",
// .env 全局默认配置文件，不论什么环境都会加载合并
// .env.development 开发环境下的配置文件
// .env.production 生产环境下的配置文件
baseURL: process.env.VUE_APP_URL,
headers: {
"content-type": "application/x-www-form-urlencoded",
},
timeout: 8000,
});


// 三、请求拦截器、响应拦截器
request.interceptors.request.use(
	(config) => {
	 		return config
	}, 
	(error) => {
			return Promise.reject(error)
	}
)

request.interceptors.response.use(
(response) => {
		return response
}, 
(error) => {
	return Promise.reject(error)
}
)

// 三、导出模块
export default request

步骤6：在项目根目录下创建.env、.env.development、.env.production文件

VUE_APP_URL='/api'

属性名必须以VUE_APP_开头，比如VUE_APP_XXX

3.布局-骨架屏 ​

简介 ​

https://github.com/ElemeFE/page-skeleton-webpack-plugin

page-skeleton-webpack-plugin

Page Skeleton 是一款 webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。

  • 支持多种加载动画
  • 针对移动端 web 页面
  • 支持多路由
  • 可定制化，可以通过配置项对骨架块形状颜色进行配置，同时也可以在预览页面直接修改骨架页面源码
  • 几乎可以零配置使用

使用 ​

1. 安装模块 ​

cnpm install --save-dev page-skeleton-webpack-plugin

2. 修改vue.config.js文件 ​

const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");
const path = require("path");

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, "./shell"), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, "./dist"), // 最好和 `output.path` 相同
        routes: ["/", "/about"], // 将需要生成骨架屏的路由添加到数组中
      }),
    ],
  },
  chainWebpack: (config) => {
    // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
    if (process.env.NODE_ENV !== "development") {
      config.plugin("html").tap((opts) => {
        opts[0].minify.removeComments = false;
        return opts;
      });
    }
  },
};

步骤3：修改public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3220276_3nhh843cj5l.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <!-- shell -->
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. 运行骨架屏项目 ​

cnpm run serve 运行项目

不报错不管，如果报错 EADDRINUSE: address already in use :::8989 则走下述步骤

// node_modules/page-skeleton-webpack-plugin/src/skeletonPlugin.js
if (!this.server) {
const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
server.listen().catch(err => server.log.warn(err))
}

在浏览器打开页面，通过 Ctrl|Cmd + enter 呼出插件交互界面，

或者在在浏览器的 JavaScript 控制台内输入toggleBar 呼出交互界面。

点击会生成骨架屏，保存在项目中的shell目录下

4. 验证骨架屏效果 ​

cnpm run build

然后通过vscode单独打开dist目录 慢网速测试

MIT Licensed

Copyright © 2024-present xarzhi