随手记

以上完成 ，输入不同路径就可以跳转到对应页面了。2、新建文件：src/routes.ts。3、新建文件：src/index.ts。5、app.vue 中加入代码。4、main.ts 引入。

2、新建 src/store/index.ts。3、引入：main.ts。

1、安装：pnpm install -D vite-plugin-mock mockjs。根目录下新建文件mock/user.ts。2、vite.config.ts 配置文件启用插件。3、模拟mock数据与接口。

1、新建存放全局组件插件的文件：src/components/SvgIcon/index.vue。2、配置全局ts代码：src/components/index.ts。注册全局组件的方法，可直接在组件中使用，无需引入！4、页面中使用：若有参数，传入指定参数即可。3、在main.ts中加入以下代码。

2、新建文件： src/components/Icon/index.ts 【全局导出】1、新建文件： src/components/Icon/src/Icon.vue。

svg图片比img 要小很多，几乎不占项目的资源。

按需引入可以帮助你减少最终打包文件的大小，提高项目加载速度。完整导入会更方便，但是打包后的文件大小相对来说会比较大；4、在main.ts中引入样式。1、使用包管理器进行安装。2、 按需引入还需要安装。

顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试。项目根目录分别添加 开发、生产和测试环境的文件!3、.env.prod 【生产环境】开发环境（development）1、.env.dev 【开发环境】2、.env.test【测试环境】

【代码】三、vue3+ts 根路径 src 与types 别名配置。

stylelint是css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。官网:https://stylelint.bootcss.com/3、根目录下新建忽略文件：【.stylelintignore】2、根目录下新建配置文件【.stylelintrc.cjs】

eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言；2.3、根目录新建文件：【 .prettierignore】忽略文件并添加以下内容。2.2、根目录新建文件 ：【.prettierrc.json】，添加以下内容。

2.1、vue3安装环境代码校验插件 ，让与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查。1、执行命令，生成.eslint.cjs初始化文件。二、初始化配置文件 【.eslint.cjs】

pnpm]由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。被誉为“最先进的包管理工具”本项目使用vite进行构建，vite官方中文文档参考：(https://cn.vitejs.dev/guide/)按步骤输入 项目名称、框架(vue)、语言(Typescript)。运行【 pnpm run dev 】 运行项目。执行命令 【 pnpm i 】安装全部依赖；2.2、进入根目录下。