菜单 搜索
首页 前端知识 Vite2 Vue3 TypeScript Pinia 搭建一套企业级的开发脚手架

Vite2 Vue3 TypeScript Pinia 搭建一套企业级的开发脚手架

2024-04-20 17:04:15 前端知识 前端哥 763 271 我要收藏

Vue2 与 Vue3 的区别

  • Vue3由于完全由TS进行重写，在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口（interface）来进行类型定义。要不然在 ESLint 时都会报错。
  • Vue2 与 Vue3 最大的区别: Vue2 使用Options API而 Vue3 使用的Composition API
介绍 vite
  • 💡 极速的开发服务器启动
  • ⚡️ 轻量快速的热模块重载（HMR）
  • 🛠️ 丰富的功能
  • 📦 自带优化的构建
  • 🔩 通用的插件接口
  • 🔑 完全类型化的 API
  • Vite （法语意为 “迅速”，发音 /vit/）是一种全新的前端构建工具，它极大地改善了前端开发体验。
使用 vite 快速创建脚手架

兼容性注意:Vite 需要 Node.js 版本 >= 12.0.0。

  1. 第一步: 在需要创建项目文件目录下打开 cmd 运行以下命令
  # npm 6.x
  npm init vite@latest my-vue-app --template vue
 
  # npm 7+, 需要额外的双横线：
  npm init vite@latest my-vue-app -- --template vue
 
  # yarn
  yarn create vite my-vue-app --template vue
 
  # pnpm
  pnpm create vite my-vue-app -- --template vue
复制

  1. 这里采用npm方法安装
    2.png

  2. 这里选择vue-ts 然后回车
    3.png

  3. 等项目创建完之后，就可以看到结果了cd到文件夹，安装依赖，启动项目
    4.png
    5.png

代码风格统一

Eslint支持
# eslint 安装
      yarn add eslint --dev
      # eslint 插件安装
      yarn add eslint-plugin-vue --dev
 
      yarn add @typescript-eslint/eslint-plugin --dev
 
      yarn add eslint-plugin-prettier --dev
 
      # typescript parser
      yarn add @typescript-eslint/parser --dev
复制
  • 项目下新建 .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parser: "vue-eslint-parser",
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    // eslint-config-prettier 的缩写
    "prettier",
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
  plugins: ["vue", "@typescript-eslint", "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",
    // 禁止出现;
    semi: ["warn", "never"],
    // 强制在块之前使用一致的空格
    "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",
  },
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },
};
 
复制

  1. 项目下新建 .eslintignore

    		  # eslint 忽略检查 (根据项目需要自行添加)
    		  node_modules
    		  dist
    复制
prettier 支持
# 安装 prettier
yarn add prettier --dev
复制
  • 解决 eslint 和 prettier 冲突
# 安装插件 eslint-config-prettier
      yarn add eslint-config-prettier --dev
复制
  • 项目下新建 .prettier.js
 module.exports = {
        tabWidth: 2,
        jsxSingleQuote: true,
        jsxBracketSameLine: true,
        printWidth: 100,
        singleQuote: true,
        semi: false,
        overrides: [
          {
            files: '*.json',
            options: {
              printWidth: 200,
            },
          },
        ],
        arrowParens: 'always',
      }
复制
  • 项目下新建 .prettierignore
# 忽略格式化文件 (根据项目需要自行添加)
      node_modules
      dist
复制
4 package.json 配置:
 
```js
  {
    "script": {
      "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
      "prettier": "prettier --write ."
    }
  }
```
复制
配置 husky + lint-staged
  1. 使用husky + lint-staged助力团队编码规范,
    1. 安装插件
npm install husky -dev
      npm install lint-staged -dev
复制
  • husky 是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。
  • 那么我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作
  • lint-staged，一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了呀，可能导致项目改动很大。
  "husky": {
          "hooks": {
            "pre-commit": "lint-staged"
          }
        },
        "lint-staged": {
          "*.{js,jsx,vue,ts,tsx}": [
            "yarn lint",
            "prettier --write",
            "git add"
          ]
        }
复制

配置文件引用别名 alias

  • 直接修改 vite.config.ts 文件配置:
 import { defineConfig } from 'vite'
      import vue from '@vitejs/plugin-vue'
      import path from 'path'
 
      // https://vitejs.dev/config/
      export default defineConfig({
        plugins: [vue()],
        resolve: {
          alias: {
            '@': path.resolve(__dirname, 'src'),
          },
        },
      })
复制
  • 修改 tsconfig.json
{
          "compilerOptions": {
            "target": "esnext",
            "module": "esnext",
            "moduleResolution": "node",
            "strict": true,
            "jsx": "preserve",
            "sourceMap": true,
            "resolveJsonModule": true,
            "esModuleInterop": true,
            "lib": ["esnext", "dom"],
            "baseUrl": ".",
            "paths": {
              "@/*":["src/*"]
            }
          },
          "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
        }
复制

配置 css 预处理器 scss

  • 插件安装

    		  yarn add sass-loader --dev
    		  yarn add dart-sass --dev
    		  yarn add sass --dev
    复制

  • 配置全局scss样式

    • 在 src/assets 下新增 style 文件夹，用于存放全局样式文件
    • 新建 main.scss, 设置一个用于测试的颜色变量 :
    		  $test-color: rgb(0, 4, 255);
    复制

  • 全局配置

    		  css:{
    		    preprocessorOptions:{
    		      scss:{
    		        additionalData:'@import "@/assets/style/mian.scss";'
    		      }
    		    }
    		  },
    复制

  • 组件中使用

```css
  <style scoped lang="scss">
    .title {
      color: $test-color;
    }
  </style>
```
复制

2345截图20220801203646.png

路由安装使用

  • 安装路由插件

    		  yarn add vue-router@4
    复制

  • 在 src 文件下新增 router 文件夹 => router.ts 文件,内容如下:

 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
        const routes: RouteRecordRaw[] = [
          {
            path: '/',
            name: 'home',
            component: () => import('@/views/Home/index.vue'), // 注意这里要带上 文件后缀.vue
          },
        ];
 
        const router = createRouter({
          history: createWebHistory(),
          routes,
        });
 
        export default router;
复制
  • 修改入口文件 mian.ts :
 import { createApp } from 'vue'
        import App from './App.vue'
        import router from './router/index'
 
        const app = createApp(App)
 
        app.use(router)
 
        app.mount('#app')
复制
  • 路由文档使用说明
    		  vue-router: https://next.router.vuejs.org/zh/guide/
    复制

状态管理 pinia

  • 由于 vuex 4 对 typescript 的支持让人感到难过，所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员

  • 安装 pinia

    		  yarn add pinia@next
    复制

  • main.ts 中增加

    		  import { createPinia } from "pinia"
    		  # 创建根存储库并将其传递给应用程序
    		  app.use(createPinia())
    复制

  • 在 src 文件夹下新增 store 文件夹,接在在 store 中新增 main.ts

    		  import { defineStore } from 'pinia'
    		  export const useMainStore = defineStore({
    		    id: 'mian',
    		    state: () =>({
    		      name: '群主'
    		    })
    		  })
    复制

  • 组建中获取 store :

<template>
          <div>{{mainStore.name}}</div>
        </template>
 
        <script setup lang="ts">
        import { useMainStore } from "@/store/mian"
 
        const mainStore = useMainStore()
 
        </script>
复制
  • getters 用法介绍
    • Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能
 import { defineStore } from 'pinia'
        export const useMainStore = defineStore({
          id: 'mian',
          state: () => ({
            name: '群主',
          }),
          getters: {
            nameLength: (state) => state.name.length,
          }
      })
复制
  • 组件中使用
<template>
          <div>用户名:{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}</div>
          <hr/>
          <button @click="updateName">修改store中的name</button>
        </template>
 
        <script setup lang="ts">
        import { useMainStore } from '@/store/mian'
 
        const mainStore = useMainStore()
 
        const updateName = ()=>{
          // $patch 修改 store 中的数据
          mainStore.$patch({
            name: '名称被修改了,nameLength也随之改变了'
          })
        }
        </script>
复制
环境变量配置

  • vite 提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production）
    1. 项目根目录新建:.env.development :

    		  NODE_ENV=development
    		  VITE_APP_WEB_URL= 'https://www.baidu.com'
    复制

  • 项目根目录新建:.env.production :

    		  NODE_ENV=production
    		  VITE_APP_WEB_URL= 'https://www.baidu.com'
    复制

  • 使用方式

    mport.meta.env.VITE_APP_WEB_URL

  • 打包区分开发环境和生产环境

    		  "build:dev": "vue-tsc --noEmit && vite build --mode development",
    		  "build:pro": "vue-tsc --noEmit && vite build --mode production",
    复制

    6.png

  • 通过以上的流程，我们就可以搭建一个企业级专业的脚手架模板

转载请注明出处或者链接地址：https://www.qianduange.cn//article/5484.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！