分享一个高性能灵活的多页面Vue脚手架
栏目: JavaScript · 发布时间: 6年前
内容简介:最近搭了个脚手架,主要特点是:遂推荐一波,希望能帮助到有需要的小伙伴。github:
最近搭了个脚手架,主要特点是:
- 自由控制开发哪个项目,可单页可多页
- 可自由配置外部cdn
- 可上传至七牛或阿里的存储空间
- 性能高,灵活。
遂推荐一波,希望能帮助到有需要的小伙伴。
github: 高性能灵活的多页面Vue脚手架
高性能灵活的多页面Vue脚手架
特点/优点
-
可以创建多个单独项目,每个单独项目可多页面可单页(
/src/project
下是不同项目,/src/project/...
下是该项目不同页面) - 配置CDN链接,公共资源使用CDN
- 打包完成后非CDN资源可上传至七牛云存储空间或阿里云OSS,部署时只需要html文件即可
-
充分的利用了缓存,性能高,可适用于经常需要做活动的
H5
页面
使用
-
在
src/project
创建新项目,例:hello
-
在
config
中的app.config.js
配置项目或在命令行中直接指定参数 -
在
config/cdnConf
创建与项目名相同的js文件,例:hello.js
,配置cdn,配置格式见,如果不配置则不适用外部cdn -
开发
yarn dev
或npm run dev
,后皆可接项目名称 ,例:yarn dev hello
则开发hello
项目 -
打包
yarn build
或npm run build
,后皆可接项目名称 ,例:yarn build hello
则打包hello
项目
解析
config/app.config.js
/** * 配置需要开发或打包的项目,项目名为 src/project 的文件夹名 * 如果命令参数中指定了项目则根据命令参数,否则是这里的配置,如果都不存在则按 src/project 下的第一个目录为准 * **/ const currentProject = 'test' /** * 配置使用阿里云OSS还是七牛云 * 阿里云OSS或七牛云的具体配置在下面的config中配置 * **/ const use = 'ali' // ali 或 qiniu const config = { currentProject: `project/${realProject}`, use, // 七牛相关配置 qiNiuCdn: { host: '', bucket: '', ak: '', sk: '', zone: '', prefix: '' // 路径前可自定义prefix }, // 阿里OSS相关配置 aLiOss: { host: '', accessKeyId: '', accessKeySecret: '', bucket: '', region: '', prefix: '' // 路径前可自定义prefix }, cdnLink: selfCdn[realProject], externalsConf: externalsConf } 复制代码
config/cdnConf
配置cdn链接,文件名与项目名即 src/project 的文件夹名相同
格式:
module.exports = { css: { normalize: 'https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css' }, js: { Vue: { packageName: 'vue', link: 'https://cdn.bootcss.com/vue/2.3.4/vue.min.js' } }, VueRouter: { packageName: 'vue-router', link: 'https://cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js' } } 复制代码
这里有几个点需要注意:
- css是直接引入,不像js那样会暴露全局变量,所以直接以字符串形式传递进去
-
js中,引入cdn会暴露一个全局变量,例如引入
https://cdn.bootcss.com/vue/2.3.4/vue.min.js
就暴露了一个Vue
变量,所以对象的 key 值就为Vue
,packageName为这个变量的包名,就是在yarn add xxx
或npm i xxx
的这个xxx
,这两个千万不能错,不然引入了cdn后会找不到变量
使用的时候,在项目中
import Vue from 'vue' // 这里的 Vue 就是 cdn 暴露出来的变量,vue就是包名 import VueRouter from 'vue-router' // 同上,其他类库也相似 复制代码
src/
├─common 所有项目的公共文件 │ ├─images │ ├─js │ └─styles ├─components 所有项目的公共组件 └─project 项目 ├─boost 项目1(多页 example) │ ├─helpFriends 页面1 │ ├─index 页面2 │ └─inviteFriends 页面3 └─test 项目2 (单页 spa example) └─index 页面1 ├─assets ├─components └─router 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Complete Web Monitoring
Alistair Croll、Sean Power / O'Reilly Media / June 29, 2009 / GBP 39.99
Do you know the true value of your website to your organization? i??Complete Web Monitoringi?? shows you how to integrate several different views of your online business - including analytics, back-en......一起来看看 《Complete Web Monitoring》 这本书的介绍吧!