From ca21dc7a507bb873c11982494e1649f753f0bd88 Mon Sep 17 00:00:00 2001 From: woshilwh <903915294@qq.com> Date: Mon, 4 Apr 2022 21:19:00 +0800 Subject: [PATCH] feat:pinia --- .eslintrc.js | 16 ++++++++-------- components.d.ts | 2 -- package.json | 4 +++- pnpm-lock.yaml | 23 +++++++++++++++++++++++ src/App.vue | 3 --- src/Home.vue | 10 ++++++++-- src/main.ts | 2 ++ src/router/index.ts | 2 +- src/store/user.ts | 11 +++++++++++ vite.config.ts | 10 +++++++++- 10 files changed, 65 insertions(+), 18 deletions(-) create mode 100644 src/store/user.ts diff --git a/.eslintrc.js b/.eslintrc.js index 51eb246..03c538d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,20 +1,20 @@ module.exports = { - parser: 'vue-eslint-parser', + parser: "vue-eslint-parser", env: { browser: true, node: true, - es2021: true, + es2021: true }, - extends: [ 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended' ], + extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"], parserOptions: { ecmaVersion: 13, parser: "@typescript-eslint/parser", - sourceType: 'module' + sourceType: "module" }, - plugins: [ "vue", "@typescript-eslint", "prettier" ], + plugins: ["vue", "@typescript-eslint", "prettier"], rules: { - "indent": ["error", 2], + indent: ["error", 2], // 关闭驼峰命名规则 - 'vue/multi-word-component-names': 0, + "vue/multi-word-component-names": 0 } -} +}; diff --git a/components.d.ts b/components.d.ts index 8be3aa2..f245200 100644 --- a/components.d.ts +++ b/components.d.ts @@ -4,8 +4,6 @@ declare module 'vue' { export interface GlobalComponents { - ElButton: typeof import('element-plus/es')['ElButton'] - ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] } } diff --git a/package.json b/package.json index f598254..88cd755 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,12 @@ "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview" + "preview": "vite preview", + "lint": "eslint \"src/**/*.{vue,ts}\" --fix" }, "dependencies": { "element-plus": "^2.1.4", + "pinia": "^2.0.13", "vue": "^3.2.25", "vue-router": "^4.0.14" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1cf48e..e6ef6ca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,6 +10,7 @@ specifiers: eslint-config-prettier: ^8.5.0 eslint-plugin-prettier: ^3.4.1 eslint-plugin-vue: ^8.5.0 + pinia: ^2.0.13 prettier: 2.4.1 sass: ^1.49.11 typescript: ^4.5.4 @@ -25,6 +26,7 @@ specifiers: dependencies: element-plus: registry.npmmirror.com/element-plus/2.1.8_vue@3.2.31 + pinia: registry.npmmirror.com/pinia/2.0.13_typescript@4.6.3+vue@3.2.31 vue: registry.npmmirror.com/vue/3.2.31 vue-router: registry.npmmirror.com/vue-router/4.0.14_vue@3.2.31 @@ -2272,6 +2274,27 @@ packages: engines: {node: '>=8.6'} dev: true + registry.npmmirror.com/pinia/2.0.13_typescript@4.6.3+vue@3.2.31: + resolution: {integrity: sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pinia/-/pinia-2.0.13.tgz} + id: registry.npmmirror.com/pinia/2.0.13 + name: pinia + version: 2.0.13 + peerDependencies: + '@vue/composition-api': ^1.4.0 + typescript: '>=4.4.4' + vue: ^2.6.14 || ^3.2.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + typescript: + optional: true + dependencies: + '@vue/devtools-api': registry.npmmirror.com/@vue/devtools-api/6.1.4 + typescript: registry.npmmirror.com/typescript/4.6.3 + vue: registry.npmmirror.com/vue/3.2.31 + vue-demi: registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.31 + dev: false + registry.npmmirror.com/postcss/8.4.12: resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/postcss/-/postcss-8.4.12.tgz} name: postcss diff --git a/src/App.vue b/src/App.vue index 1df681e..a964dcb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,9 +1,6 @@ diff --git a/src/Home.vue b/src/Home.vue index 3cf54c3..f3c3e36 100644 --- a/src/Home.vue +++ b/src/Home.vue @@ -1,7 +1,13 @@ - + diff --git a/src/main.ts b/src/main.ts index 7380f18..b9fa47f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,9 +1,11 @@ // If you want to use ElMessage, import it. import "element-plus/theme-chalk/src/message.scss"; import router from "./router"; +import { createPinia } from "pinia"; import { createApp } from "vue"; import App from "./App.vue"; const app = createApp(App); app.use(router); +app.use(createPinia()); app.mount("#app"); diff --git a/src/router/index.ts b/src/router/index.ts index 32c8b00..73acf0c 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,4 +1,4 @@ -import { createRouter, createWebHistory, Router, RouteRecordRaw } from "vue-router"; +import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const routes: Array = [ { diff --git a/src/store/user.ts b/src/store/user.ts new file mode 100644 index 0000000..4b5a583 --- /dev/null +++ b/src/store/user.ts @@ -0,0 +1,11 @@ +import { defineStore, acceptHMRUpdate } from "pinia"; + +export const useUserStore = defineStore("user", { + state: () => ({ + userName: "Elvis" + }) +}); + +if (import.meta.hot) { + import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot)); +} diff --git a/vite.config.ts b/vite.config.ts index 3da1a14..747810b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -38,7 +38,15 @@ export default defineConfig({ assetFileNames: 'static/[ext]/[name]-[hash].[ext]', manualChunks: { elementPlus: ["element-plus"], - } + vue: ["vue"], + vueRouter: ["vue-router"] + }, + // manualChunks(id) { + // // 将pinia的全局库实例打包进vendor，避免和页面一起打包造成资源重复引入 + // if (id.includes(path.resolve(__dirname, '/src/store/index.ts'))) { + // return 'vendor'; + // } + // } } } }, -- Gitee