Git Product home page Git Product logo

说明文档

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.js
coderwhy addpage YourPageName -d src/views # 也可以指定文件夹,但需要手动集成路由

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

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

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

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

创建Vuex子模块

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

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

// 动态加载modules
const modules = {}
const files = require.context('./', true, /index\.js$/);
files.keys().filter(key => {
  if (key === './index.js') return false;
  return true
}).map(key => {  
  // 获取名字
  const modulePath = key.replace('./modules/', '');
  const moduleName = modulePath.replace('/index.js', '');
  const module = 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 folder 
coderwhy 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.js 
coderwhy 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 file src/router/index.jswill be automatically loaded into the routing routesconfiguration, 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 pages 
const  files  =  require . Context ( '@/pages' ,  true ,  /router \. js $ / ) ; 
const  routes  =  files . Keys ( ) . Map ( key  =>  { 
  const  page  =  require ( '@/pages'  +  key . replace ( '.' ,  '' ) ) ; 
  return  page.default;
})

Create Vuex submodule

addstore YourVuexChildModuleName coderwhy # example coderwhy addstore home, the default will put src / store / modules / home / index.js and types.js 
coderwhy 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:

// 动态加载modules
const modules = {}
const files = require.context('./', true, /index\.js$/);
files.keys().filter(key => {
  if (key === './index.js') return false;
  return true
}).map(key => {  
  // 获取名字
  const modulePath = key.replace('./modules/', '');
  const moduleName = modulePath.replace('/index.js', '');
  const module = require(`${key}`);

  modules[`${moduleName}`] = module.default;
})

coderwhy's Projects

cartool icon cartool

Export images from OS X / iOS .car CoreUI archives

hy-event-store icon hy-event-store

An event-based global state management tool for vue, react, mini-program, ect.

hylabel icon hylabel

用于识别Label中的@用户-话题##-链接

hypromise icon hypromise

实现一个完整的、符合Promises/A+规范的HYPromise

live icon live

Demonstrate how to build a live broadcast app(Swift 3)

pinia icon pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

tobecoder icon tobecoder

Share various programming technologies to become a qualified coder.

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.