coderwhy CLI

Use the create command to scaffold a new Vue project. This command automatically pulls the project template, installs dependencies, starts the development server, and opens your browser to http://localhost:8080/.

The generated project includes pre-configured:

• Common directory structure
• vue.config.js (with aliases configured)
• axios (installed and secondary-wrapped)
• vue-router (installed with dynamic route loading support)
• vuex (installed with dynamic submodule loading support)

coderwhy create your_project_name

Install the coderwhy CLI globally using npm to start using the project scaffolding and development tools.

npm install coderwhy -g

The coderwhy CLI uses a specific Git repository as a template for creating new Vue-based projects. The template is located at direct:https://github.com/coderwhy/hy-vue-temp.git.

const vueGitRepo = "direct:https://github.com/coderwhy/hy-vue-temp.git";

Use the addcpn command to generate new Vue components. By default, components are stored in the src/components folder. You can specify a custom destination directory using the -d flag.

# Default location: src/components
coderwhy addcpn YourComponentName

# Custom location
coderwhy addcpn YourComponentName -d src/pages/home

Use the addstore command to generate a new Vuex submodule.

Default Behavior:

• Creates src/store/modules/[moduleName]/index.js and types.js.
• Automatic Integration: The main store file is pre-configured to dynamically scan the modules directory and integrate all submodules automatically. No manual registration in the main store file is required.

Custom Directory:

• You can specify a custom directory using the -d flag.

# Default: creates src/store/modules/home/index.js and types.js
coderwhy addstore home

# Custom directory
coderwhy addstore home -d src/vuex/modules

Use the addpage command to create a new Vue page.

Default Behavior:

• Creates the component in src/pages/[pageName]/[PageName].vue.
• Creates a router.js file in the same directory.
• Automatic Routing: The src/router/index.js file is pre-configured to dynamically scan the @/pages directory for any router.js files and automatically add them to the application's routes. No manual configuration is required.

Custom Directory:

• If you use the -d flag to specify a custom directory, the automatic routing integration will not work, and you must integrate the route manually.

# Default: creates src/pages/home/Home.vue and src/pages/home/router.js
coderwhy addpage Home

# Custom directory (requires manual routing integration)
coderwhy addpage Home -d src/views

Use addComponent to scaffold a new Vue component using EJS templates. It creates a .vue file in the specified destination directory.

Parameters:

• name: The name of the component.
• dest: The destination directory where the component file will be created.

addComponent('MyComponent', 'src/components');

Use addPage to scaffold a new Vue page. This is a composite action that:

1. Creates a new Vue component using addComponent.
2. Creates a corresponding router configuration file (router.js) in the destination directory using the vue-router.js.ejs template.

addPage('Home', 'src/views');

Use the createProject action to scaffold a new front-end project. This command performs the following steps:

1. Clones a Vue template repository from the configured Git repository.
2. Runs npm install in the new project directory.
3. Starts the development server using npm run serve.
4. Automatically opens your default browser to http://localhost:8080/.

// Note: This is an internal implementation of the CLI's project creation command.
// When using the CLI, you would typically run a command like:
// coderwhy create <project-name>

Use addVue3TSComponent to scaffold a Vue 3 component specifically designed for TypeScript. It uses the component3_ts.vue.ejs template.

addVue3TSComponent('UserCard', 'src/components');

Use addStore to scaffold a new Vuex store module. This action creates two files in the specified destination directory:

1. index.js: The main store module file (from vue-store.js.ejs).
2. types.js: A file for defining store types (from vue-types.js.ejs).

addStore('user', 'src/store/modules');

Use addVue3PageSetup to scaffold a Vue 3 page that utilizes the <script setup> syntax. This action:

1. Creates a Vue 3 component using the component3_ts_su.vue.ejs template.
2. Creates a corresponding .ts router file in the router directory using the vue-router4.js.ejs template.

addVue3PageSetup('Settings', 'src/views');