仿美团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组件库和阿里巴巴矢量库，如何做项目的路由配置，包括一些报错问题，下章内容将讲述如何开发一个防美团项目。

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

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