第一次使用 mpx，这是滴滴公司出的小程序多端框架，特点是可以使用 vue 开发，又能使用原生的小程序组件，并且还支持css原子类。
但是在搭建项目的时候，在格式化的时候出现很多问题。同时css 的代码提示也有问题。
解决了很久，基本都解决了。下面是我的配置。
package.json
{
"name": "mpx-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "mpx-cli-service serve",
"build": "mpx-cli-service build",
"lint": "eslint --ext .js,.ts,.mpx src/"
},
"dependencies": {
"@mpxjs/api-proxy": "^2.9.0",
"@mpxjs/core": "^2.9.0",
"@mpxjs/fetch": "^2.9.0",
"@mpxjs/pinia": "^2.9.0",
"@mpxjs/store": "^2.9.0",
"@mpxjs/utils": "^2.9.0",
"pinia": "^2.0.14",
"sass": "^1.77.6",
"tdesign-miniprogram": "^1.4.4",
"vue": "^2.7.0",
"vue-demi": "^0.14.6",
"vue-i18n": "^8.27.2",
"vue-i18n-bridge": "^9.2.2",
"vue-router": "^3.1.3"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/runtime-corejs3": "^7.10.4",
"@mpxjs/babel-plugin-inject-page-events": "^2.9.0",
"@mpxjs/eslint-config-ts": "^1.0.5",
"@mpxjs/mpx-cli-service": "^2.0.0",
"@mpxjs/size-report": "^2.9.0",
"@mpxjs/unocss-base": "^2.9.0",
"@mpxjs/unocss-plugin": "^2.9.0",
"@mpxjs/vue-cli-plugin-mpx": "^2.0.0",
"@mpxjs/vue-cli-plugin-mpx-eslint": "^2.0.0",
"@mpxjs/vue-cli-plugin-mpx-typescript": "^2.0.0",
"@mpxjs/vue-cli-plugin-mpx-utility-first-css": "^2.0.0",
"@mpxjs/webpack-plugin": "^2.9.0",
"@vue/cli-service": "~5.0.0",
"autoprefixer": "^10.4.19",
"eslint": "^8.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"postcss": "^8.4.39",
"prettier": "2.8.8",
"sass-loader": "^14.2.1",
"typescript": "^4.1.3",
"webpack": "^5.43.0"
},
"browserslist": [
"ios >= 8",
"chrome >= 47"
]
}
.prettierrc
{
"semi": false,
"trailingComma": "none",
"singleQuote": true,
"tabWidth": 2,
"useTabs": false
}
.eslintrc.js
module.exports = {
root: true,
extends: [
'@mpxjs/eslint-config-ts',
'prettier' // 确保 prettier 配置生效
],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error', // 使用 prettier 的规则
semi: ['error', 'never'],
'comma-dangle': ['error', 'never'],
quotes: ['error', 'single'],
indent: ['error', 2]
},
overrides: [
{
files: ['**/*.ts'],
rules: {
'@typescript-eslint/semi': ['error', 'never'],
'@typescript-eslint/comma-dangle': ['error', 'never'],
'@typescript-eslint/quotes': ['error', 'single'],
'@typescript-eslint/indent': ['error', 2]
}
},
{
files: ['**/*.js'],
rules: {
semi: ['error', 'never'],
'comma-dangle': ['error', 'never'],
quotes: ['error', 'single'],
indent: ['error', 2]
}
}
]
}
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
outputDir: `dist/${process.env.MPX_CURRENT_TARGET_MODE}`,
pluginOptions: {
mpx: {
plugin: {
srcMode: 'wx',
hackResolveBuildDependencies: ({ files, resolveDependencies }) => {
const path = require('path')
const packageJSONPath = path.resolve('package.json')
if (files.has(packageJSONPath)) files.delete(packageJSONPath)
if (resolveDependencies.files.has(packageJSONPath)) {
resolveDependencies.files.delete(packageJSONPath)
}
}
},
loader: {},
unocss: {}
}
}
})
vscode 的settings.json的配置
自己对照着看。
{
"editor.fontSize": 24,
"easysass.compileAfterSave": true,
"easysass.excludeRegex": "_",
"easysass.formats": [
{
"format": "compact",
"extension": ".min.css"
}
],
"easysass.targetDir": "./css/",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.mpx": "mpx"
},
"emmet.includeLanguages": {
"wxml": "html",
"mpx": "html"
},
"minapp-vscode.disableAutoConfig": true,
"wxmlConfig.onSaveFormat": true,
"git.autofetch": true,
"editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"explorer.confirmDelete": false,
"workbench.iconTheme": "vscode-icons",
"previewServer.port": 5500,
"vsicons.dontShowNewVersionMessage": true,
"git.enableSmartCommit": true,
"workbench.sideBar.location": "right",
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"winopacity.opacity": 230,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.port": 5500,
"mssql.connections": [
{
"server": "{{put-server-name-here}}",
"database": "{{put-database-name-here}}",
"user": "{{put-username-here}}",
"password": ""
}
],
"workbench.colorTheme": "One Dark Pro",
"tabnine.experimentalAutoImports": true,
"security.workspace.trust.untrustedFiles": "open",
"vscode-edge-devtools.mirrorEdits": true,
"editor.inlineSuggest.enabled": true,
"github.copilot.enable": {
"*": true,
"plaintext": true,
"markdown": true,
"scminput": false,
"yaml": false,
"php": true,
"code-runner-output": false,
"javascript": true
},
"tailwindCSS.includeLanguages": {
"wxml": "html",
"vue": "html",
"mpx": "html"
},
"vetur.validation.template": false,
"terminal.integrated.env.osx": {
"FIG_NEW_SESSION": "1"
},
"javascript.updateImportsOnFileMove.enabled": "never",
"errorLens.excludeBySource": ["ts(7006)"],
"Codegeex.Privacy": true,
"Codegeex.EnableExtension": true,
"diffEditor.ignoreTrimWhitespace": false,
"code-runner.executorMap": {
"javascript": "node",
"java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
"c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"zig": "zig run",
"cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"php": "php",
"python": "python3 -u",
"perl": "perl",
"perl6": "perl6",
"ruby": "ruby",
"go": "go run",
"lua": "lua",
"groovy": "groovy",
"powershell": "powershell -ExecutionPolicy ByPass -File",
"bat": "cmd /c",
"shellscript": "bash",
"fsharp": "fsi",
"csharp": "scriptcs",
"vbscript": "cscript //Nologo",
"typescript": "ts-node",
"coffeescript": "coffee",
"scala": "scala",
"swift": "swift",
"julia": "julia",
"crystal": "crystal",
"ocaml": "ocaml",
"r": "Rscript",
"applescript": "osascript",
"clojure": "lein exec",
"haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
"rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
"racket": "racket",
"scheme": "csi -script",
"ahk": "autohotkey",
"autoit": "autoit3",
"dart": "dart",
"pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
"d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
"haskell": "runghc",
"nim": "nim compile --verbosity:0 --hints:off --run",
"lisp": "sbcl --script",
"kit": "kitc --run",
"v": "v run",
"sass": "sass --style expanded",
"scss": "scss --style expanded",
"less": "cd $dir && lessc $fileName $fileNameWithoutExt.css",
"FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"sml": "cd $dir && sml $fileName",
"mojo": "mojo run"
},
"code-runner.executorMapByFileExtension": {
".vb": "cd $dir && vbc /nologo $fileName && $dir$fileNameWithoutExt",
".vbs": "cscript //Nologo",
".scala": "scala",
".jl": "julia",
".cr": "crystal",
".ml": "ocaml",
".zig": "zig run",
".exs": "elixir",
".hx": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
".rkt": "racket",
".scm": "csi -script",
".ahk": "autohotkey",
".au3": "autoit3",
".kt": "cd $dir && kotlinc $fileName -include-runtime -d $fileNameWithoutExt.jar && java -jar $fileNameWithoutExt.jar",
".kts": "kotlinc -script",
".dart": "dart",
".pas": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
".pp": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
".d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
".hs": "runhaskell",
".nim": "nim compile --verbosity:0 --hints:off --run",
".csproj": "dotnet run --project",
".fsproj": "dotnet run --project",
".lisp": "sbcl --script",
".kit": "kitc --run",
".v": "v run",
".vsh": "v run",
".sass": "sass --style expanded",
".cu": "cd $dir && nvcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
".ring": "ring",
".sml": "cd $dir && sml $fileName",
".mojo": "mojo run"
},
"code-runner.executorMapByGlob": {
"pom.xml": "cd $dir && mvn clean package"
},
"code-runner.languageIdToFileExtensionMap": {
"bat": ".bat",
"powershell": ".ps1",
"typescript": ".ts"
},
"security.promptForLocalFileProtocolHandling": false,
"remote.extensionKind": {
"GitHub.copilot": ["ui"],
"github.copilot-chat": ["ui"]
},
"Lingma.localMachineModel": false,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"Lingma.cloudModelAutoTriggerGenerateLength": "disable",
"Lingma.LocalStoragePath": "/Users/zhebaoting/.lingma",
"github.copilot.editor.enableAutoCompletions": true,
"prettier.useEditorConfig": false,
"prettier.requireConfig": true,
"editor.fontVariations": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"mpx.format.defaultFormatter.html": "prettier",
"mpx.format.defaultFormatter.css": "prettier",
"mpx.format.defaultFormatter.scss": "prettier",
"mpx.format.defaultFormatter.less": "prettier",
"mpx.format.defaultFormatter.stylus": "stylus-supremacy",
"mpx.format.defaultFormatter.js": "prettier",
"mpx.format.defaultFormatter.ts": "prettier",
"mpx.format.defaultFormatter.json": "prettier",
"mpx.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
},
"prettier": {
"printWidth": 100,
"singleQuote": true,
"wrapAttributes": false,
"sortAttributes": false,
"semi": false,
"insertSpaceBeforeFunctionParenthesis": true
},
"stylus-supremacy": {
"insertColons": false,
"insertSemicolons": false,
"insertBraces": false,
"insertNewLineAroundImports": true,
"insertNewLineAroundBlocks": false
}
},
"notebook.defaultFormatter": "esbenp.prettier-vscode",
"mpx.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
},
"[mpx]": {
"editor.defaultFormatter": "pagnkelly.mpx"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"mpx"
],
"tailwindCSS.experimental.classRegex": [],
"editor.formatOnSave": true,
"unocss.exclude": [],
"unocss.root": []
}
提供