最近、自分自身に挑戦するために、会社からタスクを受け取り、気まぐれで新しいシステムを書きたいと言われました。新しい技術を使ってプロジェクトの枠組みを構築する予定です。ビルドには vite + vue3+ts+vant を選択しました。以下は、それを段階的に構築するプロセスです。そして、自分の血と涙で深い穴を踏んでください。(追伸: 主に新しい技術を学ぶ意欲を高めるためなので、私のプロジェクトはゼロから構築され、実行することで学習し、泣くことができます)
基本的なプロジェクトを構築するための最初のステップ
Vite は、ネイティブの ES モジュール インポート アプローチにより、コードの迅速なプロビジョニングを可能にする Web 開発ビルド ツールです。
ターミナルで次のコマンドを実行すると、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構成の第 2 ステップ (構成ファイルが多すぎるため、1 つずつ説明しません)
- 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. コミット コード仕様を構成し (チーム開発に必要)、ルート ディレクトリに 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'予防
ノードのバージョンは >12 である必要があることに注意してください。ローカルであるか、会社のサーバーにアップロードされているか
ノードのバージョンが低すぎてサポートされていないため、サーバーをアップロードしました. gitlab パッケージをアップロードすると、エラーが報告されます: モジュール 'worker_threads' が見つかりません
ファイルのディレクトリ構造は次のとおりです (残りの構成ルート (ルート キャッシュ、ガード)、使用する axios、ログイン (Feishu パスワードなしのログインを含む)、カスタム手順、およびストアの使用法はゆっくりと書き出され、アップロードされます)。後でコードが多すぎます、vue3は書き方がかなり変わりました、注意しないと穴を踏んでしまいます）
