硅谷甄选项目笔记(vue3+ts)

1、初始化项目

npm create vite

npm install

2、eslint配置

“script"{ "dev":"dev --open"#自动打开浏览器 }

安装eslint

npm i eslint -D

eslint初始化

npm eslint --init

配置文件

.eslintrc.cjs

安装代码检验插件

npm install -Deslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

3、配置prettier

.prettierrc.json

.prettierignore

4、配置styleLint

.stylelintrc.json

.stylelintignore

5、配置husky

6、配置commitLint

7、统一包管理工具

8、element-plus集成

pnpm install element-plus

9、src别名配置

// vite.config.ts

10、项目环境变量配置

.env.development .env.production .env.test

11、配置SVG图标

pnpm install vite-plugin-svg-icons -D

vite.config.ts中配置插件

```
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}
```

入口文件引入

```
import 'virtual:svg-icons-register'
```

svg封装为全局组件

12、集成scss

13、配置mock

npm官网查看配置项

14、axios二次封装

添加请求和响应拦截器

15、API统一接口管理

每个接口的携带及返回数据都要统一定义类型

16、模版路由配置

• app.use(router)必须放在app.mount('#app')前边

13、集成仓库pinia

14、面包屑动态展示

利用$route.matched获取匹配路由

15、刷新业务实现

利用仓库传递数据

利用v-if控制组件的销毁

利用nextTick重新创建组件达到刷新的效果

16、全屏模式切换

1）原生方法（Chrome）

document.fullscreenElement判断是否全屏

document.documentElement.requestFullscreen()打开全屏模式

document.exitFullscreen()退出全屏模式

2）使用插件

vue-fullscreen

@vueuse/core

17、token的理解与退出登陆

token是后端返回的用户唯一标识

退出token

1）清除本地token 2）告诉后端 3）返回登陆页

18、路由鉴权和进度条

创建permission.ts文件配置全局路由守卫 19、

20、暗黑模式和定制颜色

elementplus自带配置

通过获取根节点并改变其属性控制全局样式

（持久化？）

21、数据大屏

大屏适配解决方案

1）vw与vh

2)通过js计算scale

动态时间展示

插件moment+定时器。 npm i moment

echarts拓展水球图 liquidFill (npm 官网搜相应API文档）

22、菜单权限实现

引用深拷贝 lodash/cloneDeep

21、按钮权限

使用全局自定义指令