租号网站开发,栖霞建设采购网站,关键词怎么优化到百度首页,龙岩网红桥文章目录一、Rem 布局适配1. 安装 amfe-flexible2. px转化rem3. 全局配置4. 重置样式表5. 引入重置样式表二、组件安装和配置与封装2.1. 安装less 预编译语言2.2. 安装vant-ui2.3. 端口自定义配置三、axios 工具封装3.1. 下载安装axios3.2. axios导入3.3. 创建axios 实例拦截器… 文章目录一、·Rem 布局适配1. 安装 amfe-flexible2. px转化rem3. 全局配置4. 重置样式表5. 引入重置样式表二、组件安装和配置与封装2.1. 安装less 预编译语言2.2. 安装vant-ui2.3. 端口自定义配置三、axios 工具封装3.1. 下载安装axios3.2. axios导入3.3. 创建axios 实例拦截器配置3.4. 拦截器配置3.5. 创建请求api3.6. 跨域代理配置技术选型组件版本说明vue^2.6.11数据处理框架vue-router^3.5.3动态路由vant^2.12.37移动端UIaxios^0.24.0前后端交互amfe-flexible^2.2.1Rem 布局适配postcss-pxtorem^5.1.1Rem 布局适配less^4.1.2css编译less-loader^5.0.0css编译vue/cli~4.5.0项目脚手架 vue-cli vant less axios 开发 一、·Rem 布局适配 1. 安装 amfe-flexible lib-flexible 用于设置 rem 基准值 在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px此时1rem应该等于75px。假如量的某个元素的宽度是150px那么在css里面定义这个元素的宽度就是 width: 2rem 进入项目根目录执行以下命令 npm i -S amfe-flexible在public/index.html文件中的head中引入以下适配内容 headmeta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno/head2. px转化rem 安装 第三方插件 postcss-pxtorem 会自动将css代码中的px单位根据规则转换成rem 单位 注意: 如果css样式中 有不需要转成rem 的单位只需将单位写成大写PX 即可。 注意需要安装5.11 版本否则报错 npm i postcss-pxtorem5.1.13. 全局配置 在项目根目录创建vue.config.js文件设置如下配置 注意修改完项目根目录下的配置文件后一定要重启项目这样配置文件才生效 module.exports {lintOnSave: false, // eslint-loader 是否在保存的时候检查css: {loaderOptions: {postcss: {plugins: [// 把px单位换算成rem单位require(postcss-pxtorem)({// 换算的基数 375的设计稿换算基数就是37.5rootValue: 37.5,selectorBlackList: [.van], // 要忽略的选择器并保留为px。propList: [*], //可以从px更改为rem的属性。minPixelValue: 1 // 设置要替换的最小像素值。})]}}} }4. 重置样式表 在src/assets/下面新建css目录并在css目录下面新增reset.css样式文件 内容容下 charset utf-8;html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0} body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,Hiragino Sans GB,simsun,sans-serif} h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%} h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,Hiragino Sans GB,微软雅黑,simsun,sans-serif} h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal} address,cite,dfn,em,i,optgroup,var{font-style:normal} table{border-collapse:collapse;border-spacing:0;text-align:left} caption,th{text-align:inherit} ul,ol,menu{list-style:none} fieldset,img{border:0} img,object,input,textarea,button,select{vertical-align:middle} article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block} audio,canvas,video{display:inline-block;*display:inline;*zoom:1} blockquote:before,blockquote:after,q:before,q:after{content:\0020} textarea{overflow:auto;resize:vertical} input,textarea,button,select,a{outline:0 none;border: none;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0} mark{background-color:transparent} a,ins,s,u,del{text-decoration:none} sup,sub{vertical-align:baseline} html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;} body {font-family: Arial, Microsoft Yahei, Helvetica Neue, Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;} hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;} a {color: #25a4bb;text-decoration: none;}5. 引入重置样式表 在src目录下的main.js 文件中, 引入重置样式表,去掉标签的默认样式 引入重置样式表 import /assets/css/reset.css二、组件安装和配置与封装 2.1. 安装less 预编译语言 npm install less -S npm install less-loader5.0.0 -S编译成css, 在main.js 引入less并使用 import less from less Vue.use(less)vue文件中使用案例 代码中使用 style langless scoped/style注意此处安装less-loader 版本需是5.x版本,否则报错,默认安装的是最新版本,所以安装需指定版本号 2.2. 安装vant-ui 官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/ 项目目录下安装vant npm i vant -Sor yarn add vant说明可以在package.json文件中看到上面效果即安装成功。 在main.js 文件中引入vant 对应的js和css 文件 //导入所有组件。 import Vant from vant; import vant/lib/index.css; Vue.use(Vant);也可以在对应组件的script标签中按需导入不推荐手动引入很麻烦 import Vue from vue; import { Button } from vant; import vant/lib/button/style; Vue.use(Button);vant ui 测试 在src下App.vue页面新增如下内容 div classhomepHome组件测试vant组件/pvan-button typeprimary主要按钮/van-button /div启动项目,即可看到效果 npm run servehttp://localhost:8080/ 说明 1.如果可以正常显示按钮代表vant ui引入成功 2.为了方便临时采用全局导入方案但是由于vant宝体积大项目中期会采用插件刑事自动按需导入 2.3. 端口自定义配置 默认即可 如果想要更改8080端口可以在根目录下新建 vue.config.js 中 module.exports {devServer: {port: 5000} }三、axios 工具封装 3.1. 下载安装axios npm install axios3.2. axios导入 在src目录下的创建utils目录, 并在utils下创建request.js 文件. // 导入axios import axios from axios;3.3. 创建axios 实例拦截器配置 在src/utils/request.js 文件中创建axios实例 // 使用自定义配置新建一个axios 实例对axios 做一些基础配置 const instance axios.create({baseURL: http://kumanxuan1.f3322.net:8001/,timeout: 5000,headers: { X-Custom-Header: foobar } });3.4. 拦截器配置 在src/utils/request.js 文件中新增请求拦截器和响应拦截器 // 添加请求拦截器 instance.interceptors.request.use(function (config) {//请求之前执行该函数 一般在该处设置token let token localStorage.getItem(token);if (token) {config.headers[token] token}// 在发送请求之前做些什么return config; }, function (error) {// 对请求错误做些什么return Promise.reject(error); });//响应拦截器 instance.interceptors.response.use(response {//1.非200响应//2.token过期//3.异地登陆//4.非对象加密的解密return response.data }) export default instance3.5. 创建请求api 在src下创建https文件夹并添加http.js用于临时存储全部的接口的请求api为了维护方便后期会按照模块划分创建与模块对应的xxx.js。 https/http.js 在src目录下创建https 目录, 目录下创建http.js 文件,该文件主要用来管理所有的http请求的,如下: // 所有的请求都放在该目录 import instance from ../utils/request; //首页所有请求 //1. 获取首页数据列表 export function getIndexList() {return instance.get(/index/index) }//]专题页 Topic //专题请求 export function getTopicList(params) {return instance({url: /topic/list,method: get,params}) }//6. 分类页 Category // 全部分类数据接口 export function GetChannelDataApi(params) {return instance({url: /api/catalog/index,method: get,params}) } // 获取当前分类数据 export function GetFenleiDataApi(params) {return instance({url: /catalog/current,method: get,params}) }//我的页面 User //登陆 export function GoLogin(params) {return instance({url: /auth/loginByWeb,method: post,data: params}) }// 搜索页 // 根据关键字搜索接口 export function GetSearchData(params) {return instance.get(/goods/list, {params}) }// 详情页 //根据id查询对应数据接口 export function getDetailData(params) {return instance.get(/goods/detail, {params}) }//详情页相关产品 export function GetGoodsRelatedData(params) {return instance({url: /goods/related,method: get,params}) }// 2.搜索页 SearchPopup // 历史记录列表和热门搜索列表 export function GetPopupData(params) {return instance({url: /search/index,method: get,params}) }//删除历史记录 export function Clearhistory(params) {return instance({url: /search/clearhistory,method: post,data: params}) }//搜索提示列表 export function GetSearchTipsListData(params) {return instance({url: /search/helper,method: get,params}) }//4.分类数据获取 Channel export function GetCateGoryData(params) {return instance({url: /goods/category,method: get,params}) } // 分类页面商品列表请求 export function GetCateGoryList(params) {return instance({url: /goods/list,method: get,params}) }// 获取品牌详情数据列表请求 export function GetBrandList(params) {return instance({url: /brand/detail,method: get,params}) }// 获取分页品牌详情中的产品列表 export function GetBrandListData(params) {return instance({url: /goods/list,method: get,params}) }//购物车页 Cart // 购物车列表 export function GetCartData(params) {return instance({url: /cart/index,method: get,params}) } // 加入购物车 export function AddToCart(params) {return instance.post(/cart/add, params) }// 获取购物车产品数量 export function GetCartCountData(params) {return instance({url: /cart/goodscount,method: get,params}) }// 加入购物车 export function UpdateCartData(params) {return instance({url: /cart/update,method: post,data: params}) }// 删除购物车商品 export function DeleteCartData(params) {return instance({url: /cart/delete,method: get,params}) }// 删除购物车商品 export function DeleteCartData2(params) {return instance({url: /cart/delete,method: post,data: params}) }// 切换购物车商品选中状态功能接口含全选 export function ToggleCartCheckedData(params) {return instance({url: /cart/checked,method: post,data: params}) }3.6. 跨域代理配置 根目录下的 vue.config.js 进行配置 module.exports {devServer: {port: 8080,proxy: {/api: {target: http://kumanxuan1.f3322.net:8001/,pathRewrite: {^/api: }}}} }由于配置文件修改了这里一定要记得重新 npm run serve