Giter Site home page Giter Site logo

javascript-data-structure's Introduction

说明文档

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;
})

javascript-data-structure's People

Contributors

coderwhy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

javascript-data-structure's Issues

JavaScript-Data-Structure/数据结构08-树/01_二叉搜索树.html ---remove

` bst.remove(9)
bst.remove(7)
bst.remove(15)

resultString = ''
bst.postOrderTraversal(function(key){
resultString += key + ' '
})
alert(resultString)`

  • 可以請問以上我輸出到chrome 為什麼出現Uncaught RangeError: Maximum call stack size exceeded at BinarySearchTree.BinarySearchTree.postOrderTraversalNode的錯誤?

  • 如果直接 alert(bst.remove(9)); alert(bst.remove(7)); alert(bst.remove(15));
    就會出現 undefined undefined false 的錯誤,why?

快速排序问题

老师,如果数据是
3, 66, 23, 20, 775, 21, 46, 13, 56, 2的话,
快速排序排完后的顺序是
3, 2, 20, 13, 21, 23, 46, 56, 775, 66
这是为什么?是因为775和其他的数据相差太大么?

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.