Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

CLI to help the front end developer

License

NotificationsYou must be signed in to change notification settings

coderwhy/coderwhy-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

coderwhy: 一个帮助你快速搭建和开发前端项目的CLI

想不起来其他名字，以这个命名吧~

如何安装？

npm install coderwhy -g

创建项目

目前支持Vue，后期会支持React，Angular考虑中~

vue项目模块已经帮你配置：

  • 常用的目录结构（你可以在此基础上修改）
  • vue.config.js（其中配置了别名，你可以自行修改和配置更多）
  • axios（网络请求axios的安装以及二次封装）
  • vue-router（router的安装和配置，另外有路由的动态加载，后面详细说明）
  • vuex（vuex的安装和配置，另外有动态加载子模块，后面详细说明）

创建项目

coderwhy create your_project_name

自动拉取项目模板、安装项目依赖、打开浏览器http://localhost:8080/、自动启动项目

项目开发

项目开发目前提供三个功能：

  • 创建Vue组件
  • 创建Vue页面，并配置路由
  • 创建Vuex子模块

创建Vue组件：

coderwhy addcpn YourComponentName# 例如coderwhy add NavBar，默认会存放到src/components文件夹中coderwhy addcpn YourComponentName -d src/pages/home# 也可以指定存放的具体文件夹

创建Vue页面，并配置路由

coderwhy addpage YourPageName# 例如coderwhy addpage Home，默认会放到src/pages/home/Home.vue中，并且会创建src/page/home/router.jscoderwhy addpage YourPageName -d src/views# 也可以指定文件夹，但需要手动集成路由

为什么会创建router.js文件：

  • router.js文件是路由的其中一个配置；
  • 创建该文件中src/router/index.js中会自动加载到路由的routes配置中，不需要手动配置了（如果是自己配置的文件夹需要手动配置）

src/router/index.js中已经完成如下操作：

// 动态加载pages中所有的路由文件constfiles=require.context('@/pages',true,/router\.js$/);constroutes=files.keys().map(key=>{constpage=require('@/pages'+key.replace('.',''));returnpage.default;})

创建Vuex子模块

coderwhy addstore YourVuexChildModuleName# 例如coderwhy addstore home，默认会放到src/store/modules/home/index.js和types.jscoderwhy addstore YourVuexChildModuleName -d src/vuex/modules# 也可以指定文件夹

创建完成后，不需要手动配置，已经动态将所有子模块集成进去：

// 动态加载modulesconstmodules={}constfiles=require.context('./',true,/index\.js$/);files.keys().filter(key=>{if(key==='./index.js')returnfalse;returntrue}).map(key=>{// 获取名字constmodulePath=key.replace('./modules/','');constmoduleName=modulePath.replace('/index.js','');constmodule=require(`${key}`);modules[`${moduleName}`]=module.default;})

Documentation

coderwhy: A CLI to help you quickly build and develop front-end projects

Can't think of other names, so just use coderwhy~

How to install？

npm install coderwhy -g

Create project

Currently Vue is supported, React will be supported later, Angular is under consideration~

The vue project module has been configured for you:

  • Common directory structure (you can modify on this basis)
  • vue.config.js (alias is configured, you can modify and configure more by yourself)
  • axios (network request axios installation and secondary packaging)
  • vue-router (router installation and configuration, in addition to dynamic loading of routing, detailed description later)
  • vuex (installation and configuration of vuex, there are also dynamic loading sub-modules, which will be described in detail later)

Create project

coderwhy create your_project_name

Automatically pull project templates, install project dependencies, open browsers,http://localhost:8080/and automatically start projects

Project Development

Project development currently provides three functions:

  • Create Vue components
  • Create a Vue page and configure routing
  • Create Vuex submodule

Create Vue components:

addcpn YourComponentName coderwhy# example coderwhy add NavBar, the default will be stored in src / components foldercoderwhy addcpn YourComponentName -d src / Pages and the / Home# specific file can also specify the destination folder

Create a Vue page and configure routing

addPage YourPageName coderwhy# example coderwhy addpage Home, the default will put src / pages / home / Home.vue, and will create a src / Page / Home / router.jscoderwhy addPage YourPageName -d src / views# You can also specify a folder , But need to integrate routing manually

Why is the router.js file created:

  • router.jsThe file is one of the routing configurations;
  • Create the filesrc/router/index.jswill be automatically loaded into the routingroutesconfiguration, do not need to manually configured (if it is to configure their own folder requires manual configuration)

src/router/index.jsThe following operations have been completed in:

// Dynamically load all routing files in pagesconstfiles=require.Context('@/pages',true,/router\.js$/);constroutes=files.Keys().Map(key=>{constpage=require('@/pages'+key.replace('.',''));returnpage.default;})

Create Vuex submodule

addstore YourVuexChildModuleName coderwhy# example coderwhy addstore home, the default will put src / store / modules / home / index.js and types.jscoderwhy addstore YourVuexChildModuleName -d src / vuex / modules# You can also specify a folder

After the creation is completed, no manual configuration is required, and all sub-modules have been dynamically integrated:

// 动态加载modulesconstmodules={}constfiles=require.context('./',true,/index\.js$/);files.keys().filter(key=>{if(key==='./index.js')returnfalse;returntrue}).map(key=>{// 获取名字constmodulePath=key.replace('./modules/','');constmoduleName=modulePath.replace('/index.js','');constmodule=require(`${key}`);modules[`${moduleName}`]=module.default;})

About

CLI to help the front end developer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp