开发前准备
环境:
Node.js LTS版本
git 最新版
文档:
本项目技术栈基于
快速开始
1.克隆项目
git clone https://gitee.com/Fntys/met_h5.git
2.进入项目
cd met_h5
3.安装依赖
npm install
4.启动构建
npm run dev
5.访问 localhost:9999/#/
Tips ： 若想在手机访问，请前往
config/index.js下，修改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 里面的初始内容如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import FastClick from 'fastclick';
import VueRouter from 'vue-router';
import App from './App';
import router from './router'
import './icons'
import './styles/index.scss'
Vue.use(VueRouter);
/* 全局注册组件 */
import { Swiper,SwiperItem} from 'vux'
Vue.component('swiper', Swiper)
Vue.component('swiper-item', SwiperItem)
FastClick.attach(document.body);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App),
}).$mount('#app-box');
这里我们引入了：
vue-router // Vue官方的路由组件 fastclick // 解决移动端点击300ms延迟的问题 icons // 自定义的SVG图标解决方法 styles/index.scss // 全局样式 Swiper,SwiperItem // 轮播图组件
路由配置
在router/index.js中，我们配置了全局路由。
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/pages/layout/Layout'
Vue.use(Router)
import Layout from '@/pages/layout/Layout'
export const constantRouterMap = [
{
path: '/', //父页面的路径
component: Layout, //父页面的组件
redirect: '/home/index', //父页面重定向后的路径
children: [
{
path: '/home/index', //子页面的路径
component: () => import('@/pages/index/index'), //子页面的组件
meta: { title: '主页', column: '1' } //子页面的信息
}
]
}
export default new Router({
routes: constantRouterMap
})
通过上述代码我们配置了一个包含index页面的首页路由，继续向constantRouterMap中添加元素就可配置其他的页面的路由。
Tips ： 关于更多路由配置的知识可以查阅 Vue Router
页面配置
页面结构
本项目共有7个页面，分别为：
├── pages // 页面文件 │ ├── layout // 布局页 │ │ ├──Layout.vue // 主页面 │ │ ├──components // 组件 │ │ │ ├──AppMain.vue // 主体内容区域组件 │ │ │ ├──index.js // 导出组件 │ │ │ ├──MetFooter.vue // 底部区域组件 │ │ │ ├──MetHeader.vue // 头部区域组件 │ ├── about // 简介 │ │ ├──index.vue // index页面 │ ├── 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, //父页面继承layout组件
children: [
{
path: 'index', //子页面路径
name: 'abc',
component: ()=>import('@/pages/adc/index'), //子页面组件
meta: { title: 'abc',column:'1'}
}
]
}
页面跳转
- 使用
<router-link>标签，比如我们想从列表页跳到详情页面：<router-link to="/shownews/index"></router-link>，只需在to处填写详情页面路由的path即可。 - 元素绑定
click事件，调用router.push({...})方法。
样式
样式编写采用了 Scss
全局样式
全局样式文件存放于/src/styles/中
在/src/main.js中通过import './styles/index.scss'被全局引入
├── styles // 公共样式文件 │ ├── common.scss // 公共样式 │ ├── index.scss // 全局样式 │ ├── mixin.scss // 混合器 │ ├── varable.scss // 变量
页面样式
由于页面大多是由组件组成，所以一个页面的样式被分散到各个组件。如：src/components/IndexAbout.vue中的
<style lang="scss" scoped>
.index_about {
.about-img img {
width: 100%;
margin-bottom: 20px;
}
.about-content p {
font-size: 13px;
color: rgb(89, 89, 89);
}
}
</style>
影响了index页面的about区块的样式。
其中lang="scss"规定编译器按照何种语法来解释css语言，这里我们是用的scss。scoped表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。
Tips ： 对于高复用的公共组件谨慎使用
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.vue
2.同时新建index.js文件，将组件暴露出来
export { default as HelloWorld}
from './HelloWorld'
2.在页面引入你的组件：
import { HelloWorld } from '@/components/xxx/HelloWorld'` //引入组件
components: {
HelloWorld //组件注册
}
3.在字符串模版中使用<hello-world></hello-world>
Tips ：
@是webpack的alias，指向src，目的是让后续引用的地方减少路径的复杂度
网络请求
这里我们进行了axios的封装。
1.在utils/下新建request.js
import axios from 'axios'
import qs from 'qs'
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 30000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
if (config.method === 'post') {
config.data = qs.stringify(config.data)
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// respone拦截器
service.interceptors.response.use(
response => {
if (response.data.status === 401) {
} else {
return response
}
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
2.在api/下的每个方法中引用
import request from '@/utils/request'
export function getIndexBanner(username) {
return request({
url: '/Process/Process/getMemberList',
method: 'post',
data: {
username
}
})
}
3.在其他地方引入，调用即可
import getIndexBanner from '@/api/index' getIndexBanner(username)
