Git Product home page Git Product logo

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

hymall's People

Contributors

coderwhy avatar qwe12369 avatar wangzi9521 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hymall's Issues

建议

老师,建议您做一下屏幕适配

debounce

防抖函数debounce在setTimeout中通过apply执行的函数(debounce第一个参数)中的this(apply第一个参数)测试为undefined,感觉应该在debounce中传入一个'this'(项目中为this.$refs.scroll)
// 防抖函数 export function debounce(func, that = null, delay = 500) { // 回调函数,和回调函数要执行须等待的时间ms let timer = null // this => Vue组件 return function (...args) { // this => undefined if (timer) { clearTimeout(timer) } timer = setTimeout(() => { // 测试证明此处使用this => undefined func.apply(that, args) //func() }, delay) } }

主页中关于滚动条的Bug

主页Home组件的data中使用了一个scrollY来记录deactivated时滚动条的位置,但是主页中包含了:'流行',‘新款'、‘精选’三类,只使用一个变量记录滚动条的位置,那岂不是三个选项activated时要滚动的位置被同步了

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.