一、涉及到的相关依…参与公司项目开发一段时间了项目用到了很多新的技术vite,vue3,ts等等但是框架都是别人搭好的然后就想说如果是自己的话会从零搭建一个吗于是就有了这篇文章。

二、项目创建

^20.10.3,typescript-eslint/eslint-plugin:

^6.13.2,typescript-eslint/parser:

^3.1.0,consola:

^8.55.0,eslint-config-prettier:

^9.19.2,less:

^5.0.0,vite-plugin-style-import:

^2.0.0,vite-require:

本人用的node版本是16.10.0的根据vite官方文档运行如下命令然后根据提示创建即可

├─public

vite配置文件这样的配置显然是不够的下面就需要我们进行其他的项目配置了。

三、项目配置

首先需要安装官方维护的vite插件vitejs/plugin-vue-jsx,这个插件其实核心还是vue/babel-plugin-jsx,只是在这个插件上封装了一层供vite插件调用。

vue

jsx语法规范

-D安装完之后在vite.config.ts进行插件使用代码如下

import

});后面就可以把目录中的app.vue、HelloWorld.vue以及shims.vue.d.ts这三个文件删除了因为后面我们就只需要写tsx文件了。

import

这里做个小优化一般项目都会有开发环境测试环境线上环境等所以我们可以在项目根目录下新增三个文件.env.dev.env.alpha.env.prod分别代表上面三个环境然后在文件中配置各自的端口号和服务地址

import

envPrefix)console.log(envConfig,

envConfig)return

Number(envConfig.VUE_APP_DEV_PORT),proxy:

{/server-api:

envConfig.VUE_APP_SERVER,changeOrigin:

true}}},define:

然后就可以通过运行对应命令在本地快速启动并代理到各自的环境而不用每次修改服务地址。

3.2、路径别名配置

路径别名同样需要在vite.config.ts中配置此时具体配置如下

import

envPrefix)console.log(envConfig,

envConfig)return

Number(envConfig.VUE_APP_DEV_PORT),proxy:

{/server-api:

envConfig.VUE_APP_SERVER,changeOrigin:

true}}},resolve:

})此时在项目中就可以直接使用新的路径别名了使用vscode可能会没有路径提示这个时候只需要在jsconfig.json/tsconfig.json配置paths和baseUrl就会出现路径提示了具体如下

{compilerOptions:

插件但必须安装相应的预处理器依赖依赖安装完项目就可以直接解析less文件了。

npm

可以在tsx文件下新建index.module.less文件然后tsx页面中引入直接使用如下

.page_title

请注意路由一定得安装4.0.0以上版本最好直接安装当前最新版本。

vue-router

vue-router4.2.5然后在src下新建router和view等文件和文件夹

import

}接着在main.ts这个入口文件中插件的方式通过vue引入就可以了

import

./AppcreateApp(App).use(router).mount(#app)

import

to{/user}用户中心/RouterLink/divRouterView

//div)}}

请注意vuex也得安装4.0.0及以上版本最好直接安装当前最新版本。

跟上面router一样查看下最新版本然后直接安装

npm

createStoreStoreState({modules:

})export

./storecreateApp(App).use(store,

STORE_KEY).use(router).mount(#app)

解决方法在vite.env.d.ts里面声明vuex导出其声明文件路径

declare

envPrefix)console.log(envConfig,

envConfig)return

Number(envConfig.VUE_APP_DEV_PORT),proxy:

{/server-api:

envConfig.VUE_APP_SERVER,changeOrigin:

true}}},//

ant-desgin/icons-vue]},resolve:

{alias:

兼容vite不支持requireviteRequire(),createStyleImportPlugin({resolves:

import

1、引入antd-design-vue组件后点击按钮报错Uncaught

TypeError:

解决方法看博客说是vue3.2.13和antd4.0.7版本不兼容然后就把4换成3了antd换成3的后运行又报错了原来按需加载样式vite-plugin-style-import配置后还要在vite.cofing.ts里面配置css

css:

增加eslint用来规范Typescript以及vue代码首先安装相关依赖

npm

typescript-eslint/eslint-plugin

eslint:

ESLint的核心代码eslint-plugin-vueESLint关于检测vue代码规范的插件typescript-eslint/parserESLint的解析器用于解析typescript从而检查和规范Typescript代码typescript-eslint/eslint-plugin这是一个ESLint插件包含了各类定义好的检测Typescript代码的规范

结合Prettier和Eslint

prettierprettier插件的核心代码eslint-config-prettier解决ESLint中的样式规范和prettier中样式规范的冲突以prettier的样式规范为准使ESLint中的样式规范自动失效eslint-plugin-prettier将prettier作为ESLint规范来使用

依赖装好之后便可以开始相关文件的配置工作了首先在项目根目录新增.eslintrc.js文件

这个地方遇到了一个坑如果eslint-config-prettier版本号在8.0.0以上则在.eslintrc.js配置extends中不需要再新增

这个配置否则执

vue-eslint-parser,parserOptions:

{parser:

[plugin:vue/vue3-recommended,plugin:typescript-eslint/recommended,plugin:prettier/recommended],rules:

{typescript-eslint/no-explicit-any:

off,vue/multi-word-component-names:

off,}

紧接着增加prettier配置再在项目根目录中新增.prettierrc.js文件

https://prettier.io/docs/en/options.html

const

preserve,htmlWhitespaceSensitivity:

strict,endOfLine:

auto,embeddedLanguageFormatting:

auto,

做到这里eslint除了脚本配置之外就配置完成了现在只需在package.json中配置好脚本命令就完成了整个eslint的配置工作了。

{...scripts:

增加skipLibCheck可以跳过引入库的ts检查serve:

vite

解决方法把package.json的type去掉方案参考https://www.cnblogs.com/tudou1179006580/p/17698047.html

从新执行npm