vue3+vite+TypeScript+Element plus+pinia搭建开发脚手架

初化化项目

pnpm create vite

2. 引入eslint和prettier，约束代码风格

安装 eslint

pnpm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

这四个依赖的作用分别是：

eslint: EsLint的核心代码

eslint-plugin-vue：为Vue使用Eslint的插件

@typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码

@typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规项目下新建 .eslintrc.js，配置 eslint 校验规则:

module.exports = {
  extends: ["plugin:vue/vue3-essential"],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
  },
  plugins: ["vue", "prettier"],
  rules: {
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "no-var": "error",
    "prettier/prettier": "error",
    // 禁止出现console
    "no-console": "warn",
    // 禁用debugger
    "no-debugger": "warn",
    // 禁止出现重复的 case 标签
    "no-duplicate-case": "warn",
    // 禁止出现空语句块
    "no-empty": "warn",
    // 禁止不必要的括号
    "no-extra-parens": "off",
    // 禁止对 function 声明重新赋值
    "no-func-assign": "warn",
    // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
    "no-unreachable": "warn",
    // 强制所有控制语句使用一致的括号风格
    curly: "warn",
    // 要求 switch 语句中有 default 分支 
    "default-case": "warn",
    // 强制尽可能地使用点号
    "dot-notation": "warn",
    // 要求使用 === 和 !==
    eqeqeq: "warn",
    // 禁止 if 语句中 return 语句之后有 else 块
    "no-else-return": "warn",
    // 禁止出现空函数
    "no-empty-function": "warn",
    // 禁用不必要的嵌套块
    "no-lone-blocks": "warn",
    // 禁止使用多个空格
    "no-multi-spaces": "warn",
    // 禁止多次声明同一变量
    "no-redeclare": "warn",
    // 禁止在 return 语句中使用赋值语句
    "no-return-assign": "warn",
    // 禁用不必要的 return await
    "no-return-await": "warn",
    // 禁止自我赋值
    "no-self-assign": "warn",
    // 禁止自身比较
    "no-self-compare": "warn",
    // 禁止不必要的 catch 子句
    "no-useless-catch": "warn",
    // 禁止多余的 return 语句
    "no-useless-return": "warn",
    // 禁止变量声明与外层作用域的变量同名
    "no-shadow": "off",
    // 允许delete变量
    "no-delete-var": "off",
    // 强制数组方括号中使用一致的空格
    "array-bracket-spacing": "warn",
    // 强制在代码块中使用一致的大括号风格
    "brace-style": "warn",
    // 强制使用骆驼拼写法命名约定
    camelcase: "warn",
    // 强制使用一致的缩进
    indent: "off",
    // 强制在 JSX 属性中一致地使用双引号或单引号
    // 'jsx-quotes': 'warn',
    // 强制可嵌套的块的最大深度4
    "max-depth": "warn",
    // 强制最大行数 300
    // "max-lines": ["warn", { "max": 1200 }],
    // 强制函数最大代码行数 50
    // 'max-lines-per-function': ['warn', { max: 70 }],
    // 强制函数块最多允许的的语句数量20
    "max-statements": ["warn", 100],
    // 强制回调函数最大嵌套深度
    "max-nested-callbacks": ["warn", 3],
    // 强制函数定义中最多允许的参数数量
    "max-params": ["warn", 3],
    // 强制每一行中所允许的最大语句数量
    "max-statements-per-line": ["warn", { max: 1 }],
    // 要求方法链中每个调用都有一个换行符
    "newline-per-chained-call": ["warn", { ignoreChainWithDepth: 3 }],
    // 禁止 if 作为唯一的语句出现在 else 语句中
    "no-lonely-if": "warn",
    // 禁止空格和 tab 的混合缩进
    "no-mixed-spaces-and-tabs": "warn",
    // 禁止出现多行空行
    "no-multiple-empty-lines": "warn",

    // 强制在块之前使用一致的空格
    "space-before-blocks": "warn",
    // 强制在 function的左括号之前使用一致的空格
    // 'space-before-function-paren': ['warn', 'never'],
    // 强制在圆括号内使用一致的空格
    "space-in-parens": "warn",
    // 要求操作符周围有空格
    "space-infix-ops": "warn",
    // 强制在一元操作符前后使用一致的空格
    "space-unary-ops": "warn",
    // 强制在注释中 // 或 /* 使用一致的空格
    // "spaced-comment": "warn",
    // 强制在 switch 的冒号左右有空格
    "switch-colon-spacing": "warn",
    // 强制箭头函数的箭头前后使用一致的空格
    "arrow-spacing": "warn",
    "no-var": "warn",
    "prefer-const": "warn",
    "prefer-rest-params": "warn",
    "no-useless-escape": "warn",
    "no-irregular-whitespace": "warn",
    "no-prototype-builtins": "warn",
    "no-fallthrough": "warn",
    "no-extra-boolean-cast": "warn",
    "no-case-declarations": "warn",
    "no-async-promise-executor": "warn",
  },
  overrides: [
    {
      files: ["*.vue"],
      rules: {
        // 这里写覆盖vue文件的规则
        "no-unused-vars": [0],
      },
    },
  ],
};

3. 安装prettier

pnpm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

这三个依赖分别是：

prettier：prettier插件的核心代码

eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效

eslint-plugin-prettier：将prettier作为ESLint规范来使用

项目下新建 .prettier.js，配置 prettier 规则:

module.exports = {
  printWidth: 120, // 换行字符串阈值
  tabWidth: 2, // 设置工具每一个水平缩进的空格数
  useTabs: false,
  semi: false, // 句末是否加分号
  vueIndentScriptAndStyle: true,
  trailingComma: 'none', // 最后一个对象元素加逗号
  bracketSpacing: true, // 对象，数组加空格
  jsxBracketSameLine: true, // jsx > 是否另起一行
  arrowParens: 'always', // (x) => {} 是否要有小括号
  requirePragma: false, // 不需要写文件开头的 @prettier
  insertPragma: false // 不需要自动在文件开头插入 @prettier
}

在 package.json 文件中添加 checklint 和 prettier 命令

在 package.json 文件中添加 checklint 和 prettier 命令

上面配置完成后,可以运行以下命令测试下代码检查并执行格式化效果:

上面配置完成后,可以运行以下命令测试下代码检查 并执行格式化效果:

4.引入 Element Plus

安装 element-plus

pnpm install element-plus --save

修改入口文件 mian.ts ：

import { createApp } from 'vue'
import App from './App.vue';
import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

以上代码便完成了Element Plus的引入。需要注意的是，样式文件需要单独引入。

5. 引入路由

安装 router4

pnpm add vue-router

在 src 文件下新增 router 文件夹，新建index.ts,内容如下:

import { createRouter, createWebHistory, RouteRecordRaw } from'vue-router'constroutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Login',
    component: () =>import('@/pages/login/Login.vue'), // 注意这里要带上 文件后缀.vue
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

exportdefault router
复制代码

修改入口文件 mian.ts :

import { createApp } from'vue'importAppfrom'./App.vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'import router from'./router/index'const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
复制代码

6. 状态管理 pinia

安装 pinia

yarn add pinia@next复制代码

修改入口文件 mian.ts :

import { createApp } from'vue'importAppfrom'./App.vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'import router from'./router/index'import { createPinia } from"pinia"const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(createPinia())
app.mount('#app')
复制代码

在 src 文件夹下新增 store 文件夹,接在在 store 中新增 main.ts,文件中定义：

import { defineStore } from'pinia'//`id` 是必要的，它将所使用 store 连接到 devtools。exportconst useMainStore = defineStore({
 id: 'mian',
 
 state: () => ({ name: '用户名' }), 
 
 getters: { name: (state) => state.name, }, 
 
 actions: {
     //同步actionupdataUser(data: any) {
        this.name = data; 
     } 
      //异步actionasync updataUser2(data: any) {
      const { data } = await api.login(account, pwd)
      return data
    }
 }
})
复制代码

组件中使用:

import { useMainStore } from"@/store/mian"//组件中获取storeconst mainStore = useMainStore()

//组件中通过getter获取store内容nameconst name = mainStore.name//可通过getter直接修改store中的name，推荐使用actions进行修改constupdateName = ()=>{
  // 使用$patch 修改 store 中的数据
  mainStore.$patch({
    name: '修改的名称'
  })
}

//可通过actions直接修改store中的name（同步）consthandClick=()=>{mainStore.name = '修改的名称'}


复制代码

数据持久化

安装pinia-plugin-persist可以辅助实现数据持久化功能(当页面刷新的时候存储在pinia的内容会消失)。

npm i pinia-plugin-persist --save复制代码

在main.ts文件中定义定义pinia-plugin-persist使用

import { defineStore } from'pinia'import piniaPluginPersist from 'pinia-plugin-persist'const useMainStore = defineStore({
 id: 'mian',
 
 state: () => ({ name: '用户名' }), 
 
 getters: { name: (state) => state.name, }, 
 
 actions: {
     //同步actionupdataUser(data: any) {
        this.name = data; 
     } 
      //异步actionasync updataUser2(data: any) {
      const { data } = await api.login(account, pwd)
      return data\
    }
 }
  
 persist: {
   // 开启数据缓存，必须开启
   enabled: true,
   //数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。
   strategies: [
     {
       //修改key值为my_user，选择开启。key: 'my_user',
       //将存放位置由 sessionStorage 改为 localStorage，选择开启。
       storage: localStorage,
       //默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
       paths: ['name']
     }
   ]
 }

})

useMainStore.use(useMainStore)
export default useMainStore
复制代码

7. 配置 css 预处理器 scss

安装scss

    npm install -D sass-loader node-sass
复制代码

配置全局 scss 样式文件

在 src/assets 下新增 style 文件夹，用于存放全局样式文件，新建 index.scss,

html {
    box-sizing: border-box; 
} 
复制代码