vue3+ts+vite+pinia 项目搭建

    yarn create vite
    
    
      
    
    代码解读

    // mac安装pnpm
    sudo npm i -g yarn
    // 安装依赖
    pnpm i
    //启动项目
    yarn dev
    //安装一下pretter和eslint
    pnpm i prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
    
    
      
      
      
      
      
      
      
      
    
    代码解读

    {
    "root": true,
    "env": {
      "es2021": true,
      "node": true,
      "browser": true
    },
    "globals": {
      "node": true
    },
    "extends": [
      //    "plugin:vue/essential",
      /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
      //    "plugin:@typescript-eslint/recommended",
      //    "eslint:recommended",
      "plugin:vue/vue3-recommended",
      /**@see https://github.com/prettier/eslint-plugin-prettier#recommended-configuration */
      "plugin:prettier/recommended"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "plugins": ["@typescript-eslint"],
    "ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
    "rules": {
      "@typescript-eslint/no-unused-vars": "error",
      "@typescript-eslint/no-var-requires": "off",
      "@typescript-eslint/consistent-type-imports": "error",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "vue/singleline-html-element-content-newline": "off",
      "vue/multiline-html-element-content-newline": "off",
      "vue/no-v-html": "off",
      
      //    "space-before-blocks": "warn",
      //    "space-before-function-paren": "error",
      //    "space-in-parens": "warn",
      //    "no-whitespace-before-property": "off",
      /** * Having a semicolon helps the optimizer interpret your code correctly.
       * This avoids rare errors in optimized code.
       * @see https://twitter.com/alex_kozack/status/1364210394328408066
       */
      "semi": ["error", "always"]
      /** * This will make the history of changes in the hit a little cleaner
       */
      //    "comma-dangle": ["warn", "always-multiline"],
      /** * Just for beauty
       */
      //    "quotes": ["warn", "single"]
    }
      }
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

    root = true
    
    [*]
    charset = utf-8
    # end_of_line = lf
    indent_size = 2
    indent_style = space
    insert_final_newline = true
    ij_html_quote_style = double
    max_line_length = 120
    tab_width = 2
    trim_trailing_whitespace = true
    
    
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

    {
      "printWidth": 100,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true,
      "vueIndentScriptAndStyle": true,
      "singleQuote": true,
      "quoteProps": "as-needed",
      "bracketSpacing": true,
      "trailingComma": "es5",
      "jsxBracketSameLine": true,
      "jsxSingleQuote": false,
      "arrowParens": "always",
      "insertPragma": false,
      "requirePragma": false,
      "proseWrap": "never",
      "htmlWhitespaceSensitivity": "ignore",
      "endOfLine": "auto",
      "rangeStart": 0
    }
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

    yarn add pinia
    
    //简单配置pinia
    //创建store文件夹>创建module文件夹>创建useCountStore.ts
    import { defineStore } from 'pinia'
    
    export const useStore = defineStore('main', {
    state: () => ({
      num: 0,
    }),
    actions: {
      increment() {
        this.num++
      },
      randomizeCounter() {
        this.num = Math.round(100 * Math.random())
      },
    },
      })
    
      const instance = useStore();
    
      //save
      instance.$subscribe((_, state) => {
    localStorage.setItem('counst-store',JSON.stringify({...state}))
      })
      //get 
      const old = localStorage.getItem('count-store')
      if(old) {
    instance.$state = JSON.parse(old)
      }
    export default useStore
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

    <template>
      <div>count: {{ countStore.num }}</div>
      <div>{{ refCount.num }}</div>
      <div>
    <button @click="countStore.increment()">+1</button>
      </div>
    </template>
    
    <script lang="ts" setup="setup">
      import { storeToRefs } from 'pinia';
      import useContStore from '../store/modules/useCountStore';
      const countStore = useContStore();
      const refCount = storeToRefs(countStore);
      // storeToRefs使pinia拥有智能提示
    </script>
    
    <style lang="scss" scoped></style>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

    安装依赖 // 根据自己的node版本安装
    pnpm add @types/node@14.17.4 -D 
    
    // ts.config
    "paths": {
      "@/*": ["./src/*"]
    }
    // vite.config
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import * as path from 'path'
    import { resolve } from 'path'
    const resovlve = (p:string) => {
      return path.resolve(__dirname, p)
    }
    // https://vitejs.dev/config/
    export default defineConfig({
      resolve: {
    alias: {
      '@': resolve('./src')
    }
      },
      plugins: [vue()]
    })
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

    npm install -D unplugin-vue-components unplugin-auto-import
    
    
    
    // vite.config.ts
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    
    export default {
      plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
      ],
    }
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读