仿美团H5项目实战系列- 项目整体框架搭建

本文主要是介绍仿美团H5项目实战系列- 项目整体框架搭建，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

🚀 作者 ：“二当家-小D”

🚀 博主简介：⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人，8年开发架构经验，精通java,擅长分布式高并发架构,自动化压力测试，微服务容器化k8s等

🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

🍅文末获取源码联系 配套笔记打包🍅

目录

项目搭建初始化配置

1.rem 适配

1.1安装

1.2文件配置

1.3引入

2.less 预处理器

2.1安装

3.vant 组件库的引入

3.1安装

3.2引入

3.3样式按需引入

3.4使用

4.阿里巴巴矢量库引入

4.1引入

4.2使用

5.报错

5.1错误

5.2解决

6.项目路由配置

6.1安装

6.2新建路由配置文件

6.3引入

结束语

---

项目搭建初始化配置

1.rem 适配

1.1安装

cnpm install postcss-pxtorem@5.1.1 amfe-flexible -S

1.2文件配置

module.exports = {lintOnSave: false,css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({ rootValue: 37.5 })],},},},
};

1.3引入

// main.js
import 'amfe-flexible';

2.less 预处理器

2.1安装

cnpm i less less-loader@7 -S

3.vant 组件库的引入

3.1安装

cnpm i vant@next -S
cnpm i babel-plugin-import -S

3.2引入

// main.js
import { Button } from 'vant';
app.use(Button)

3.3样式按需引入

module.exports = {plugins: [['import',{libraryName: 'vant',libraryDirectory: 'es',style: true,},'vant',],],
};

3.4使用

<van-button type="primary">主要按钮</van-button>

4.阿里巴巴矢量库引入

4.1引入

// index.html
<script src="http://at.alicdn.com/t/font_2701887_5roykhspg1e.js"></script>

4.2使用

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>

5.报错

5.1错误

sockjs.js:1609 GET http://192.168.0.120:8080/sockjs-node/info?t=164267043253

5.2解决

cnpm install -g webpack webpack-cli webpack-dev-server

6.项目路由配置

6.1安装

cnpm i vue-router@4 -S

6.2新建路由配置文件

import { createRouter, createWebHashHistory } from 'vue-router';const router = createRouter({history: createWebHashHistory(),routes: [{path: '/',component: () => import('../pages/myHome/MyHome'),},{path: '/home',component: () => import('../pages/myHome/MyHome'),},{path: '/cart',component: () => import('../pages/myCart/MyCart'),},{path: '/order',component: () => import('../pages/myOrder/MyOrder'),},{path: '/mine',component: () => import('../pages/mine/Mine'),},],
});export default router;

6.3引入

// main.js
import router from './router/index';
const app = createApp(App);
app.use(router);
app.mount('#app');

结束语

今天的内容讲述了如何搭建一个H5的项目，利用postcss-pxtorem和amfe-flexible做适配移动端项目，并且引入vant组件库和阿里巴巴矢量库，如何做项目的路由配置，包括一些报错问题，下章内容将讲述如何开发一个防美团项目。

今天的文章就到这里了，还有更多内容下次继续。

资料获取📚
完整代码和笔记已经准备好，如果有问题，可以在评论区留言讨论💬
原创不易，别忘了点赞👍+收藏⭐哦！
点击下方链接即可获取完整资料压缩包🎁，快来领取吧！↓↓↓↓

这篇关于仿美团H5项目实战系列- 项目整体框架搭建的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---