去哪了项目总结

一：拿到项目先看有哪些功能需要去实现、以及用到哪些插件需要安装下载

二：创建webpack项目 以及配置文件内容、因这个项目用到字体图标所以接下来说下字体图标的引入及使用

- 在src目录下新建文件夹assels    在这个文件夹下新建style来存放有关的数据   以及我们要使用的字体图标

三：字体图标的引入及使用

第一步：拷贝项目下面生成的 @font-face
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1654139546444') format('woff2'),
       url('iconfont.woff?t=1654139546444') format('woff'),
       url('iconfont.ttf?t=1654139546444') format('truetype');
}

第二步：定义使用 iconfont 的样式
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">&#x33;</span>
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

四：配置以及引入一些插件

这些都要在min.js 里面引入欧

// 统一的样式
import "./assets/styles/reset.css"
// 字体图标
import "./assets/styles/iconfont.css"
// 解决1px边框问题
import "./assets/styles/border.css"
// 移动端300毫秒延迟
import fastClick from 'fastclick'

五：配置路由

我们在ruoter里面配置路由的跳转

routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import("@/pages/home/Home.vue")
    }, {
      path: '/city',
      name: 'City',
      component: () => import("@/pages/city/City.vue")
    }, {
      path: '/detail',
      name: 'Detail',
      component: () => import("@/pages/detail/Detail.vue")
    },
  ]

六：在src下新建pages来存放要书写的代码 新建city、home、detail一些页面 在home里面我们需要引入一些子组件 在子组件来体现我们所需要的效果 从而实现给客户 在detail页面来显示我们的详情数据 在city来显示要切换我们的城市数据 从而来实现整个代码的全部内容及作用

七：以上总结可能不完善 我们稍后在进行补充 谢谢观看