vue-cli项目模板的一些思考
之前有个想法,就是要利用vue写一套ui。然后当时也没有搞清楚到底怎么写。
几经周转吧,通过付费的方式在gitbook上面找到了答案。
找到答案之后再看我们正在开发的项目,看伙伴写的代码,突然发现完全可以按照写ui组件库的方式调整目录结构。于是动手了,于是新的目录结构。
最重要的是终于从实际层面开始向上思考代码设计,思考架构设计。在我看来目录就是一种架构。
思考后的心得吧算是。
一,就vue脚手架来说,自动生成的项目模板是有改进或者根据实际需要作出重新设计的。重新设计的后要能够有更合适的扩展性。
比如组件化的扩展性,尤其全局组件,经过合理的重新安排目录,可以让全局组件发展成为组件库。然后全局的vue特殊属性,比如过滤器、指令等等也可以单独拿出开使用。
二,一些依赖性质的方法可以放在util里面,利用vue的原型和扩展方法intall,将方法挂在原型上面。
三,局部组件,局部指令,局部过滤器则单独放在页面内部或者组件内部。
四,生产环境下的一些依赖是可以全部使用dll进行打包压缩管理的,这样可以大大减少开发环境时候的内存需要
五,关于混入,混入是另一种形式重复解决方案
六,组件、混入、指令、过滤器、方法构成了可重复单元,vue原型上的方法不能出现在指令或者过滤器中。
一个优秀的项目模板是值得做一个专门的脚手架管理的,毕竟这是努力思考和日积月累的工作才得到的。
也是解决复杂问题的一个思路。有规则拆解。
vue-cli项目模板的一些思考的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- Vue.jsbrowserify项目模板
Vue.js——60分钟browserify项目模板快速入门 概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...
- Vue.js项目模板搭建
前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...
- Vue基础项目模板
https://github.com/wanglong/vue-element-admin.git 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍 一站式开源运维平台,分享给大 ...
- NPM安装vue-cli,并创建vue+webpack项目模板
1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:htt ...
- Vue H5 项目模板
使用了 mint-ui sass vue fastclick vue router 一个项目的初始化状态,一个新项目,陆陆续续花了2天时间搭起来的. 里面有mint-ui的基本用法 tabbar 还有 ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
随机推荐
- nginx负载均衡简单实例
nginx分配服务器策略 1.轮询(默认) 每一个请求按时间顺序逐一分配到不同的祸端服务器,如果后端服务器 down 掉,能自动抵触 2.weight(权重) weight代表权重,默认为1,权重越高 ...
- Linux赋予root权限
按照帖子都一一尝试了下 https://blog.csdn.net/yajie_china/article/details/80636783 首先增加用户和给新用户创建密码,都不用说 用useradd ...
- PAT Basic 1088 三人行 (20 分)
子曰:“三人行,必有我师焉.择其善者而从之,其不善者而改之.” 本题给定甲.乙.丙三个人的能力值关系为:甲的能力值确定是 2 位正整数:把甲的能力值的 2 个数字调换位置就是乙的能力值:甲乙两人能力差 ...
- selenium 模拟键盘事件 复制粘贴、右键、回车等
#coding=utf-8 ''' selenium ''' from selenium import webdriver as wd import time bc=wd.Chrome(executa ...
- ICPC2019上海站游记
银牌第4,差4名拿金 金牌就保研国奖,银牌就什么都没有 最痛苦的是功败垂成 也许签到罚时太多罢,也许构造做得太晚罢,也许J题没有做出来罢 翻来覆去,似乎也想不到得金的理由 福兮祸所倚 年轻人多遇到点挫 ...
- gdb设置条件断点
b +行号 if i==9:设置条件断点 finish:执行到当前函数返回处(退出函数) bt:打印栈帧关系
- [转载]yarn的安装和使用
yarn的安装和使用 2018-08-02 10:45:41 yw00yw 阅读数 50696 文章标签: yarn 更多 分类专栏: 工具 版权声明:本文为博主原创文章,遵循CC 4.0 BY- ...
- 矩阵库Numpy基本操作
NumPy是一个关于矩阵运算的库,熟悉Matlab的都应该清楚,这个库就是让python能够进行矩阵话的操作,而不用去写循环操作. 下面对numpy中的操作进行总结. numpy包含两种基本的数据类型 ...
- python3.6中 字典类型和字符串类型互相转换的方法
mydic = {"俄罗斯": {"1":"圣彼得堡", "2":"叶卡捷琳堡", "3& ...
- P4053 [JSOI2007]建筑抢修 堆贪心
思路:堆贪心 提交:1次 题解: 先按时间\(sort\),然后如果能修就直接扔堆里,不能修取堆顶比一下时间长短,把时间短的扔进堆: #include<cstdio> #include&l ...