vue3+ts+vite+pinia 项目搭建

1. 起始，项目搭建

yarn 创建项目

yarn create vite

pnpm 安装依赖（如果没有可以用npm）

// 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

创建.eslintrc.json文件

{
    "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"]
    }
  }
  

创建.editorconfig文件

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

创建.prettierrc.json文件

{
  "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
}

安装pinia

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

使用pinia

<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()]
})

安装element-plus 框架

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()],
    }),
  ],
}