# news-cli-m **Repository Path**: chen-1999/news-cli-m ## Basic Information - **Project Name**: news-cli-m - **Description**: 移动端新闻管理系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-01-14 - **Last Updated**: 2024-03-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # news-cli-m ## 安装插件 ##### 1,vscode安装插件px-to-vw(将px单位转化为vw) 快捷键alt+z //或者安装px-to-vw 安装: ``` npm i -s postcss-px-to-viewport ``` 配置文件:(新建postcss.config.js) ``` module.exports = { plugins: { autoprefixer: {}, 'postcss-px-to-viewport': { // 视窗的宽度，对应的是我们设计稿的宽度，我们公司用的是移动端375,pc端1920 viewportWidth: 375, // 视窗的高度，根据750设备的宽度来指定，可以不配置 // viewportHeight: 1334, // 指定`px`转换为视窗单位值的小数位数 unitPrecision: 3, // 指定需要转换成的视窗单位，建议使用vw viewportUnit: 'vw', // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 selectorBlackList: ['.ignore'], // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 minPixelValue: 1, // 允许在媒体查询中转换`px` mediaQuery: false } } } ``` ##### (或者)2,使用postcss-pxtorem将px转化为rem 安装 ``` npm install postcss-pxtorem -d ``` 配置 ``` /** * PostCSS 的配置文件 * PostCSS 是基于 Node.js 运行的一个处理 CSS 的工具 * 所以它的配置文件也是运行在 Node.js 中 */ // PostCSS 配置文件需要导出一个对象 module.exports = { // 配置要使用的相关插件 plugins: { // 自动添加浏览器厂商声明前缀，用来兼容不同的浏览器 // VueCLI 已经在内部默认配置了 autoprefixer // autoprefixer: { // // browsers 用来配置要兼容到的系统(浏览器)环境 // // 这个配置没有问题，但是写到这里会有控制台编译警告 // // 为什么？因为 VueCLI 是通过项目中的 .browserslistrc 文件来配置要兼容的环境信息的 // browsers: ['Android >= 4.0', 'iOS >= 8'] // }, // 把 px 转为 rem 'postcss-pxtorem': { // 转换的根元素基准值 // 正常情况下按照你的设计稿来 // 750 宽的设计稿，750 / 10 = 75 // 375 宽的设计稿，375 / 10 = 37.5 // Vant 组件库是基于 375 宽写的 // 移动端页面一般都是以 iphone 6/7/8 为原型设计的 // Vant 组件库是基于逻辑像素 375 写的 // 设计稿都是基于物理像素 750 宽设计的 // 所以如果设置成 75，那么我们就可以在设计稿中测量多少就写多少，但是 Vant 的样式就会变得很小，小了一半 // 所以我们还必须设置成 37.5，但是在测量我们的设计稿的时候我们必须让你的测量单位 / 2 // 有没有更好的办法：不用计算 rootValue: 37.5, // 需要转换的 CSS 属性，* 就是所有属性都要转换 propList: ['*'] } } } ``` ##### 样式组件vant 安装: ``` npm i -s vant ``` 导入:(main.js) ``` import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` ##### axios安装 安装: ``` npm install --save axios ``` 导入(utils/request.js) ``` import axios from 'axios' ``` #### 相对时间(xxx分钟前) 安装: ``` npm i dayjs ``` 配置: 创建(utils/dayjs.js) ``` ``` #### 节流,防抖(当输入过快时只触发函数一次延迟触发) 安装:(利用淘宝镜像或cnpm) ``` npm i lodash --registry=https://registry.npm.taobao.org ``` 使用时导入即可 ``` import _ from 'lodash'(全部导入) import { debounce } from 'lodash'(这里只要用debounce方法防抖) ``` ##### github风格正文样式(views/article/github-markdown.css)直接导入引用类名 ##### json-bigint(id超出 2 的 53 次方之后就不精确) 安装 ``` npm i json-bigint ``` 使用(在request.js中加入) ``` + import JSONbig from 'json-bigint' const request = axios.create({ baseURL: 'http://ttapi.research.itcast.cn/', + transformResponse: [function (data) { + try { + return JSONbig.parse(data) + } catch (err) { + return data + } + }] }) ``` ##### 图片裁剪cropperjs 安装(纯js) ``` npm install cropperjs ``` 导入 ``` import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs' ``` 使用(需要将图片包装在块元素内,并填充) ``` // 图片裁切器必须基于 img 进行初始化 // 注意：img 必须是可见状态才能正常完成初始化 // 因为我们这里要在对话框里面初始化裁切器 // 所以务必要在对话框完全打开的状态去进行初始化。 // 获取图片 DOM 节点 const image = this.$refs["preview-image"]; // 初始化裁切器 this.cropper = new Cropper(image, { aspectRatio: 1, //剪切比例 ``` ## vuecli导航守卫动态改变标题 ``` routes: [ { path: '/', name: 'login', component: login, meta: { title: '首页入口' } }, { path: '/apply', name: 'apply', component: apply, meta: { title: '申请' } } ] ``` main.js最后在遍历 ``` router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } next() }) ``` app.vue判断pc与移动端 ``` mounted () { if (this._isMobile()) { const phone = confirm('请用电脑预览,确认即进入git地址!!!') // this.$router.replace('/m_index'); if (phone) { window.location.href = '' } else { this.$router.replace('/error') } } else { // this.$router.replace('/pc_index'); } }, methods: { _isMobile () { const flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) localStorage.setItem('ismobile', flag ? 1 : 0) return flag } } ``` ## 打开第三方数据403问题 ``` ``` 将refeerror关闭,第三方检测不到,姑且会认为是自己人.会将数据返回给你 ## 断尾 发现bug,登陆后数据接口异常,请求不到数据(不报错),聊天功能需登陆(起冲突),尽可能完善,开发资讯兼容版 ## 应用打包 public/manifest.json ``` { "@platforms" : [ "android", "iPhone", "iPad" ], "id" : "H6D009C88", /*应用的标识*/ "name" : "网咯资讯", /*应用名称，程序桌面图标名称*/ "version" : { "name" : "1.8", /*应用版本名称*/ "code" : "100" }, "description" : "", /*应用描述信息*/ "icons" : { "72" : "icon.png" }, // 本地开发写这个地址，发布上线写线上的 Web 服务地址 "launch_path" : "http://chenlong1999.gitee.io/news-cli-m/", /*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/ "developer" : { "name" : "@成同学", /*开发者名称*/ "email" : "725372239@qq.com", /*开发者邮箱地址*/ "url" : "http://chenlong1999.gitee.io/skip/" /*开发者个人主页地址*/ }, "permissions" : { "Accelerometer" : { "description" : "访问加速度感应器" }, "Audio" : { "description" : "访问麦克风" }, "Messaging" : { "description" : "短彩邮件插件" }, "Cache" : { "description" : "管理应用缓存" }, "Camera" : { "description" : "访问摄像头" }, "Console" : { "description" : "跟踪调试输出日志" }, "Contacts" : { "description" : "访问系统联系人信息" }, "Device" : { "description" : "访问设备信息" }, "Downloader" : { "description" : "文件下载管理" }, "Events" : { "description" : "应用扩展事件" }, "File" : { "description" : "访问本地文件系统" }, "Gallery" : { "description" : "访问系统相册" }, "Geolocation" : { "description" : "访问位置信息" }, "Invocation" : { "description" : "使用Native.js能力" }, "Orientation" : { "description" : "访问方向感应器" }, "Proximity" : { "description" : "访问距离感应器" }, "Storage" : { "description" : "管理应用本地数据" }, "Uploader" : { "description" : "管理文件上传任务" }, "Runtime" : { "description" : "访问运行期环境" }, "XMLHttpRequest" : { "description" : "跨域网络访问" }, "Zip" : { "description" : "文件压缩与解压缩" }, "Barcode" : { "description" : "管理二维码扫描插件" }, "Maps" : { "description" : "管理地图插件" }, "Speech" : { "description" : "管理语音识别插件" }, "Webview" : { "description" : "窗口管理" }, "NativeUI" : { "description" : "原生UI控件" }, "Navigator" : { "description" : "浏览器信息" }, "NativeObj" : { "description" : "原生对象" } }, "plus" : { "splashscreen" : { "autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/ "waiting" : true /*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/ }, "popGesture" : "close", /*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/ "runmode" : "normal", /*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/ "signature" : "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==", /*可选，保留给应用签名，暂不使用*/ "distribute" : { "apple" : { "appid" : "", /*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/ "mobileprovision" : "", /*iOS应用打包配置文件*/ "password" : "", /*iOS应用打包个人证书导入密码*/ "p12" : "", /*iOS应用打包个人证书，打包配置文件关联的个人证书*/ "devices" : "universal", /*iOS应用支持的设备类型，可取值iphone/ipad/universal*/ "frameworks" : [] /*调用Native.js调用原生Objective-c API需要引用的FrameWork，如需调用GameCenter，则添加"GameKit.framework"*/ }, "google" : { "packagename" : "", /*Android应用包名，如io.dcloud.HelloH5*/ "keystore" : "", /*Android应用打包使用的密钥库文件*/ "password" : "", /*Android应用打包使用密钥库中证书的密码*/ "aliasname" : "", /*Android应用打包使用密钥库中证书的别名*/ "permissions" : [ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "" ] }, /*使用Native.js调用原生安卓API需要使用到的系统权限*/ "orientation" : [ "portrait-primary" ], /*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/ "icons" : { "ios" : { "prerendered" : true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/ "auto" : "", /*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/ "iphone" : { "normal" : "", /*iPhone3/3GS程序图标，分辨率：57x57*/ "retina" : "", /*iPhone4程序图标，分辨率：114x114*/ "retina7" : "", /*iPhone4S/5/6程序图标，分辨率：120x120*/ "retina8" : "", /*iPhone6 Plus程序图标，分辨率：180x180*/ "spotlight-normal" : "", /*iPhone3/3GS Spotlight搜索程序图标，分辨率：29x29*/ "spotlight-retina" : "", /*iPhone4 Spotlight搜索程序图标，分辨率：58x58*/ "spotlight-retina7" : "", /*iPhone4S/5/6 Spotlight搜索程序图标，分辨率：80x80*/ "settings-normal" : "", /*iPhone4设置页面程序图标，分辨率：29x29*/ "settings-retina" : "", /*iPhone4S/5/6设置页面程序图标，分辨率：58x58*/ "settings-retina8" : "" /*iPhone6Plus设置页面程序图标，分辨率：87x87*/ }, "ipad" : { "normal" : "", /*iPad普通屏幕程序图标，分辨率：72x72*/ "retina" : "", /*iPad高分屏程序图标，分辨率：144x144*/ "normal7" : "", /*iPad iOS7程序图标，分辨率：76x76*/ "retina7" : "", /*iPad iOS7高分屏程序图标，分辨率：152x152*/ "spotlight-normal" : "", /*iPad Spotlight搜索程序图标，分辨率：50x50*/ "spotlight-retina" : "", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/ "spotlight-normal7" : "", /*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/ "spotlight-retina7" : "", /*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/ "settings-normal" : "", /*iPad设置页面程序图标，分辨率：29x29*/ "settings-retina" : "" /*iPad高分屏设置页面程序图标，分辨率：58x58*/ } }, "android" : { "mdpi" : "", /*普通屏程序图标，分辨率：48x48*/ "ldpi" : "", /*大屏程序图标，分辨率：48x48*/ "hdpi" : "", /*高分屏程序图标，分辨率：72x72*/ "xhdpi" : "", /*720P高分屏程序图标，分辨率：96x96*/ "xxhdpi" : "" /*1080P 高分屏程序图标，分辨率：144x144*/ } }, "splashscreen" : { "ios" : { "iphone" : { "default" : "", /*iPhone3启动图片选，分辨率：320x480*/ "retina35" : "", /*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/ "retina40" : "", /*4.0 英寸设备(iPhone5/iPhone5s)启动图片，分辨率：640x1136*/ "retina47" : "", /*4.7 英寸设备(iPhone6)启动图片，分辨率：750x1334*/ "retina55" : "", /*5.5 英寸设备(iPhone6 Plus)启动图片，分辨率：1242x2208*/ "retina55l" : "" /*5.5 英寸设备(iPhone6 Plus)横屏启动图片，分辨率：2208x1242*/ }, "ipad" : { "portrait" : "", /*iPad竖屏启动图片，分辨率：768x1004*/ "portrait-retina" : "", /*iPad高分屏竖屏图片，分辨率：1536x2008*/ "landscape" : "", /*iPad横屏启动图片，分辨率：1024x748*/ "landscape-retina" : "", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/ "portrait7" : "", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/ "portrait-retina7" : "", /*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/ "landscape7" : "", /*iPad iOS7横屏启动图片，分辨率：1024x768*/ "landscape-retina7" : "" /*iPad iOS7高分屏横屏启动图片，分辨率：2048x1536*/ } }, "android" : { "mdpi" : "", /*普通屏启动图片，分辨率：240x282*/ "ldpi" : "", /*大屏启动图片，分辨率：320x442*/ "hdpi" : "", /*高分屏启动图片，分辨率：480x762*/ "xhdpi" : "", /*720P高分屏启动图片，分辨率：720x1242*/ "xxhdpi" : "" /*1080P高分屏启动图片，分辨率：1080x1882*/ } }, "plugins" : { "speech" : { "ifly" : {} }, "ad" : {} } } }, "screenOrientation" : [ "portrait-primary" ] } ```