.index_about{.about-imgimg{width:100%;底部边距：20px；}.about-contentp{src/components/IndexAbout.vue中的字体大小：13px；颜色：RGB（89、89、89）；}}开发前准备环境：Node.jsLTS版本git最新版本文档：本项目技术栈基于ES2016VueJSvux快速入门1.克隆项目gitclonehttps://gitee.com/Fntys/met_h5.git2。进入项目cdmet_h53.安装依赖npminstall4.开始构建npmrundev5.访问localhost:9999/#/Tips：手机端访问请到config/index.htmljs修改dev的host为本机IP，确保电脑和手机在同一个路由下，访问IP即可。目录结构├──build//构建相关├──config//配置相关├──dist//打包相关├──node_modules//第三方模块├──src//源码│├──utils//全局公共方法│├──api//接口方法│├──pages//所有页面文件│├──components//业务组件│├──assets//图片、字体等静态资源│├──components//业务组件│├──styles//公共样式文件│├──icon//SVG图标文件│├──router//路由文件│├──main.js//入口文件加载组件初始化等│├──App.vue//入口页面├──static//第三方不打包资源├──test//测试相关├──.babelrc//babel-loader配置├──.eslintrc.js//eslint配置项├──.postcssrc.js//后置处理器├──.gitignore//git忽略项├──index.html//html模板└──package.json//package.json页面路由全局配置首先我们看一下项目的配置文件/src/main.js初始内容如下：//Vue构建版本到使用`import`命令加载//（仅运行时或独立）已经在webpack.base.conf中设置了别名。从'vue'导入Vue；从'fastclick'导入FastClick；从'vue-router';importAppfrom'./App';importrouterfrom'./router'import'./icons'import'./styles/index.scss'Vue.use(VueRouter);/*全局注册的组件*/import{Swiper,SwiperItem}来自'vux'Vue.component('swiper',Swiper)Vue.component('swiper-item',SwiperItem)FastClick.attach(document.body);Vue.config.productionTip=false;/*eslint-disableno-new*/newVue({router,render:h=>h(App),}).$mount('#app-box');这里介绍一下：vue-router//Vue官方路由组件fastclick//解决点击移动端图标延迟300ms的问题//自定义SVG图标解决方案styles/index.scss//全局样式Swiper,SwiperItem//Carousel地图组件路由在router/index.js中配置，我们配置了全局路由importVuefrom'vue'importRouterfrom'vue-router'importLayoutfrom'@/pages/layout/Layout'Vue.use(Router)importLayoutfrom'@/pages/layout/Layout'exportconstconstantRouterMap=[{path:'/',//父页面组件的路径:Layout,//父页面组件的重定向:'/home/index',//重定向的父页面定向路径children:[{path:'/home/index',//子页面组件路径:()=>import('@/pages/index/index'),//子页面组件元:{title:'Homepage',column:'1'}//子页面的信息}]}exportdefaultnewRouter({routes:constantRouterMap})通过上面的代码，我们配置了一个包含index页面的首页路由，并且继续往constantRouterMap里面添加元素，就可以配置其他页面的路由。Tips：更多关于路由配置的知识，请参考VueRouter页面配置页面结构。.vue//主页││├──components//组件││├──AppMain.vue//主要内容区域组件││├──index.js//导出组件│││├──MetFooter.vue//底部区域组件│││├──MetHeader.vue//头部区域组件│├──about//简介│├──index.vue//索引页面│├──index//首页││├──index.vue//主页│├──news//新闻列表页││├──index.vue//主页│├──product//产品列表页│├──index.vue//主页│├──shownews//新闻详情页│├──index.vue//主页│├──showproduct//商品详情页│├──index.vue//主页面新建页面添加页面pages/abc/index.vue然后在router/index.js添加新路由：{path:'/abc',//父页面路径component:Layout,//Parent页面继承布局组件children:[{path:'index',//子页面路径名:'abc',component:()=>import('@/pages/adc/index'),//子页面组件meta:{title:'abc',column:'1'}}]}页面跳转使用了标签，比如我们要从列表页跳转到详情页：，只需要填写详情页路由到的路径即可给元素绑定点击事件，调用router.push({...})方法.样式使用Scss全局样式编写。全局样式文件存放在/src/styles/，在/src/main.js中通过import'./styles/index.scss'全局导入├──styles//公共样式文件│├──common.scss//commonstyle│├──index.scss//globalstyle│├──mixin.scss//mixer│├──varable.scss//可变页面样式因为大部分页面都是由组件构成的，所以一个页面的样式是分布式的跨组件。例如：.index_about{.about-imgimg{width:100%;底部边距：20px；}.about-contentp{src/components/IndexAbout.vue中的字体大小：13px；颜色：RGB（89、89、89）；}}影响索引页面上关于块的样式。其中lang="scss"指定编译器使用哪种语法来解释css语言。这里我们使用scss。scoped是指将其样式应用到当前模块，达到样式私有化的目的，这是一个非常好的机制。提示：谨慎使用范围属性组件，以获得高度可重用的公共组件。前面我们提到大部分页面都是由组件组成的，项目的所有组件都存放在src/components/下。├──components//所有组件│├──index//主页组件│├──IndexAbout.vue//简介│├──IndexNews.vue//新闻│├──IndexProduct.vue//产品││├──IndexService.vue//服务│├──index.js//导出组件│├──inside//内页组件││├──News.vue//新闻列表│├──Product.vue//产品列表││├──ShowNews.vue//新闻详情页面│├──ShowProduct.vue//产品详情页面│├──index.js//导出组件│├──common//公共组件││├──Banner.vue//轮播图││├──Sidebar.vue//侧边栏│├──SubcolumnNav.vue//二级栏目导航││├──index.js//导出组件组件创建和导入1.新建一个文件，使用PascalCase命名（驼峰式命名），如：HelloWorld.vue2.同时新建一个index.js文件组件，暴露组件export{defaultasHelloWorld}from'./HelloWorld'2.在页面引入你的组件：import{HelloWorld}from'@/components/xxx/HelloWorld'`//引入组件components:{HelloWorld//组件注册}3、在字符串模板中使用提示：@是webpack的别名，指向src，目的是为后续引用减少路径的复杂度。这里的网络请求我们对axios进行了封装1.在utils/下新建request.jsimportaxiosfrom'axios'importqsfrom'qs'constservice=axios.create({baseURL:process.env.BASE_API,//api的base_urltimeout:30000//请要求超时})//请求拦截器service.interceptors.request.use(config=>{if(config.method==='post'){config.data=qs.stringify(config.data)config.headers['Content-Type']='application/x-www-form-urlencoded'}returnconfig},error=>{//处理请求错误console.log(error)//用于调试Promise.reject(error)})//响应拦截器service.interceptors.response.use(response=>{if(response.data.status===401){}else{returnresponse}},error=>{console.log('err'+error)//fordebugreturnPromise.reject(error)})exportdefaultservice2.在api/下的每个方法中引用importrequestfrom'@/utils/request'exportfunctiongetIndexBanner(username){returnrequest({url:'/Process/Process/getMemberList',我方法：'发布'，数据：{用户名}}）}3。别处介绍，直接调用importgetIndexBannerfrom'@/api/index'getIndexBanner(username)
