策划是做什么的,手机优化好还是不优化好,wordpress 禁止google,wordpress+直接连接数据库文章目录一、前置准备1. 技术选型2. 创建vue项目二、Rem 布局适配2.1. px转rem2.2. 设置 rem 基准值2.3. 配置vue.config.js2.4. 重置样式表2.5. 配置样式表2.6. 安装less2.7. 注册less2.8. 代码中使用三、vant安装/配置/测试3.1. 安装vant-ui3.2. 引入与注册3.3. vant测试四、…
文章目录一、前置准备1. 技术选型2. 创建vue项目二、Rem 布局适配2.1. px转rem2.2. 设置 rem 基准值2.3. 配置vue.config.js2.4. 重置样式表2.5. 配置样式表2.6. 安装less2.7. 注册less2.8. 代码中使用三、vant安装/配置/测试3.1. 安装vant-ui3.2. 引入与注册3.3. vant测试四、axios 工具封装4.1. 下载安装axios4.2. 创建axios实例4.3. 配置拦截器4.4. api管理4.5. 跨域代理配置五、动态路由5.1. 下载vue-router5.2. 组件注册5.3. 主页路由5.4. 实例挂载5.5. 创建home页面5.6. 引入 AppTabBar六、优化6.1. 路由守卫6.2. 异常修复6.3. 路由懒加载一、前置准备
1. 技术选型
技术选型
组件版本说明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 开发
2. 创建vue项目
使用vue-cli脚手架 采用vue2.x默认安装即可
vue ui二、Rem 布局适配
2.1. px转rem
安装 amfe-flexible 在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px此时1rem应该等于75px。假如量的某个元素的宽度是150px那么在css里面定义这个元素的宽度就是 width: 2rem npm i amfe-flexible -S在public/index.html中替换标签
meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno在main.js 引入amfe-flexible
import amfe-flexible;2.2. 设置 rem 基准值
安装 第三方插件 postcss-pxtorem 注意需要安装5.11 版本否则报错
npm i postcss-pxtorem5.1.1 -S会自动将css代码中的px单位根据规则转换成rem 单位 注意: 如果css样式中 有不需要转成rem 的单位只需将单位写成大写PX 即可。 2.3. 配置vue.config.js
在项目根目录创建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 // 设置要替换的最小像素值。})]}}}
}2.4. 重置样式表
在src/assets下创建css文件夹新建reset.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;}2.5. 配置样式表
在main.js 文件中, 引入重置样式表reset.css,去掉标签的默认样式
// 引入重置样式表
import /assets/css/reset.css2.6. 安装less
预编译语言编译成css, 在main.js 引入使用 依次执行
npm install less -Snpm install less-loader5.0.0 -S注意此处安装less-loader 版本需是5.x版本,否则报错,默认安装的是最新版本,所以安装需指定版本号 2.7. 注册less
//在main.js中,引入less并使用
import less from less
Vue.use(less)2.8. 代码中使用
style langless scoped/style三、vant安装/配置/测试
3.1. 安装vant-ui
官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/
项目目录下安装vant
npm i vant -S或者
yarn add vant在package.json文件中看到上面效果即安装成功 3.2. 引入与注册
- 在main.js 文件中引入vant 对应的js和css 文件
//导入所有组件
import Vant from vant;
import vant/lib/index.css;Vue.use(Vant)3.3. vant测试
在src下的App.vue组件中的内容替换成以下内容进行测试
templatediv idappH1Home组件测试vant组件/H1van-button typeprimary主要按钮/van-buttonvan-button typeinfo信息按钮/van-buttonvan-button typedefault默认按钮/van-buttonvan-button typewarning警告按钮/van-buttonvan-button typedanger危险按钮/van-button/div
/templatescriptexport default {name: App,components: {}
}
/scriptstyle langless scoped
h1{color: #25a4bb;margin-bottom: 15px;
}
/style
效果图
四、axios 工具封装
4.1. 下载安装axios
npm install axios4.2. 创建axios实例
在src目录下创建utils目录, 创建request.js 文件.
// 导入axios
import axios from axios;
// 使用自定义配置新建一个axios 实例对axios 做一些基础配置
const instance axios.create({baseURL: http://kumanxuan1.f3322.net:8001/,timeout: 5000,headers: { X-Custom-Header: foobar }
});export default instance4.3. 配置拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {//请求之前执行该函数 一般在该处设置tokenlet 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
})4.4. api管理
在src目录下创建https 目录, 目录下创建http.js 文件,该文件主要用来管理所有的http请求的,如下:
// 所有的请求都放在该目录
import instance from ../utils/request;//1. 获取首页数据列表
export function getIndexList() {return instance.get(/index/index)
}//2. 分类页 Category
// 全部分类数据接口
export function GetChannelDataApi(params) {return instance({url: /api/catalog/index,method: get,params})
}// 3.根据关键字搜索接口
export function GetSearchData(params) {return instance.get(/goods/list, {params})
}//4.登陆
export function GoLogin(params) {return instance({url: /auth/loginByWeb,method: post,data: params})
}//5.根据id查询对应数据接口
export function getDetailData(params) {return instance.get(/goods/detail, {params})
}4.5. 跨域代理配置
devServer: {port: 8080,proxy: {/api: {target: http://kumanxuan1.f3322.net:8001/,pathRewrite: {^/api: }}}}由于配置文件修改了这里一定要记得重新 npm run serve 五、动态路由
5.1. 下载vue-router
npm install vue-router5.2. 组件注册
在src下创建router文件夹并添加index.js再次文件中安装使用vue-router
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)5.3. 主页路由
// 配置项目路由
const router new VueRouter({routes: [{path: /,redirect: /home // 重定向},{path: /home, //首页name: Home,component: () import(/views/home/Home),meta: {isShowTabbar: true}// children: [ // 二级路由 不能加/ 加/表示一级路由// {// path: searchPopup,// component: () import(/views/home/search/searchPopup.vue),// name: searchpopup,// meta: {// isshowtabbar: false// },// }// ],}]
})5.4. 实例挂载
main.js router 挂载到根实例对象上 在main.js 文件中引入router 文件下的index.js 路由配置文件并在根实例中注册。
// 在 入口文件mian.js 引入路由文件
import router from /router/index.js;
new Vue({render: h h(App),router // router 挂载到根实例对象上
}).$mount(#app)根据路由配置在src目录下的views 文件中分别创建tabbar 对应的组件文件。 components /AppTabBar.vue
templatediv classapp-tab-bar!-- 下方导航 --van-tabbarv-modelactiveactive-color#ee0a24inactive-color#000changeonChangeshaperoundroutevan-tabbar-item iconhome-o to/home首页/van-tabbar-itemvan-tabbar-item iconlabel-o to/topic专题/van-tabbar-itemvan-tabbar-item iconapps-o to/category分类/van-tabbar-itemvan-tabbar-item iconshopping-cart-o to/cart购物车/van-tabbar-itemvan-tabbar-item iconuser-o to/user我的/van-tabbar-item/van-tabbar/div
/templatescript
export default {name: app-tab-bar,data () {return {active:0}},methods: {onChange(m) {this.active m},},
};
/scriptstyle/style5.5. 创建home页面
在src/views下创建home文件夹并创建Home.vue页面 内容如下
templatedivH1Home组件测试vant组件/H1van-button typeprimary主要按钮/van-buttonvan-button typeinfo信息按钮/van-buttonvan-button typedefault默认按钮/van-buttonvan-button typewarning警告按钮/van-buttonvan-button typedanger危险按钮/van-button/div
/templatescript
export default {name: Home
}
/scriptstyle langless scoped
h1{color: #25a4bb;margin-bottom: 15px;
}
/style5.6. 引入 AppTabBar
将AppTabBar.vue导入app.vue 跟组件将App.vue内容覆盖即可
templatediv idapp!-- 路由匹配到的组件将显示在这里 --router-view /router-view!-- 底部tabbar 组件 --AppTabBar v-show$route.meta.isShowTabbar/AppTabBar/div
/templatescript
import AppTabBar from /components/AppTabBar;export default {name: App,components: {AppTabBar,},}
/script
style langless scoped/style启动项目
npm run serve六、优化
6.1. 路由守卫
在router 目录下的index.js 文件中设置路由前置守卫代码案例如下用来判断购物车页面只能在用户登录的情况下才能查看。
// 路由前置守卫
router.beforeEach((to, from, next) {// 有token就表示已经登录// 想要进入购物车页面必须有登录标识token// console.log(to:, to)// console.log(from:, from)let token localStorage.getItem(token)if (to.path /cart) {// 此时必须要有tokenif (token) {next(); // next()去到to所对应的路由界面} else {Vue.prototype.$toast(请先登录);// 定时器setTimeout(() {next(/user); // 强制去到/user所对应的路由界面}, 1000);}} else {// 如果不是去往购物车的路由则直接通过守卫去到to所对应的路由界面next()}
})6.2. 异常修复
编程式导航在跳转到与当前地址一致的URL时会报错但这个报错不影响功能 在src/router/index.js中新增以下内容
// 该段代码不需要记理解即可
// 在vue-router在3.1.0版本之后push和replace方法会返回一个promise对象如果跳转到相同的路由就报promise uncaught异常
const originalPush VueRouter.prototype.push;
VueRouter.prototype.push function push(location) {return originalPush.call(this, location).catch((err) err);
};
6.3. 路由懒加载
在src/main.js中新增
// 引入vant 提供过的懒加载
import { Lazyload } from vant;Vue.use(Lazyload);
