vue3.0 vite+typescript+vant ui+eslint+stylelint 项目搭建博客系统 NProgress

╰+哭是因爲堅強的太久メ 2022-09-02 07:59 6阅读 0赞

## 1.使用vite创建项目 ##

yarn create vite

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70_pic_center]

## 2.修改配置文件 ##

=====>package.json
    //可以直接替换成我的
    
    { 
      "name": "blog_h5_vue3.0_vite",
      "version": "0.0.0",
      "scripts": { 
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "serve": "vite preview"
      },
      "dependencies": { 
        "vue": "^3.0.5"
      },
      "devDependencies": { 
        "@typescript-eslint/eslint-plugin": "^4.28.5",
        "@typescript-eslint/parser": "^4.28.5",
        "@vitejs/plugin-vue": "^1.3.0",
        "@vue/compiler-sfc": "^3.0.5",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^7.15.0",
        "typescript": "^4.3.2",
        "vite": "^2.4.4",
        "vue-tsc": "^0.2.2",
        "eslint-config-prettier": "^7.2.0",
        "eslint-plugin-prettier": "^3.3.1",
        "prettier": "^2.2.1"
      }
    }

## 3.新建 .eslintrc.js ##

module.exports = { 
      parser: 'vue-eslint-parser',
      parserOptions: { 
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: { 
          jsx: true
        }
      },
      env: { 
        node: true,
        es6: true,
        browser: true
      },
      globals: { 
        Markdown: true
      },
      extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended',
        'eslint:recommended'
      ],
      rules: { 
        '@typescript-eslint/ban-ts-ignore': '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',
        '@typescript-eslint/no-unused-vars': [
          'error',
          { 
            argsIgnorePattern: '^h$',
            varsIgnorePattern: '^h$'
          }
        ],
        'no-unused-vars': [
          'error',
          { 
            argsIgnorePattern: '^h$',
            varsIgnorePattern: '^h$'
          }
        ],
        'space-before-function-paren': 'off',
        quotes: ['error', 'single'],
        'comma-dangle': ['error', 'never'],
        'vue/require-default-prop': 'off',
        'vue/custom-event-name-casing': 'off',
        'no-use-before-define': 'off',
        'vue/comment-directive': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/html-self-closing': 'off',
        'vue/max-attributes-per-line': 'off'
      }
    }

## 4.新建 .prettierrc ##

{ 
        "eslintIntegration": true,
        "printWidth": 100,
        "tabWidth": 2,
        "useTabs": false,
        "semi": false,
        "vueIndentScriptAndStyle": true,
        "singleQuote": true,
        "quoteProps": "as-needed",
        "bracketSpacing": true,
        "trailingComma": "none",
        "jsxBracketSameLine": false,
        "jsxSingleQuote": false,
        "arrowParens": "always",
        "insertPragma": false,
        "requirePragma": false,
        "proseWrap": "never",
        "htmlWhitespaceSensitivity": "strict",
        "endOfLine": "lf"
      }

## 5.安装依赖 ##

终端输入   yarn

## 6.问题指引 ##

这时候在 .prettierrc 文件中可能会出现如下图问题：  
![在这里插入图片描述][fe087e30594d480eb86822e68c239899.png_pic_center]  
解决如下：  
vscode==>文件=》首选项==》设置==》应用程序==》代理服务器==》Proxy Authorization==》在setting.json中编辑

将 "http.proxyAuthorization": null 改为
      "http.proxyAuthorization": "false"

到此问题解决

贴出我的vscode设置，可直接复制（有eslint的配置规则）

{ 
      "workbench.startupEditor": "none",
      "workbench.iconTheme": "vscode-icons",
      "terminal.integrated.defaultProfile.windows": "Git Bash",
      "explorer.confirmDelete": false,
      "editor.fontLigatures": true,
      "workbench.editor.enablePreview": false,
      "git.confirmSync": false,
      "gitlens.gitCommands.skipConfirmations": [
        "fetch:command",
        "stash-push:command",
        "switch:command",
        "branch-create:command",
        "push:command"
      ],
      "editor.codeActionsOnSave": { 
        "source.fixAll.stylelint": true,
        "source.fixAll.eslint": true
      },
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        "html"
      ],
      "eslint.run": "onSave",
      "terminal.integrated.tabs.enabled": true,
      "vsicons.dontShowNewVersionMessage": true,
      "typescript.updateImportsOnFileMove.enabled": "always",
      "[typescriptreact]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascript]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "sync.syncExtensions": true,
      "sync.autoUpload": true,
      "sync.autoDownload": true,
      "sync.quietSync": true,
      "[vue]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "javascript.updateImportsOnFileMove.enabled": "always",
      "[json]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "http.proxyAuthorization": "false"
    }

## end ##

可参考的 [码云][Link 1]

--------------------

## 7.引入vant ##

cnpm i vant@next -S

配置按需导入

安装插件
     cnpm i vite-plugin-style-import -D

在 vite.config.js 配置

// vite.config.js
    import vue from '@vitejs/plugin-vue';
    import styleImport from 'vite-plugin-style-import';
    
    export default { 
      plugins: [
        vue(),
        styleImport({ 
          libs: [
            { 
              libraryName: 'vant',
              esModule: true,
              resolveStyle: (name) => `vant/es/${ name}/style`,
            },
          ],
        }),
      ],
    };

在main.ts中引入

import {  createApp } from 'vue'
    import App from './App.vue'
    import Vant from 'vant'
    import 'vant/lib/index.css'
    const app = createApp(App)
    app.use(Vant).mount('#app')

## 8.配置自适应 ##

cnpm install postcss-pxtorem -D

在根目录下创建postcss.config.js

// 最新写法
    module.exports = { 
      plugins: { 
        autoprefixer: { 
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        },
        'postcss-pxtorem': { 
          rootValue: 37.5, // 换算的基数 vant-UI的官方根字体大小是37.5
          propList: ['*']
        }
      }
    }

cnpm i lib-flexible --save

在main.ts中引入

import 'lib-flexible'

以下是我的配置

import {  createApp } from 'vue'
    import App from './App.vue'
    import 'normalize.css'
    import '@/assets/css/common.less'
    import Vant from 'vant'
    import 'vant/lib/index.css'
    import 'lib-flexible'
    const app = createApp(App)
    app.use(Vant).mount('#app')

--------------------

2021.8.5----分割线—

## 1.配置stylelint ##

安装依赖
    cnpm i -D stylelint stylelint-config-rational-order stylelint-config-standard stylelint-order stylelint-config-prettier

## 2.新建 stylelint.config.js ##

//直接复制以下代码
    module.exports = { 
      root: true,
      plugins: ['stylelint-order'],
      extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
      rules: { 
        'selector-pseudo-class-no-unknown': [
          true,
          { 
            ignorePseudoClasses: ['global']
          }
        ],
        'selector-pseudo-element-no-unknown': [
          true,
          { 
            ignorePseudoElements: ['v-deep']
          }
        ],
        'at-rule-no-unknown': [
          true,
          { 
            ignoreAtRules: [
              'tailwind',
              'apply',
              'variants',
              'responsive',
              'screen',
              'function',
              'if',
              'each',
              'include',
              'mixin'
            ]
          }
        ],
        'no-empty-source': null,
        'named-grid-areas-no-invalid': null,
        'unicode-bom': 'never',
        'no-descending-specificity': null,
        'font-family-no-missing-generic-family-keyword': null,
        'declaration-colon-space-after': 'always-single-line',
        'declaration-colon-space-before': 'never',
        // 'declaration-block-trailing-semicolon': 'always',
        'rule-empty-line-before': [
          'always',
          { 
            ignore: ['after-comment', 'first-nested']
          }
        ],
        'unit-no-unknown': [true, {  ignoreUnits: ['rpx'] }],
        'order/order': [
          [
            'dollar-variables',
            'custom-properties',
            'at-rules',
            'declarations',
            { 
              type: 'at-rule',
              name: 'supports'
            },
            { 
              type: 'at-rule',
              name: 'media'
            },
            'rules'
          ],
          {  severity: 'warning' }
        ]
      },
      ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']
    }

## 配置 package.json ##

在 script标签中新增三条

"stylelint-check": "stylelint-config-prettier-check",
     "lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"

贴出我的配置

"scripts": { 
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "serve": "vite preview",
        "stylelint-check": "stylelint-config-prettier-check",
        "lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
        "lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
        "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"
      },

附上我的项目地址 [https://gitee.com/a1161105403/refactoring-blog-h5-vue3-vite.git][https_gitee.com_a1161105403_refactoring-blog-h5-vue3-vite.git]  
一起想学习哈~

--------------------

## 1.路由使用 ##

1.安装

cnpm install vue-router@4

2.配置 在router文件夹下新建index.ts

import {  createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
    const About = () => import('@views/About/About.vue')
    const notFound = () => import('@views/404/404.vue')
    
    const routes: Array<RouteRecordRaw> = [
      { 
        path: '/',
        name: 'index',
        component: About
      },
      { 
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: notFound
      }
    ]
    
    const router = createRouter({ 
      history: createWebHashHistory(),
      routes,
      scrollBehavior: () => ({  left: 0, top: 0 })
    })
    
    export default router

3.在main.ts中引入

import router from './router'
    const app = createApp(App)
    app.use(Vant).use(router).mount('#app')

## 2.使用NProgress ##

1.安装

cnpm install --save nprogress

2.配置 新建config.ts文件

import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    import router from './router'
    
    export const routerConfig = () => { 
      NProgress.configure({ 
        easing: 'ease', // 动画方式
        speed: 500, // 递增进度条的速度
        showSpinner: false, // 是否显示加载ico
        trickleSpeed: 200, // 自动递增间隔
        minimum: 0.3 // 初始化时的最小百分比
      })
    
      router.beforeEach((to: any, from: any, next: any) => { 
        NProgress.start()
        next()
      })
      router.afterEach(() => { 
        // 在即将进入新的页面组件前，关闭掉进度条
        NProgress.done()
      })
    }

3.在main.ts中使用

import router from './router'
    import {  routerConfig } from './config'
    const app = createApp(App)
    routerConfig()
    app.use(Vant).use(router).mount('#app')

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/857ea582512e466fa10bae1941044833.png
[fe087e30594d480eb86822e68c239899.png_pic_center]: /images/20220829/96043495faa243fcbfec56e70b89c531.png
[Link 1]: https://gitee.com/a1161105403/refactoring-blog-h5-vue3-vite
[https_gitee.com_a1161105403_refactoring-blog-h5-vue3-vite.git]: https://gitee.com/a1161105403/refactoring-blog-h5-vue3-vite.git