開發前準備
環境:
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)