一个快速搭建vue项目的CLI

安装

• npm install yu-custom-cli -g
• yu --version 如果显示版本号 说明安装成功

创建项目

• yu create < your-project-name >

自动拉取模板、安装依赖、并打开浏览器http://localhost:8080/ 模板已经帮你配置好：

• 常用目录结构
• vue.config.js（配置了路径别名）
• axios（网络请求axios的安装以及二次封装）
• vue-router（router的安装和配置，路由的动态加载）
• vuex（vuex的安装和配置，动态加载子模块）

添加组件

• yu addcpn < your-component-name > -d url
• 不写url会默认放到src/components

添加页面和路由

• yu addpage < your-page-name > -d url
• 不写url会默认放到src/pages
• 还会创建router.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子模块

• yu addstore < your-store-name > -d url
• 不写url会默认放到src/store/modules
• src/store/index.js 动态加载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;
})