vue3 项目篇商场之初始化项目

小小亮01

已于 2023-01-16 11:21:49 修改

阅读量876

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

于 2023-01-16 11:01:22 首次发布

本文链接：https://blog.csdn.net/weixin_43845137/article/details/128698097

版权

vue3 专栏收录该内容

51 篇文章 4 订阅

订阅专栏

该文章详细介绍了如何在Vue3项目中进行初始化设置，包括安装rem适配方案，引入字体图标，配置Sass，以及按需引入VantUI框架。同时，还展示了如何封装和使用底部导航组件。

摘要由CSDN通过智能技术生成

vue3 项目篇商场之初始化项目

1：安装 rem 适配

yarn add postcss-pxtorem@5.11 amfe-flexible -S
amfe-flexible作用
- 主要是将 1rem 设为 viewWidth / 10

src 同级目录下创建 postcss.config.js

/* 需要依赖：lib-flexible、postcss-pxtorem */
module.exports = {
  plugins: {
      autoprefixer: {},
      "postcss-pxtorem": {
          rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
          propList: ["*"],
      },
  },
};

main.ts

import 'amfe-flexible'

2 :使用字体图标

加字体图标（ Symbol 这个选项）

在这里插入图片描述

public / index.html

<script src="http://at.alicdn.com/t/c/font_3864675_2kcifc1fytt.js"></script>

使用

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

效果

在这里插入图片描述

3 sass

yarn add scss sass-loader

4：vant3引入按需引入 ( 非 vite )

yarn add i vant@next -S
安装：`npm i babel-plugin-import -D
安装：`yarn add unplugin-auto-import -D

4-1 babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

4-2 src同级目录创建 config / vant.config.js

import "vant/lib/index.css";
import { Button } from "vant";
const componnets = [Button];
export function vant(app) {
  componnets.forEach((item) => {
    app.use(item);
  });
}

4-3 main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "amfe-flexible"; // 引入rem适配
import "./assets/css/reset.css"; // 重置样式

// import "vant/lib/index.css"; // 全局引入
// import { Button } from 'vant';  // 全局引入

const app = createApp(App);
import { vant } from "@/config/vant.config.js";
vant(app);
// createApp(App).use(store).use(router).mount("#app");
app.use(store).use(router).mount("#app");

4.4 shims-vue.d.ts

由于main.ts 引入js 会报错，需要添加 declare module ‘*.js’

/* eslint-disable */
declare module '*.vue' {
  declare module '@'

  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module '*.js'

5 底部组件的封装

compontes / Footer.vue

<template>
  <div class="footer">
    <div class="footer-item">
      <router-link to="/home" class="nav-link" active-class="nav-active"
        ><van-icon name="wap-home-o" size="30" />首页</router-link
      >
    </div>
    <div class="footer-item">
      <router-link to="/cart" class="nav-link" active-class="nav-active"
        ><van-icon name="shopping-cart-o" size="30" />购物车</router-link
      >
    </div>
    <div class="footer-item">
      <router-link to="/order" class="nav-link" active-class="nav-active"
        ><van-icon name="comment-o" size="30" />订单</router-link
      >
    </div>
    <div class="footer-item">
      <router-link to="/mine" class="nav-link" active-class="nav-active"
        ><van-icon name="friends-o" size="30" />我的</router-link
      >
    </div>
  </div>
</template>

<script setup lang="ts" name="Footer">
import {} from "vue";
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  background: #fff;
  border-top: 0.5px solid #ccc;
  .footer-item {
    flex: 1;
    .nav-link {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #000;
    }
    .nav-active {
      color: red;
    }
  }
}
</style>

使用组件

<template>
  <div class="home">
    home
    <div class="content">
      内容
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup lang="ts" name='Home'>
import { } from 'vue'
import Footer from "@/components/Footer.vue"
</script>

<style  lang="scss" scoped>
.home {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow: auto;
  }
}
</style>