vs code+uniapp+vue3+vite+typescript+pinia开发

一、通过 vue-cli 创建 uni-app Vue3/Vite/Typescript版

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

#安装依赖包
pnpm install
#or
yarn install

#运行
pnpm run dev:%PLATFORM%
pnpm run build:%PLATFORM%
#or
yarn run dev:%PLATFORM%
yarn run build:%PLATFORM%

#文档地址
#https://uniapp.dcloud.net.cn/quickstart-cli.html

二、安装 eslint

#把 eslint 安装到 package.json 文件中的 devDependencies 中，生产不需要  
pnpm add eslint -D
#or
yarn add eslint --dev

#创建 ESLint 配置
pnpm exec eslint --init
#or
yarn create @eslint/config
#or
npx eslint --init

#文档地址
#https://eslint.nodejs.cn/docs/latest/use/getting-started

How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · yarn
☕️Installing...

三、安装 prettier

#把 prettier 安装到 package.json 文件中的 devDependencies 中，生产不需要 
#文档地址：https://prettier.io/docs/en/install 
pnpm add -D --save-exact prettier
#or
yarn add --dev --exact prettier

#配置prettierrc文件
node --eval "fs.writeFileSync('.prettierrc','{}\n')"

#禁用 ESLint 中与 Prettier 冲突的格式化规则
#文档地址：https://github.com/prettier/eslint-config-prettier#installation
pnpm  add -D  eslint-config-prettier
#or
yarn add --dev eslint-config-prettier

#将 Prettier 的规则集集成到 ESLint 中
#文档地址：https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#installation
pnpm  add -D  eslint-plugin-prettier 
#or
yarn add --dev eslint-plugin-prettier 

#配置eslint.config.js
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
export default [
  eslintPluginPrettierRecommended.configs.recommended,
];

#Vs Code 安装插件 安装Eslint插件和Prettier插件

#.prettierrc
{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": true,
    "trailingComma": "none",
    "bracketSpacing": true
}

四、安装 pinia

#文档地址：https://pinia.vuejs.org/getting-started.html
pnpm add pinia
#or
yarn add pinia

#pinia 数据持久化
#文档地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
pnpm add pinia-plugin-persistedstate
#or
yarn add pinia-plugin-persistedstate

#在main.js中进行配置，并设置 uniapp 存储在 uniStorage

import { createPinia } from "pinia";
import { createPersistedState } from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(
    createPersistedState({
        storage: {
            getItem: uni.getStorageSync,
            setItem: uni.setStorageSync
        }
    })
);

export function createApp() {
    const app = createSSRApp(App);
    app.use(pinia);
    return {
        app
    };
}

五、配置vs code

#在根目录创建以下文件
.vscode\settings.json

#添加以下配置
{
    // 保存自动格式化
    "editor.formatOnSave": true,
    //解决Json注释问题
    "files.associations": {
        "pages.json": "jsonc",
        "manifest.json": "jsonc"
    }
}

[ERROR] Could not resolve "deep-pick-omit" 和 [ERROR] Could not resolve "destr"，安装下列包解决：

pnpm add destr deep-pick-omit

找不到模块“vue”或其相应的类型声明

pnpm add @types/vue --D

六、安装 uni-ui

#文档地址：https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#npm%E5%AE%89%E8%A3%85

#安装 sass
pnpm add sass -D
#or
yarn add sass -D  

#安装 uni-ui
pnpm add @dcloudio/uni-ui
#or   
yarn add @dcloudio/uni-ui

#配置easycom
// pages.json
{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },
    
    // 其他内容
    pages:[
        // ...
    ]
}

#安装uni-ui-types 组件类型
#文档地址：https://uni-typed.netlify.app/guide/uni-ui-types.html

pnpm add -D @uni-helper/uni-app-types @uni-helper/uni-ui-types

#配置tsconfig.json
{
    "compilerOptions": {
    "types": ["@uni-helper/uni-app-types", "@uni-helper/uni-ui-types"]
  },
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
}

七、其它

#更新typesript

pnpm add typescript@latest -D

pnpm add vite@latest -D

TypeScript选项‘importsNotUsedAsValues‘和‘preserveValueImports‘弃用

#TypeScript 从5.0开始，选项“importsNotUsedAsValues”和“preserveValueImports”已经被标记为Deprecated，并将在TypeScript5.5之后停止支持，可以使用“verbatimModuleSyntax”选项替代。

#如果想继续使用5.x版本，增加一个选项：
在tsconfig.json 中增加 "ignoreDeprecations": "5.0"，就不再报警了。

#由于我的项目是新搭建的，没有历史包袱，所以采用最新的开发规范，我不想忽略它，uniapp模板生成的tsconfig.json文件中使用了extends加载了一个@vue/tsconfig/tsconfig.json配置，
#项目根目录tsconfig.json文件中其实找不到选项“importsNotUsedAsValues”和“preserveValueImports”，这两个选项是在@vue/tsconfig/tsconfig.json中配置的，
#所以需要打开这个文件把里面对应的选项注释，在根目录的tsconfig.json文件中设置"verbatimModuleSyntax": true 即可

 //"preserveValueImports": true, 
 //"importsNotUsedAsValues": "error",

"verbatimModuleSyntax": true

‘module’ is not defined，解决：打开.eslintrc.js

  "env": {
       "browser": true,
       "es2021": true,
       "node": true,
   },

Parsing error: '>' expected.eslint，解决：打开.eslintrc.js

    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
    },

Component name "index" should always be multi-word.eslint，解决：打开.eslintrc.js

    "rules": {
        //关闭组件命名规则
        "vue/multi-word-component-names": "off",
    },

 Unexpected any. Specify a different type.eslint，解决：打开.eslintrc.js

    "rules": {
        //关闭组件命名规则
        "@typescript-eslint/no-explicit-any":"off",
    },