vue.js(2.x)搭建web项目安装开发环境1.安装node环境下载地址：下载地址：https://nodejs.org/en/2。vue版本和vue.cli3.x脚手架1.全局安装vue-clinpminstall--global@vue/cli2.命令行cmd进入创建项目的目录，完成配置vuecreate[项目名称]3.启动项目cd[项目根目录]npmrunserveconfigure项目路由1.创建路由器路由文件1.在src根目录下创建router.js配置importVuefrom"vue";importRouterfrom"vue-router";Vue.use(路由器);constroutes=[{path:"/",redirect:"/register",},];//加载组件目录下的路由importComponents(require.context('../components',true,/\.vue$/,'lazy'))functionimportComponents(r){r.keys().forEach(key=>{routes.push({path:key.substring(key.indexOf('/'),key.lastIndexOf('.')),component:()=>r(key),meta:{requireAuth:false}})});}constrouter=newRouter({routes,scrollBehavior(){return{x:0,y:0}//路由跳转到顶部}});//路由拦截器router.beforeEach((to,from,next)=>{next()})导出默认路由器；二、router.js文件分析1.在node中使用importComponents自动配置路由importtComponents(require.context('../components',true,/\.vue$/,'lazy'))function*importComponents(r){console.dir(r);r.keys().forEach(key=>{routes.push({path:key.substring(key.indexOf('/'),key.lastIndexOf('.')),component:()=>r(key),meta:{requireAuth:false}})});2.router.beforeEach路由拦截器//控制令牌认证等路由router.beforeEach((to,from,next)=>{next()})数据请求axios封装1.安装axios依赖包npmiaxios2.封装axios1.src根目录创建http文件和index.js代码示例:*importaxiosfrom'axios'importStorefrom'../vuex/index'constConfigBaseURL='backendapiaddress'//使用create方法创建一个axios实例exportconstService=axios.create({timeout:10000,//请求超时baseURL:ConfigBaseURL,method:'post',headers:{'Content-Type':'application/json;charset=utf-8',Authorization:""},validateStatus:function(状态我们){返回状态>=200&&状态<300;//default},})/***axios请求拦截器*/lettimerEnd,timestamp;Service.interceptors.request.use(function(config){//请加密所有POST，必须是json数据提交，不支持formtimestamp=Date.parse(newDate());//Store.commit("showLoading");if(config.url=="/api/User/ClientLoginAndRegist"||config.url=="/api/User/IdCardExists"){返回配置}if(!sessionStorage.getItem("token")){//config.data={//密文：Aes.EncryptData(config.data)//}config.headers.Authorization="Bearer"+sessionStorage.getItem("token");returnconfig;}//返回配置//TODO:加密if(config.method=="post"&&config.headers["Content-Type"]!="multipart/form-data"&&sessionStorage.getItem("token")){config.headers.Authorization=`不记名${sessionStorage.getItem("token")}`;//config.data={//密文：Aes.EncryptData(config.data)//}returnconfig;}returnconfig},function(error){//处理请求错误Store.commit("hideLoading");返回Promise.reject（错误）；})/***axios响应拦截器**/Service.interceptors.response.use(function(response){//后端返回的字符串表示需要解密//TODODecrypt//if(typeof(response.data.data)=="string"){//response.data.data=JSON.parse(Aes.DecryptData(response.data.data));//}returnresponse;},function(error){if(error&&error.response){switch(error.response.status){case400:error.message="错误请求！"break;case401:error.message="未授权，请重试登录！"break;case403:error.message="访问被拒绝！"中断；case404:error.message="请求错误，找不到资源！"休息;case405:error.message="请求方式不被允许！"休息;case500:error.message="服务器错误！"休息;case501:error.message="网络未实现！"休息;case502:error.message="网络错误！"休息;case503:error.message="网络不可用！"休息;case504:error.message="网络超时！"休息;case505:error.message="http版本不支持请求！"休息;}}else{error.message="网络有问题，请稍后再试！"}//对响应错误做点什么要订购Store.commit("hideLoading");返回Promise.reject（错误）；})```移动端适配(rem)1.新建fontSize.js---assets--common--js--fontSize.js2.原理：比例缩放代码示例：(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'在窗口中？'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;如果（！clientWidth）返回；if(clientWidth>=750){docEl.style.fontSize='100px';}else{docEl.style.fontSize=100*(clientWidth/750)+'px';}};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);获取浏览器默认字体值，设置比例3.加载fontSize文件使用方法：将该文件导入到main.js文件中。UI框架导入个人推荐使用vue开发的UI框架1.移动端UI框架VantUI：目前使用最多的易用框架vant地址：https://youzan.github.io/vant/#/zh-CN/2.PC端框架iViewUI：iView是一套基于Vue.js的开源UI组件库，主要服务于PC端界面的中后台产品。iView地址：https://iview.github.io/
