Vue3/Typescript项目创建的前置工作

1).使用 create-vue 脚手架创建项目

    npm i pnpm -g
    pnpm create vue

2).vscode插件配置

安装：

1. Vue Language Features (Volar) vue3语法支持
2. TypeScript Vue Plugin (Volar) vue3中更好的ts提示

禁用：
Prettier 和 @builtin中默认的ts、js语法格式，避免冲突

3).eslint 预制配置

配置.eslintrc.cjs文件

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        printWidth: 80,
        trailingComma: 'none',
        endOfLine: 'auto'
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index']
      }
    ],
    'vue/no-setup-props-destructure': ['off'],
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }
}

4).git工作流检查

（如果需要提交git检查代码的话 可以安装husky管理）

 1.下载安装 husky 管理
  pnpm dlx husky-init && pnpm install

2.初始化 git init

 3.lint-staged 配置 --- 只检查暂存区的代码
   pnpm i lint-staged -D

配置 package.json文件
 "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }

  "scripts": {
    // ......
    "lint-staged": "lint-staged"
  }

5).下载css预处理器

 项目使用sass预处理器，安装sass
  pnpm add sass -D

6).Vue3中的路由创建分析

a.调用 createRouter 函数创建路由
  const router =  createRouter（{ //配置路由 }）
b.配置路由模式： 
   history: createWebHistory(import.meta.env.BASE_URL）
c.BASE_URL 在 vite.config.ts 中配置，默认是 '/',可以指定路由前缀

7).安装引入 vant 组件库

a.安装
  pnpm add vant 
b.引入全局样式（全局样式需要放在本地样式之前，不然会覆盖）
  import 'vant/lib/index.css' 
c.组件按需引入 （减小项目体积）查看vant官网说明

8).移动端适配

a.安装插件自动适配
  pnpm add -D postcss-px-to-viewport 
b.配置 postcss.config.js 文件

 // eslint-disable-next-line no-undef
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 设备宽度375计算vw的值
      viewportWidth: 375
    }
  }
}

注意行内样式不能自动适配！！！

9).css变量主题定制

自定义修改vant主题

a.定义：--变量：样式属性值
b.使用：样式属性名：var(--变量)
c.注意：css变量有作用域， ：root{}是根级作用域