小程序中canvas怎样实现图案在线定制的功能-
前言
比来收到一个这样的需求,请求做一个基于 vue 和 element-ui 的通用后台框架页,概括请求如下:
-
请求通用性高,需要在后期四十多个子项目中运用，所以大局部地方都做成可配置的.
-
请求做成足手架的情势.可以 npm 安装
-
请求实现多页签,而且可以通过阅读器 url 回显多页签.并且页签内要保护一个历史记载，可今后退
-
组件请求异步加载,减少首屏加载工夫.
很显明,这就是一个 类 ERP 的利用. 做过 JSP 等后台的同窗,对多页签应当都很熟知吧.
那接下来我们就来谈谈实现.
通用性高
这点其实没啥难点,无非就是费事了点,把所有的数据,都提掏出来,放在一个 config 文件里面.然后在框架页里面引入,而且绑定到响应的位置上去. 这边有个比拼难以取舍的题目，就是要是把一溜的数据全部绑定到 vue 的 data 上面，因为数据量比拼多，会致使机能题目，要是分开，又会使配置文件看起来相对复杂，添加后期运用人员的学习老本。这块要看概括的项目需求，因为我这边临时对前端的机能请求没那么高，所以临时用全部绑定到 data 的方案
做成足手架情势
当初产品对这个的需求使做成组件的情势，然后发表 npm 包，利便后期更新的时候，只需更新一下 npm 就可以了，无需每个项目去复制粘贴替代，但是基于这是一个框架页，并且可配置项非常多，还要实现 tab 多页签等多方面的考虑，终究选中了足手架的方案，即使这样后期升级会略微费事一点(当初的方案是框架页放在一个文件夹里，到时候直接替代该文件夹)，但相关于组件来说，还是更好保护的，况且后期可以再写一个更新的足手架，究竟此刻发表一个 npm 工具的老本实在是太低了。
首先次开发足手架，看了许多社区的帖子，发明当前大局部足手架，个别都基于2种情势，一种基于文件复制的情势，另一种基于 git-clone 的情势，经过对照，我觉得文件复制的有点复杂了，我其实只是需要一个能一键安装的工具罢了，所以 git-clone 的情势还是比拼适合我。
下列就是足手架的代码，虽然只是简略的五六十行代码，不外查材料＋趟坑，也花了我一个上午的工夫。
#!/usr/bin/env node
const shell = require('shelljs');
const program = require('commander');
const inquirer = require('inquirer');
const ora = require('ora');
const fs = require('fs');
const path = require('path');
const spinner = ora();
const gitClone = require('git-clone')
const chalk = require('chalk')
program
.version('1.0.0', '-v, --version')
.parse(process.argv);
const questions = [{
type: 'input',
name: 'name',
message: '请输入项目名称',
default: 'my-project',
validate: (name)=>{
if(/^[a-z]+/.test(name)){
return true;
}else{
return '项目名称必需以小写字母开头';
}
}
}]
inquirer.prompt(questions).then((dir)=>{
downloadTemplate(dir.name);
})
function downloadTemplate(dir){
// 推断名目可否已存在
let isHasDir = fs.existsSync(path.resolve(dir));
if(isHasDir){
spinner.fail('目前名目已存在!');
return false;
}
spinner.start(`您选中的名目是: ${chalk.red(dir)}, 数据加载中,请稍后...`);
// 克隆 模板文件
gitClone(`https://github.com/noahlam/vue-multi-tab.git`, dir , null, function(err) {
// 移除无用的文件
shell.rm('-rf', `${dir}/.git`)
spinner.succeed('项目初始化成功!')
// 运转常用下令
shell.cd(dir)
spinner.start(`正在帮您安装依赖...`);
shell.exec('npm i')
spinner.succeed('依赖安装成功!')
shell.exec('npm run dev')
})
}
要是你这个足手架有疑难或者乐趣，可以直接拜访 github 上的代码 tab-cli
实现多页签
要想实现多页签，那么 vue-router 根本算是废了，为何？ vue-router 是依据 url 来切换单个组件的，而页签则需要再组件内部同时存在多个子组件的，所以路由没法胜任（至少我是这么以为的，要是你有更好的方案，恳请不惜赐教）。
多个页签的显示，其实不难， element 有现成的 tab 组件，于是老夫写代码就是一把梭，撸起袖子就是干，噼里啪啦一顿写，写完一测，没有任何题目，实在是不要太简略，丢给产品预览：
-
复制阅读器地址到另外地方粘贴，tab 不克不及准确回显
-
tab 内需要实现跳转，并且要能返回。
首先个题目比拼简略，本人手写一个基于 hash 的 伪路由 把目前 tab 的 id 放到 url 上去，然后回显的时候，依据 url 打开对应的 tab.
tip: 对于怎样实现路由，请看我别的一篇博客 本人动手实现一个前端路由
第二个题目，大约就是本文的重点了，这里细致注明一下需求，每个 tab 都可以在 tab 内部 跳转 ,这里的跳转，要做的跟 vue-router 的有大体上差未几，要能 push, replace, back,还能带参数。
那么怎么实现呢？ 第一保护一个打开的 tab 列表，然后每个列表里面再保护一个用过的组件列表(包括参数),这样大约就能实现了吗？固然不是，组件的跳转，参数的通报，不成能让运用者本人去实现这些办法吧，我选中把封装一个公共对象，然后挂载在 vue.prototype上。然后相似 vue.$router.xxxx 同样(我的命名是 vue.$tab)可以在页面的任何地方运用，要是你对概括的实现办法有乐趣，欢送点击本文结尾的链接，去我的Github仓库上查看。
组件异步加载
以前只用过基于 vue-router 的异步加载办法，然而这个项目里面并没有运用 vue-router,怎么异步呢？ 翻了一下 vue 的官方文档是这么写的：
Vue.component(
'async-webpack-example',
// 这个 `import` 函数会返回一个 `Promise` 对象。
() => import('./my-async-component')
)
然而我试了一下，发明报错了，import 不克不及在这里运用，换了 require 也不过关，不晓得上我哪里没弄好，要是你恰好晓得又恰好有空，请告诉我，感谢！背面在 segmentfault 上 看到 这一篇, 运用 webpack 的 require.ensure 可以实现
// 首先个字符串是 组件名，第二个是 组件途径，第三个是 chunkName (要是不指定则以1.js,2.js....n.js命名)
vue.component('home', (resolve) => {require.ensure([], ()=>resolve(require('@/Views/index.vue')), 'home')})
顺便还要在 webpack 里面的 output 下面配置一下 chunkFilename: '[name].js',, 固然文件名格局可以按你项目的需求来，我这边就按最简略的
