Giter VIP home page Giter VIP logo

create-vue-xy's Introduction

create-vue-xy

An Out-of-the-Box Scaffolding with Vue.js.

使用方式

打开终端,使用如下命令:

pnpm create vue-xy

Note

项目只支持一种包管理器 pnpm。这主要是为了保证 lock.json 锁定依赖版本。当然,使用 corepack 也可以。

选择需要的选项,之后就可以运行了:

pnpm dev
pnpm lint:inspect
git init .

基础配置

默认的配置包含了:

  • vue + vite + ts, tailwindcss
  • 从 0 配置的必要语法检查和格式化。
  • 清除了所有默认的 css 样式;只提供了干净的唯一组件 MainView, 空的 routerpinia 状态库.
  • 提供了一些有用的 .vscode 工程配置: tailwindcss@ 指令语法提示支持和 vuecode-snippets.
  • 一些(自认为)通用的 vite 插件.

可选配置

有几个可选项:utils, axios, devtools/vue-devtools

utils 提供了一些可能有用的封装:

  • 实现了极小的 eventBus
  • 对 vue 本身提供的 provideinject 进行了二次封装,使用局部上下文来代替全局状态管理;

axios 选项配置了通用的 axios 请求封装:

  • 开箱即用的 axios 的请求封装, 并支持多环境切换: mock, dev, prod

devtools/vue-devtools 选项,会引入 vue-devtools 的 vite 插件。

以上这些可选配置也可以通过命令行参数来选择,如:

pnpm create vue-xy --axios # 启用 axios

Warning

需要注意,一旦传入 -- 的命令行参数,将不会再提供这些可选配置的交互行为。

其他还有一些配置是默认的:

  • 项目提供了开箱即用的多语言支持, 内置 vue-i18n@9 的配置。

VSCode

在正式开始之前,可能还需要调整一下 vscode:

代码库适用于 vscode. 必需安装的 vsc 插件:

  • vue 官方插件
  • eslint 官方插件
  • tailwind 官方插件
  • prettier 官方插件

Warning

注意本地已经存在的插件可能会覆盖掉上述插件某些功能,从而影响语法提示,进而影响食用体验。

  • 可选的插件:i18n

create-vue-xy's People

Stargazers

Lex avatar MeiCXi avatar  avatar Ray Wang avatar  avatar  avatar Woo avatar  avatar  avatar Oshikawa Yuri avatar a7 avatar  avatar kurumi avatar Tony Fu avatar

Watchers

Tony Fu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.