Skip to content

Vue3 工程模板,配置了基础的eslint,prettier,husky,router,pinia,tailwindcss

Notifications You must be signed in to change notification settings

coderminer/vue3-vite-js-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bcdb107 · Apr 19, 2022

History

12 Commits
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022
Apr 19, 2022

Repository files navigation

配置 vue3的基础的工程模板,直接获取源码 vue3-vite-js-template,工程的创建过程如下

创建工程

执行下面的命令创建工程,根据提示选择 vue

npm init vite vue3-vite-js-template

配置 eslint

安装相关的依赖

npm install eslint eslint-plugin-vue @babel/core @babel/eslint-parser -D

创建 .eslintrc.js,添加相应的配置,配置如下

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 12,
    parser: "@babel/eslint-parser",
    requireConfigFile: false,
    sourceType: "module",
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
  ],
  rules: {},
};

创建 .eslintignore 忽略文件

/dist/
/node_modules/

添加 lint 命令,执行命令可以自动的 fix 一些错误信息

"lint": "eslint --ext .vue,.js,.ts,.jsx,.tsx --fix src"

但是,vue3setup 语法糖还是有错误,错误如下

error  'defineProps' is not defined  no-undef

修复此问题,在.eslintrc.js中添加

env: {
    browser: true,
    node: true,
    es6: true,
    'vue/setup-compiler-macros': true // 新增
  },

prettier

统一代码风格,安装相关的依赖

npm install prettier eslint-config-prettier eslint-plugin-prettier -D

创建 .prettierrc.js

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  bracketSpacing: true,
  eslintIntegration: true
}

修改 eslint(.eslintrc.js) 配置,解决 eslint prettier 的冲突,在 extends 中添加

'plugin:prettier/recommended'

rules 中,添加

'prettier/prettier': 'error',
'vue/multi-word-component-names': 0

保存时格式化

.vscode中,添加 settings.json 文件,添加下面的信息,这样使用 ctrl + s 保存时,会自动格式化

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

husky

提交时检查提交信息,先按照相关依赖

npm install husky lint-staged -D

添加 prepare 命令,prepare 会在 npm install 之后自动执行,如果已经执行过 npm install 的话,可以直接执行 npm run prepare, 执行之后会生成,.husky文件夹,

接下来我们为我们 git 仓库添加一个 pre-commit 钩子,运行

npx husky add .husky/pre-commit "npx --no-install lint-staged"

运行之后,会在.husky文件夹中生成一个 pre-commit文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

接下来我们配置 lint-staged,在 package.json 中添加下面的配置信息

"lint-staged": {
    "*.{js,vue,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{html,css,less,scss,md}": [
      "prettier --write"
    ]
  }

创建别名

vite.config.js中添加

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@component': path.resolve(__dirname, 'src/components'),
      '@layout': path.resolve(__dirname, 'src/layouts'),
      '@page': path.resolve(__dirname, 'src/pages')
    }
  }

router

安装 vue-router

npm install vue-router@4

创建 router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '../layouts/Layout.vue'
const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    redirect: 'home',
    children: [
      {
        path: 'home',
        name: 'Home',
        component: () => import('../pages/Home.vue')
      }
    ]
  }
]

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

export default router

main.js中引入路由

...

import router from './router'

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

添加 tailwindcss

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js中添加

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

创建 index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

main.js 中 引入

import './index.css'

然后就可以使用 tailwindcss

About

Vue3 工程模板,配置了基础的eslint,prettier,husky,router,pinia,tailwindcss

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published