Recently, I had to write a Vue3 project. Usually, I need to go to the Vite website and create the project from scratch. Add plugins like Vue-Router@4, Vuex or Pinia little by little, then configure quality management components like ESLint, Prettier, etc. Finally, if necessary, you’ll need to write Dockerfile and docker-comemage.yml to handle project packaging and deployment.

Fortunately, I have other projects to refer to in the past, so I can copy the previous configuration to save a little time. But what if I have no previous Vue3 project experience?

These initialization operations are actually repetitive, so I started with how to develop a Vue3- CLI project initializer and release it to NPM, and developed a cli tool to hand these tasks over to the program.

It is xmo-cli gitee.com/dXmo/xmo-cl… .

Antecedents feed

When can you use Xmo-CLI?

  1. 👉 is studying recentlyVue3And it takes an open source project to really get you started.
  2. 👉 want toVue3The project adds a quality management configuration without knowing what to do about it.
  3. 👉 want toVue3Program to addDockerContainer configuration, but have no idea what to do about it.
  4. 👉 is looking forward to using a Chinese versionVue3-cliTool.
  5. 👉 is happy to provide advice and Debug for open source projects and becomeContributorsA member of (the contributors).

Xmo – cli is introduced

Xmo-cli aims to be the best Vue3 starter and only focuses on Vue3 + Vite.

Function is introduced

  1. Supports creation of the latestvue3.2Project template.
  2. The project template containsmini primary full ts-mini ts-primary ts-fullMultiple branches, from business functions to quality management to container operations and maintenance deployment.
  3. forVue3 + ViteThe project provides support for adding quality management configurations;
  4. forVue3 + ViteThe project provides support for adding Docker container configurations; (The development of)
  5. Download popular open source projects (via image).

Why not?vue-cli

  1. The English language.
  2. Choice difficulty, the content of the options is complex and many options for beginners do not understand.
  3. notvite 。
  4. xmo-cliProvides multi-branch templates, is a better starting learning tool.
  5. Missing some very useful plugins.
  6. Does not provideDockerExamples of configuration.
  7. Maintenance is a bit out of date.

The project address

Gitee address

Making the address

NPM address

Install the tutorial

  1. npm install xmo-cli -g

Use the sample

For details, see the official readme.md document, which will be updated in real time.

📦 Create a project template

xmo-cli init [dir]
Copy the code

Download popular items at ⚓

xmo-cli create <dir>
Copy the code

⚙️ Add project management configuration

xmo-cli init -q
Copy the code

One-click add Docker configuration (including development configuration, packaging configuration and Nginx deployment configuration).The development of

In the project root directory
xmo-cli init -d
Copy the code

branch

The default recommended branch is TS /primary. (If you use xmo-cli init [dir] -y (add -y parameter), this branch will be initialized by default)

The mini – most Jane

Vue3 + VUE-Router + Pinia + Axios.

Degree of difficulty

Knowledge coverage coefficient ★★★

Having understood the branching code, I think I can cover **90%** of my development needs without touching on a specific UI framework.

Primary – usually

Vue3 + VUE-Router + Pinia + AXIos + mitt + Husky + ESLint + CommitLint + Commitizen

Degree of difficulty ★☆

Knowledge coverage coefficient ★★★★

Having understood this branching code, I think I can cover **99%** of my development and quality management configuration requirements without touching on a specific UI framework.

Full – complete

On the basis of primary,

Add Docker configuration, a more complete project practice guide, and take advantage of Docker’s one-click project deployment.

Difficulty factor ★★★

Knowledge coverage coefficient ★★★★☆

Having understood this branching code, I think I can cover **99.9% of ** development requirements and quality management configuration and deployment requirements without touching on a specific UI framework.

Typescript branch

Transform all original projects to typescript versions. For example, mini => TS-mini.

Initialize the project template example

Templates do not pay attention to detail and expect only one of the simplest scenarios to implement the sample business.

Mini

  1. setupUse the sample
  2. Page adaptation example (usedisplay: grid)
  3. An example of sidebar adaptation
  4. vue-routerUse the sample
  5. piniaUse the sample
  6. axiosUse the sample
  7. prettierConfiguration of the sample
  8. style 的 v-bindThe sample

Primary

  1. MittThe sample
  2. eslint + commitlint + commitizen + husky + prettierProject quality management example
  3. Example of navigation bar jump

Typescript

  1. Vue3configurationtypescriptThe sample
  2. api + interfaceA simple use example of the interface

Afterword.

So far the package and template have only been in development for a week, and the content may be rudimentary, and there may be bugs or missing features. It is for this reason that you are urgently required to use the project and provide feedback.

Of course, the most important functions are already available.

If you’re one of those people, give it a try.