13 | pinia使用
14 | hello vue3
15 |
16 |
17 |
19 |
20 |
21 |
46 |
--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | export interface IPackageInfo {
2 | name: string,
3 | version: string,
4 | description: string,
5 | author: string
6 | }
7 |
8 | export interface ICmdOptions {
9 | y?: boolean,
10 | template?: string
11 | }
12 |
13 | export interface ICommanderOptions {
14 | keyword: string,
15 | description: string
16 | }
17 |
18 | export interface IExecOptions {
19 | tpl: string,
20 | projectName: string,
21 | tool: string,
22 | isPinia: boolean,
23 | isVueRouter: boolean,
24 | rootPath: string,
25 | projectPath: string
26 | callback?: (...argv: any) => any
27 | }
28 |
29 | export interface ISpawnOptions {
30 | cwd?: string
31 | env?: object
32 | argv0?: string
33 | stdio?: string
34 | detach?: boolean
35 | uid?: number
36 | gid?: number
37 | shell?: boolean | string
38 | timeout?: number
39 | }
40 |
41 | export interface IEslintrc {
42 | root?: boolean,
43 | env?: Record
11 | {{ msg }}
12 | 13 |14 | Recommended IDE setup: 15 | VSCode 16 | + 17 | Volar 18 |
19 | 20 |See README.md for more information.
23 | 24 | Vite Docs 25 | 26 | | 27 | Vue 3 Docs 28 |
29 | 30 | 31 |
32 | Edit
33 | components/HelloWorld.vue to test hot module replacement.
34 |
2 |
3 | 
4 |
5 |
7 | 8 | # vite-eslint-cli 9 | 10 | > 基于vite + vue3/ vite + react等 实现eslint prettier部署，内置vite vue3运行方式。执行代码构建以及eslint部署一体 11 | 12 | - 💡 基于vite 实现了项目以及规范一体化部署 13 | - ⚡️可以从0 到 1快速部署 14 | - 🛠️ 内置实现vue3/ ts/ eslint/ prettier/ commitlint/ husky/ pinia持久化/ vue-router 15 | - 📦 可以快速实现从代码以及规范的搭建 16 | 17 | ## 与vite vue3的不同 18 | 19 | - 使用vite 创建vue3 + ts项目只会出现一个简单模板, 需要手动`npm install`, 以及配置基本插件以及规范，例如：pinia, eslint等 20 | - vite-eslint-cli 能做什么？？？ 21 | - 💡 内置vite 创建方式，和单独使用vite没有什么不同 22 | - ⚡️ 内置了eslint规范，例如：prettier, eslint, commitlint, husky 23 | - 🛠️ 提供了vue3 的全家桶配置。例如: pinia, pinia-plugin-persist, vue-router 24 | - 📦 提供了pinia 持久化方案 25 | - 🔩 内置了vue-router以及pinia 案例 26 | - 🔑 可以用--template 参数 来替代vite --template参数 27 | 28 | ## 支持范围 29 | 30 | | 功能 | 是否支持 | 31 | | ------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------- | 32 | | vue3 + ts | 支持 | 33 | | vue3 + js | 待支持 | 34 | | react + ts | 待支持 | 35 | | react + js | 待支持 | 36 | 37 | ## 使用 38 | 39 | > $ npx vite-eslint-cli myapp 40 | >
41 | > $ npx vite-eslint-cli myapp --template vue-ts 42 | 43 | ## 注意 44 | 45 | - 默认版本就是vue3 + ts 46 | 47 | ## QA 48 | 49 | - 如果你是高手 50 | - 使用插件可以免去你配置规范的步骤，快速开发业务代码 51 | - 如果你是新手 52 | - 让你从0 到1快速实现项目，内置“全家桶” 案例能够快速学习 53 | -------------------------------------------------------------------------------- /src/core/prettierRun.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author lihh 3 | * @description 表示prettier处理 4 | */ 5 | import { IEslintrc, IExecOptions } from '../types' 6 | import getDependentPlugins from '../utils/plugins' 7 | import { copyFile, joinPath, resolvePath, runCommand, successLog, warningLog } from '../utils' 8 | 9 | const fs = require('fs') 10 | 11 | class PrettierRun { 12 | /** 13 | * @author lihh 14 | * @description 表示功能插件的运行入口 15 | * @param options 参数 16 | */ 17 | async apply(options: IExecOptions) { 18 | const { projectPath, callback, tpl, tool } = options 19 | const flags = `prettier-${tpl}` 20 | 21 | // 获取插件 22 | const plugins = getDependentPlugins(flags) 23 | if (plugins.length === 0) { 24 | warningLog(`该脚手架暂时不支持<${flags}>, 后续逐渐支持，请持续关注. 但是vite创建的项目已经可以使用`) 25 | callback && callback('end') 26 | return 27 | } 28 | 29 | // 开始注册插件 30 | await runCommand(tool, [tool === 'yarn' ? 'add' : 'install'].concat(plugins).concat(['-D']), { cwd: projectPath }) 31 | 32 | // 开始复制文件 33 | const basePath = resolvePath('./template') 34 | const fileArr = ['.prettierrc', '.prettierignore'] 35 | fileArr.forEach(fileName => { 36 | copyFile(joinPath(basePath, fileName), joinPath(projectPath, fileName)) 37 | }) 38 | 39 | // 开始读取.eslintrc.js 进行文件修改 40 | const fileDir = joinPath(projectPath, '.eslintrc.js') 41 | const eslintrcConfig = require(fileDir) as IEslintrc 42 | eslintrcConfig.extends!.push('prettier') 43 | if (tpl.startsWith('vue')) eslintrcConfig.extends!.push('@vue/eslint-config-prettier') 44 | // 开始写文件 45 | fs.writeFileSync(fileDir, `module.exports = ${JSON.stringify(eslintrcConfig, null, ' ')}`, { encoding: 'utf-8' }) 46 | 47 | successLog('5. prettier configuration succeeded') 48 | callback && callback() 49 | } 50 | } 51 | 52 | export default new PrettierRun() 53 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author lihh 3 | * @description 执行commander入口 4 | */ 5 | 6 | import { Command } from 'commander' 7 | import { getCommanderOptions, getConfigFile } from './utils' 8 | import { ICmdOptions, IExecOptions } from './types' 9 | import prompts from 'prompts' 10 | import run from './core' 11 | 12 | const path = require('path') 13 | 14 | /** 15 | * @author lihh 16 | * @description 表示闻讯函数 17 | * @param tpl 表示模板 18 | */ 19 | const promptHandle = async (tpl: string) => { 20 | let baseOptions = [{ 21 | type: 'select', 22 | name: 'tool', 23 | message: 'please select a running tool', 24 | choices: ['npm', 'yarn', 'pnpm'].map(item => ({ title: item, value: item })) 25 | }] as prompts.PromptObject[] 26 | 27 | const res = await prompts(baseOptions) 28 | 29 | return { ...res, isPinia: true, isVueRouter: true } 30 | } 31 | 32 | const program = new Command() 33 | // 获取package 文件配置信息 34 | const configInfo = getConfigFile() 35 | // 获取commander options 配置信息 36 | const commanderOptions = getCommanderOptions() 37 | 38 | program 39 | .name(configInfo.name) 40 | .description(configInfo.description) 41 | .version(configInfo.version) 42 | 43 | program.argument('