前端初始化+按需引入组建

作为一个优秀的开发人员，虽然我主攻是后端，但是前端知识还是要会一点的，因为目前想要自己上线一个项目。所以一个可视化的界面是必须的

脚手架初始化

什么是前端的脚手架？

随着前端工程化的概念越来越深入人心，脚手架应运而生。简单来说，「前端脚手架」就是指通过选择几个选项快速搭建项目基础代码的工具。前端脚手架可以有效避免我们 ctrl + C 和 ctrl + V 相同的代码框架和基础配置。

项目基础架构

这一块我之前还是看不懂的，但现在随着做项目的熟练后逐渐看懂了

1. package.json 是 npm 依赖管理体系下的基础配置文件。
2. 选择使用** npm 或 Yarn** 作为包管理器，这会在项目里添加上对应的 **lock **文件，来确保在不同环境下部署项目时的依赖稳定性。
3. 确定项目技术栈，在明确选择后安装相关依赖包并在 src 目录中建立入口源码文件。
4. 选择构建工具，目前的主流选择还是 webpack ，对应项目里就需要增加相关的 webpack 配置文件。（可以考虑针对开发/生产环境使用不同配置文件）
5. 打通构建流程，通过安装与配置各种 Loader 、插件和其他配置项，来确保开发和生产环境能正常构建代码和预览效果。
6. 优化构建流程，针对开发/生产环境的不同特点进行各自优化。例如，开发环境更关注构建效率和调试体验，而生产环境更关注访问性能等。
7. 选择和调试辅助工具，例如代码检查工具和单元测试工具，安装相应依赖并调试配置文件。
8. 最后是收尾工作，检查各主要环节的脚本是否工作正常，编写说明文档 README.md，将不需要纳入版本管理的文件目录记入 .gitignore 等。

package.json         1) npm 项目文件 
package-lock.json    2) npm 依赖 lock 文件 
public/              3) 预设的静态目录 
src/                 3) 源代码目录 
  main.ts            3) 源代码中的初始入口文件 
  router.ts          3) 源代码中的路由文件 
  store/             3) 源代码中的数据流模块目录 
webpack/             4) webpack 配置目录 
  common.config.js   4) webpack 通用配置文件 
  dev.config.js      4) webpack 开发环境配置文件 
  prod.config.js     4) webpack 生产环境配置文件 
.browserlistrc       5) 浏览器兼容描述 browserlist 配置文件 
babel.config.js      5) ES 转换工具 babel 配置文件 
tsconfig.json        5) TypeScript 配置文件 
postcss.config.js    5) CSS 后处理工具 postcss 配置文件 
.eslintrc            7) 代码检查工具 eslint 配置文件 
jest.config.js       7) 单元测试工具 jest 配置文件 
.gitignore           8) Git 忽略配置文件 
README.md            8) 默认文档文件

vite+vant初始化

在这个项目中我采用的脚手架就是vite,因为我采用的都是yarn去构建，但大多数推荐和有的都是npm，所以这两个都贴上来，采用一个就好了。以下所有命令都是如此。

用vite来搭建一个Vue项目：

npm create vue@latest

yarn create vite

然后根据命令行的提示继续操作，操作的目录一定要在一个你新建的空文件夹里

然后进入这个项目所在的目录，进行操作

npm install

接着组件部份是采用了vant的组件，首先要安装vant的依赖：

# Vue 3 项目，安装最新版 Vant 
npm i vant

# 通过 yarn 安装 
yarn add vant

我用的是按需引入组件样式，安装插件：

i @vant/auto-import-resolver unplugin-vue-components -D

# 通过 yarn 安装 
yarn add @vant/auto-import-resolver unplugin-vue-components -D

然后在vite.config.js文件中配置插件

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

添加导航组件

前一步完成后基本就是你想要添加什么组件按照需求自己添加就好了，后面是我自己要添加的组件

添加导航组件

首先是清空App.vue,清除HelloWord.vue，新建layout文件夹，layout文件夹要跟components文件夹同个层级

同时要记得删掉main.ts上面的样式import './style.css'

在main.ts引入：

import { createApp } from 'vue';
import { NavBar } from 'vant';

const app = createApp();
app.use(NavBar);

然后在layout下的BasicLayout.vue（这是一个通用层）添加导航栏，放在template下

<van-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

最后在App.vue中引入导航栏

<script setup lang = "ts">
import NavBar from "./layout/BasicLayout.vue"
</script>

<template>
    <NavBar />
</template>

接下来大家就可以自己快乐地按照以上顺序引入导航的顺序，快乐引入组件！

参考网址

• vite中文网
• vant3
• Vue.js