互创WEB端框架开发指南

框架介绍（当前版本 ： 0.1.0）

互创web端框架系统提供快速集成打包能力，包含登录，授权，主界面，并提供公共组件，公共js，公共样式等能力

安装

npm install hc-framework -S

快速开始

## 创建入口main.js

import Vue from 'vue'
import store from '@hc-framework/store'
import router from './router'
import App from './App'
import index from "@hc-framework/index";
Vue.use(index)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

## 集成路由程序 router.js

import Vue from 'vue'
import Router from 'vue-router'
import {constantRoutes,addDynamicRoute,setConfig, beforeEach, afterEach} from '@hc-framework/router'
import Layout from "@hc-framework/layout";
Vue.use(Router)
const moduleRoutes = [
  {
    path: '/user',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [
      {
        path: 'profile',
        component: (resolve) => require(['./views/组件地址'], resolve),
        name: 'Profile',
        meta: { title: '个人中心', icon: 'user' }
      }
    ]
  },
]
})
const router = new Router({
  mode: 'hash',
  scrollBehavior: () => ({y: 0}),
  routes: constantRoutes.concat(moduleRoutes)
})

// 配置router
setConfig(router, moduleRoutes, (url) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`./views/${url}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`./views/${url}`)
  }
})
router.beforeEach((to, from, next) => beforeEach(to, from, next))

export default router

##依赖包 系统编译阶段必须包含依赖babel

{
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.16.7",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/cli-plugin-babel": "4.4.6",
  }
}

babel.confog.js配置

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset',
  ],
}

脚手架

由于框架项目采用源码包打包方式，所以在编译时请配置额外的打包路劲

vue cli

module.exports = {
  transpileDependencies: [    //告诉脚手架需要通过babel额外编译框架包
    /[/\\]node_modules[/\\]hc-framework[/\\]lib[/\\]/,
  ],
  configureWebpack: {
    name: name,
    resolve: {
      alias: {    //此处为优化项，为子系统提供快捷访问公共组件的能力
        '@hc-framework': resolve('node_modules/hc-framework/lib/')
      },
    }
  },
}

webpack

module:{
       rules:[  //规则
           {   //.js文件或者.jsx文件处理
               test:/\.(js|jsx)/, 
               loader:"babel-loader",
               include:path.join(__dirname,"../node_modules/hc-framework")
           },
       ]
   }

API 介绍

###组件引用 （示例）

import store from '@hc-framework/components/'

###js引用 （示例）

import auth from '@hc-framework/utils/auth'

###store引用（示例）

import store from '@hc-framework/store'