- Notifications
You must be signed in to change notification settings - Fork0
coderminer/vue3-vite-js-template
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
配置vue3的基础的工程模板，直接获取源码vue3-vite-js-template，工程的创建过程如下
执行下面的命令创建工程，根据提示选择vue
npm init vite vue3-vite-js-template安装相关的依赖
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"但是，vue3 的setup 语法糖还是有错误，错误如下
error 'defineProps' is not defined no-undef修复此问题，在.eslintrc.js中添加
env: { browser: true, node: true, es6: true, 'vue/setup-compiler-macros': true // 新增 },统一代码风格，安装相关的依赖
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}提交时检查提交信息，先按照相关依赖
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') } }安装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')npm i -D tailwindcss postcss autoprefixernpx tailwindcss init -ptailwind.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
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.