快速上手vite+vue3+pinia+vue-router+vant移动端应用

技术简介：

1. pnpm： performant npm (高性能的 npm) ，Javascript包管理安装工具， 节约磁盘空间并提升安装速度
2. vite: 前端开发与构建工具
3. vue3: 
4. pinia:  状态管理工具
5. vue-router:  路由
6. vant: Vant 是一个轻量、可定制的移动端组件库
7. Eslint: 代码开发工具，能够协调和统一团队的编码风格
8. prettier: 代码格式化工具,能够使输出代码保持风格一致
9. husky: 操作git hook的工具，主要实现代码提交前 eslint 校验和 commit 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突
10. lint-staged: 可以在git staged阶段的文件上执行Linters。也就是只对git add之后的暂存区代码进行校验。可以通过配置文件来指定对不同的文件执行不同的检验。
11. commitlint: 要是对提交信息Commit Message的检查。是一款检查工具和husky一起配合使用。只有当提交信息符合规则的时候，才能够提交。
12. axios封装
13. 环境变量配置

安装使用pnpm

全局安装 pnpm

npm i pnpm -g

查看pnpm版本

pnpm -v

升级pnpm

pnpm add -g pnpm to update

pnpm 创建vite+vue3应用

pnpm create vite

// 进入vite-project文件夹
cd vite-project
// 安装node依赖
pnpm install  || pnpm i
// 运行项目
pnpm run dev 

引用pinia状态管理工具

安装pinia

pnpm i pinia

安装成功 

 在src根目录中创建store目录

创建store.js

import { defineStore } from "pinia";

// 公用模块相关状态管理
const useMainStore = defineStore("main", {
  state: () => {
    return { user: null };
  },
  actions: {
    getUserInfo() {
      // 获取用户信息
    }
  }
});

export default useMainStore;

 这里将状态管理进行了模块划分，由store/index.js统一输出

创建store/index.js

import useDictStore from "./modules/dict";
import useMainStore from "./modules/main";
import useOrderStore from "./modules/order";

export { useDictStore, useMainStore, useOrderStore };

 在main.js中将pinia挂载到vue实例上

import { createApp } from 'vue'
// 引入pinia
import { createPinia } from "pinia";
import './style.css'
import App from './App.vue'

// 创建pinia
const pinia = createPinia();

// 使用
createApp(App).use(pinia).mount('#app')

组件中使用store，改造下HelloWorld 组件

<script setup>
import { useMainStore } from "../store";
const { user } = useMainStore();
</script>

<template>
  <div>
    My name is {
  { user.name }},and I im a handsome boy. I im {
  { user.age }} years old this year.
  </div>
</template>

引用vue-router路由

安装vue-router依赖

pnpm i vue-router

安装成功 

 安装依赖成功后都会在package.json中进行记录

构建vue-router模块࿰