最近为了挑战自己，接到公司任务，说要写一个新的系统，心血来潮。就打算用新的技术来搭建一个项目框架。选用了vite + vue3+ts+vant 来搭建。以下是自己一步一步搭建的过程。以及用自己的血泪踩得深坑。（PS:主要是为了激励自己学习新的技术，所以我的项目是从零开始搭建的，边做边学，哭唧唧）
第一步 搭建基础的项目
Vite?是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
参考文档：https://vue3js.cn/docs/zh/guide/installation.html#vite
使用 npm：
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev第二步 配置（配置文件太多就不一个一个解释了）
- package.json配置（按需安装依赖）
{
"name": "myProject",
"version": "0.0.0",
"private": true,
"scripts": { // 指令配置
"dev": "vite",
"dev:remote": "vite --mode remote",
"build:dev": "vite build --mode development",
"build:prod": "vite build --mode production",
"build:stage": "vite build --mode staging", // 打包指令配置
"lint": "vuedx-typecheck . && vite build",
"build": "vite build" // 打包指令配置
},
"dependencies": { // 依赖
"axios": "^0.21.1", // 请求接口
"core-js": "^3.15.2",
"fs-extra": "^10.0.0",
"js-pinyin": "^0.1.9",
"vant": "^3.1.3",
"vue": "^3.0.4",
"vue-i18n": "^9.1.7",
"vue-router": "4.0",
"vuex": "4.0"
},
"devDependencies": {
"@commitlint/cli": "^12.1.4",// commit 规范化（
"@commitlint/config-conventional": "^12.1.4",// commit 规范化
"@types/node": "^16.4.0", // typescripty // @types/node模块可以整体解决模块的声明文件问题
"@typescript-eslint/eslint-plugin": "^4.28.3", // ts的eslin配置
"@typescript-eslint/parser": "^4.28.3",// ts的eslin配置
"@vitejs/plugin-vue": "^1.2.5", //使用.vue文件
"@vitejs/plugin-vue-jsx": "^1.1.6",//支持 Vue 3 JSX & TSX
"@vue/compiler-sfc": "^3.0.7",
"@vuedx/typecheck": "^0.7.4",
"@vuedx/typescript-plugin-vue": "^0.7.4",
"eslint": "^7.30.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.13.0",
"less": "^4.1.1",
"lint-staged": "^11.0.1",// 规范和约束要提交的代码
"postcss-px-to-viewport": "^1.1.1", //px转换成视口单位vw（手机端自适应，推荐）
"prettier": "^2.3.2",
"typescript": "^4.3.5",
"vite": "^2.4.2"
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx,json,md}": [
"prettier --config .prettierrc --write",
"eslint --fix",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}
2.配置vite.config.ts文件（没有就在项目目录下在新建一个）
import?{?defineConfig?}?from?'vite'
import?vue?from?'@vitejs/plugin-vue'
import?vueJsx?from?'@vitejs/plugin-vue-jsx'
import??{?resolve?}?from?'path'
/*?路径方法?*/
const?pathResolver?=?(pathStr:?string):?string?=>?{
????return?resolve(__dirname,?'.',?pathStr); // 识别 ./目录
};
const?port?=?8080 // 设置端口
export?default?defineConfig({
????base:?'./',
????resolve:?{
????????alias:?{
????????????'@':?pathResolver('./src'),?// 识别 @
????????},
????},
????server:?{
????????open:?false,
????????https:?false,
????????proxy:?{ // 反向代理
????????????'/dev/':?{
??????????????target:?`http://localhost:${port}/mock`,
??????????????changeOrigin:?true,????????
? ? ? ? ? ? ? ?// vue3的写法，替代pathRewrite
??????????????rewrite:(path)?=>?path.replace(`/^${import.meta.env.VITE_APP_BASE_URL}/`,'')
????????????}
????},
????build:?{
????????terserOptions:?{
????????????compress:?{
????????????????keep_infinity:?true,
????????????????drop_console:?true,
????????????????drop_debugger:?true,
????????????},
????????},
????????brotliSize:?false,
????????chunkSizeWarningLimit:?1200,
????},
????plugins:?[?vueJsx(),vue()], // 使用vue?
????css:?{
????????preprocessorOptions:?{ // 配置less
????????????less:?{
????????????????modifyVars:?{
????????????????????hack:?`true;?@import?(reference)?"@/styles/index.less";`,
????????????????},
????????????????javascriptEnabled:?true,
????????????},
????????},
????},
});
?3.配置tsconfig.json（在根目录在创建）
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"experimentalDecorators": true,
"lib": ["esnext", "dom"],
"types": ["vite/client", "node"],
"incremental": true,
"noImplicitAny": false,
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"plugins": [{ "name": "@vuedx/typescript-plugin-vue" }]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/sfc.d.ts", "src/router/hook"],
"exclude": ["node_modules", "dist", "**/*.js"]
}
4.配置postcss(安装postcss-px-to-viewport,手机端才需要转化)， 根目录下创建postcss.config.js文件
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 3,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['ignore-'],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568,
},
},
};
5.配置commit代码规范（团队开发需要）在根目录下创建commitlint.config.js（安装有@commitlint/cli依赖才需要）
module.exports = {
ignores: [(commit) => commit.includes('init')],
extends: ['@commitlint/config-conventional'],
parserPreset: {
parserOpts: {
headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
headerCorrespondence: ['type', 'scope', 'subject'],
referenceActions: [
'close',
'closes',
'closed',
'fix',
'fixes',
'fixed',
'resolve',
'resolves',
'resolved',
],
issuePrefixes: ['#'],
noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
fieldPattern: /^-(.*?)-$/,
revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
revertCorrespondence: ['header', 'hash'],
warn() {},
mergePattern: null,
mergeCorrespondence: null,
},
},
rules: {
'body-leading-blank': [2, 'always'],
'footer-leading-blank': [1, 'always'],
'header-max-length': [2, 'always', 108],
'subject-empty': [2, 'never'],
'type-empty': [2, 'never'],
'type-enum': [
2,
'always',
[
'feat', // 增加新功能
'fix', // 修复问题/BUG
'docs', // 文档/注释
'style', // 代码风格相关无影响运行结果的
'refactor', // 重构
'test', // 测试相关
'revert', // 回滚某个更早之前的提交
'perf', // 优化/性能提升
'merge', // 分支合并
'chore', // 依赖更新/脚手架配置修改等
'types', // 类型定义文件更改
'ci', // 持续集成
],
],
},
};
6.eslint配置（根目录下创建.eslintrc.js）
module.exports = {
root: true,
env: {
node: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
rules: {
'no-console': import.meta.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': import.meta.env.NODE_ENV === 'production' ? 'warn' : 'off',
'@typescript-eslint/no-explicit-any': ['off'],
'@typescript-eslint/no-empty-function': ['off'],
'@typescript-eslint/no-var-requires': ['off'],
'@typescript-eslint/explicit-module-boundary-types': ['off'],
'vue/no-multiple-template-root': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/html-self-closing': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/html-indent': 'off',
'vue/no-v-model-argument': 'off',
},
};
7.识别vue文件，引入第三方库，在src文件下面创建一个sfc.d.ts文件
/**
* 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
* 而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。
* 原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件
*/
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
/**
* 告诉 TypeScript window是个全局对象，直接可用，这样就不会在window.xx = 123时报错
*/
declare var window: any
/**
* 引入部分第三方库/自己编写的模块的时候需要额外声明文件
* 引入的时候，需要使用类似 import VueLazyLaod from 'vue-lazyload' 的写法
*/
declare module 'vue-lazyload'
declare module '@zz/perf/vue'
declare module 'raven-js'
declare module 'raven-js/plugins/vue'注意事项
注意node版本一定要>12。不管是本地还是上传到公司服务器
我们上传服务器的因为node版本太低了，不支持，上传gitlab打包报错：Cannot find module 'worker_threads'
文件的目录结构如下（剩下的配置路由（路由缓存，守卫），使用axios，登录（包含飞书免密登录），自定义指令，store的使用的会慢慢写出来的，后续还会上传代码，太多了，vue3换了很多写法，稍不留意就踩坑）
?