README
互创WEB端框架开发指南
框架介绍(当前版本 : 0.1.0)
互创web端框架系统提供快速集成打包能力,包含登录,授权,主界面,并提供公共组件,公共js,公共样式等能力
http://119.3.93.146:8083/hc-cloud
框架项目地址安装
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'