vite2.0搭建vue3.0项目

·  阅读 401

搭建 Vite 项目

使用 NPM:

$ npm init vite@latest
复制代码

创建项目

image.png

npm run dev 启动项目

增加vue-router&UI库

$ npm install vue-router --save
$ npm install element-plus --save
复制代码

改造main.ts引入router UI

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('./views/index.vue'),
    },
    {
      path: '/home',
      component: () => import('./views/index.vue'),
    },
  ],
})

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

复制代码

增加eslint + prettier

$ npm install eslint --save-dev
//vue3检查 .vue文件中的语法错误
$ npm install eslint-plugin-vue --save-dev
// Airbnb eslint插件 详细见https://www.npmjs.com/package/eslint-config-airbnb-base
$ npx install-peerdeps --dev eslint-config-airbnb-base
// 安装prettier
$ npm install --save-dev eslint-plugin-prettier
// eslint-config-prettier,这个插件的作用是禁用所有与格式相关的eslint规则,格式相关的校验都交给 prettier 处理
$ npm install --save-dev --save-exact prettier
复制代码

创建.eslintrc.js

// eslint文档 http://eslint.cn/docs/user-guide/configuring
module.exports = {
  root: true,
  env: {
    node: true,
  },
  // 插件名称可以省略 `eslint-plugin-` 前缀 引入eslint-plugin-prettier
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 12, // 启用es12
    parser: '@typescript-eslint/parser', // 将 TypeScript 转换成与 estree 兼容的形式,以便在ESLint中使用
  },
  extends: [
    'plugin:vue/vue3-recommended', // vue3检查 .vue文件中的语法错误
    'airbnb-base', // Airbnb基础规则的eslint插件
    'plugin:prettier/recommended', // prettier格式校验
  ],
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'], // 解决引入时没后缀查不到的问题
      },
    },
  },
  rules: {
    'prettier/prettier': 'error', // prettier 标记的地方抛出错误信息
    'linebreak-style': 0, // 强制使用Unix行结尾
    '@typescript-eslint/ban-ts-comment': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'import/extensions': [ // 解决不写后缀报错的问题
      'error',
      'ignorePackages',
      {
        js: 'never',
        mjs: 'never',
        jsx: 'never',
        ts: 'never',
      },
    ],
  },
}

复制代码

创建.prettierrc.js

// .prettierrc.json

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}
复制代码

引入husky

git的钩子函数,在执行相关hooks时进行自定义操作,比如在提交前执行eslint校验,提交时校验commit message

husky install

自动初始化命令

$ npx husky-init && npm install
$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
$ npx husky add .husky/pre-commit 'npx --no-install commitlint --edit "$1"'

// pre-commit文件内容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint-staged

// commit-msg文件内容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run commitlint

// package.json
 "scripts": {
    "lint-staged": "lint-staged",
    "commitlint": "commitlint --config commitlint.config.js -e -V"
  },
 "lint-staged": {
    "*.{ts,js,vue}": [
      "eslint --fix",
      "git add ."
    ]
  }

// git commit 可以看到效果,先执行eslint校验,后执行commitlint校验
复制代码

vscode settings

{
  "leetcode.endpoint": "leetcode-cn",
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  //打开文件不覆盖
  "workbench.editor.enablePreview": false,
  //关闭快速预览
  "editor.minimap.enabled": false,
  //打开自动保存
  "files.autoSave": "afterDelay",
  //使用主题
  "workbench.colorTheme": "Darcula Theme from IntelliJ",
  // 头部注释
  "fileheader.customMade": {
    "Author": "yhy",
    "Date": "Do not edit", // 设置后默认设置文件生成时间
    "LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间
    "LastEditors": "yhy", // 设置后,保存文件更改默认更新最后编辑人
    "Description": ""
  },
  // 函数注释
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  },
  //手机项目rem适配
  "px-to-rem.px-per-rem": 100,
  // -----------------------自动格式化配置eslint+prettier-----------------------
  // 每次保存自动格式化ctrl+s
  "editor.formatOnSave": true,
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //配置内配置对 .vue 文件的格式化
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //配置内配置对 .ts 文件的格式化
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //配置内配置对 .js 文件的格式化
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //配置内配置对 .json 文件的格式化
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

复制代码

目录结构

image.png vite官方文档
参考链接:juejin.cn/post/698287…

分类:
前端
标签:
分类:
前端
标签: