vue项目流程一

项目的搭建

简单来说，有多种方式，vue-cli脚手架或vite工具搭建或者自己配置，对于开发而言，讲究效率上用vite更好
使用方法： https://vitejs.cn/guide/#scaffolding-your-first-vite-project

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

配置

了解基础的配置项：

1. 查看package.json中启动与打包命令，以及需要哪些包；
2. pnpm i // 安装包
3. 运行项目，一般都是 pnpm run dev

如果可以运行就代表建立成功了，这都没什么问题！

可能存在在第二个步骤时出现问题：

.ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies
└─┬ koa-views
  └─┬ consolidate
    └── ✕ unmet peer react@^16.13.1: found 18.1.0

hint: If you don't want pnpm to fail on peer dependency issues, set the "strict-peer-dependencies" setting to "false".

问题原因：在 npm 3 中，不会再强制安装 peerDependencies （对等依赖）中所指定的包，而是通过警告的方式来提示我们。pnpm 会在全局缓存已经下载过的依赖包，如果全局缓存的依赖版本与项目 package.json 中指定的版本不一致，就会出现这种 hint 警告。

问题解决方案：

1. 在项目的 package.json 中配置 peerDependencyRules 忽略对应的警告提示：

{
  "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": [
        "react"
      ]
    }
  }
}

2. 项目根目录下 .npmrc 中添加 （忽略错误）

strict-peer-dependencies=false

3. 自动对等依赖：项目根目录下 .npmrc 中添加

 auto-install-peers=true

其实对于这个问题主要还是需要了解安装的过程中存在一个依赖提升的机制，存在对等依赖现象：在自己的项目中安装A的同时也需要单独安装B，而且对B版本要求较高，那么问题就来了（webpack存在“对等依赖”提升到最顶层的hoist机制，为了减少包的体积），这就会导致包A去引用高版本的B，控制台报错； 后面npm7.x版本解决了这个问题，pnpm还是有，需要自己设置下！
可见： https://juejin.cn/post/6937973549726433317

其他库

vue-router: 路由跳转
pinia: 第三方状态管理
各种loader，eslint代码规划，vite.config.js进行配置，比如路径

export default defineConfig({
  // 配置路径
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "./src") }],
  },
  plugins: [vue()],
});

或者是代理等等

router

一般是这种形式：(vue3采用的都是函数式写法）

// 引入路由
import { createRouter, createWebHashHistory } from "vue-router";

// 路由配置
let routes = [
  { path: "/", component: () => import("../views/Login.vue")},
  { path: "/login", component: () => import("../views/Login.vue") },
  { path: "/home", component: () => import("../views/Home.vue") },
  { path: "/todo", component: () => import("../views/ToDo.vue") },
];

const router = createRouter({
  // vue2采用的是mode: 'hash'
  history: createWebHashHistory(),
  routes,
});
// 关于
router.beforeEach(async (to) => {

  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ["/login"];

  const authRequired = !publicPages.includes(to.path);

  // 这里采用的是通过localStorage获取，也可以是通过其他的验证方式，只是提供了一种方式
  if (authRequired && !localStorage.getItem('auth-login')) {
    alert('请先登录')
    return "/login";
  }
});
// 导出
export default router;

或者是在App.vue中

import { localGet, pathMap } from '@/utils'
// 其中 localGet 就是从存储读取，放在工具文件中
import { useRouter } from 'vue-router'
const router = useRouter()
const noMenu = ['/login']
...
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    // 如果路径是 /login 则正常执行
    next()
  } else {
    // 如果不是 /login，判断是否有 token
    if (!localGet('token')) {
      // 如果没有，则跳至登录页面
      next({ path: '/login' })
    } else {
      // 否则继续执行
      next()
    }
  }
  state.showMenu = !noMenu.includes(to.path)
  state.currentPath = to.path
  document.title = pathMap[to.name]

在 @/utils中
export function localGet (key) {
  const value = window.localStorage.getItem(key)
  try {
    return JSON.parse(window.localStorage.getItem(key))
  } catch (error) {
    return value
  }
}
export const pathMap = {
  login: '登录',
  introduce: '系统介绍',
  dashboard: '大盘数据',
  add: '添加商品',
  swiper: '轮播图配置',
  hot: '热销商品配置',
  new: '新品上线配置',
  recommend: '为你推荐配置',
  category: '分类管理',
  level2: '分类二级管理',
  level3: '分类三级管理',
  good: '商品管理',
  guest: '会员管理',
  order: '订单管理',
  order_detail: '订单详情',
  account: '修改账户'
}

这种方式也可以，推荐第二种，解耦了，方法可以共用