优点 SPA单页面应用程序最显著的3个优点如下： 1.良好的交互体验 单页面应用的内容的改变不需要重新加载整个页面 获取数据也是通过Ajax异步获取 没有页面之间的跳转，不会出现“白屏现象” 2.良好的前后端分离工作模式....x和2.x） vite的基本使用 创建vite项目 按照顺序执行以下的命令，即可基于vite创建vue3.x的工程化项目： npm init vite-app 项目名称 cd 项目名称 npm install...组件注册时名称的大小写 在进行组件的注册时，定义组件注册名称的方式有两种： ① 使用 kebab-case 命名法（俗称短横线命名法，例如 my-swiper 和 my-search） ② 使用 PascalCase...props的好处：提高了组件的复用性。 在组件中声明props 在封装vue组件时，可以把动态的数据项声明为props自定义属性，自定义属性可以在当前组件的模板结构中被直接使用。..."> props的大小写命名 组件中如果使用"camelCase(驼峰命名法)"声明了props属性的名称，则有两种方式为其绑定属性的值： 发布时间：
前言 网上关于动态文档生成工具有很多如：Docsify、 VuePress、Docute 、Hexo这些都是一些非常优秀的文档生成工具，本章主要介绍如何快速使用Docsify搭建一个快捷、轻量级的个人...) 轻量&完善的Docsify模板 该模板为一个简洁，并且完善的Docsify模板基本上可以满足百分之八十多的团队需求，你可以按照文章中的Docsify环境配置教程把运行Docsify所需要的环境配置起来...Node.js最新最详细安装教程 win+r：cmd进入命令提示符窗口，分别输入以下命令查看node和npm的版本能够正常显示版本号，则安装成功： node -v：显示安装的nodejs版本...npm -v：显示安装的npm版本 docsify-cli工具安装 推荐全局安装 docsify-cli 工具，可以方便地创建及在本地预览生成的文档。...最大支持渲染的标题层级 maxLevel: 5, // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
} catch (error) { log.error(error.message); } } 安装模板，根据模板类型安装标准模板或者自定义模板。...使用 ejs 修改 hzw-cli-dev-template-vue3 这个模板 template 目录下的 package.json 文件 "name": "",..."version": "", 然后修改外层 package.json 的版本号 npm publish 发布新版本到 npm。...PS： 因为发布到 npm 的版本号必须是正常的版本号，所以才需要嵌套一层，将外层作为 npm 模块，内层作为模板。...]+([-][a-zA-Z0-9]|[_][a-zA-Z0-9]|[a-zA-Z0-9])*$/; return reg.test(a) } // 是否在执行init 命令的时候就传入了正确的项目名称
本篇博客主要介绍了如何使用commander, inquirer以及chalk从零开始，创建属于自己的命令行工具。 0....一分钟体验 首先我们先花一分钟的时间，体验一下创建自己的命令行cli工具是什么感觉。 0.1. 新建项目目录 假如我们的项目名称叫hello-cli，使用如下命令新建项目目录。...mkdir hello-cli && cd hello-cli 0.2. 初始化项目 接下里使用npm-init命令来初始化一个简单的package.json文件。...let config = { // 假设我们需要用户自定义项目名称 projectName: null }; // 使用chalk打印美化的版本信息...option('-p, --post', 'add post')，然后就可以通过option参数获取到-p后面，用户输入的参数的值。
作用 用于定义命令程序的版本号 option 作用 定义命令的选项 参数说明 它接受四个参数，在第一个参数中，它可输入短名字 -i和长名字–-init,使用 | 或者,分隔，在命令行里使用时，这两个是等价的.../index.js"，也就是我们全局的指令为senlin 这个没什么好说的，就是用来输出当前cli的版本号： ? senlin -l 这个是查看可用模版列表，目前我们有两套模板。...我们结合上文的流程图来梳理下这块的逻辑： 首先，利用inquirer提供给用户输入自定义信息（包含项目名称、项目简介、作者名称、选择项目模版）。...package.json 文件中 console.log("选择", answers.template.split(" ")[0]); 通过answers可以获取到用户输入的信息，接下来我们要做的就是检查用户输入的项目名称是否已存在...完整代码 最后贴下完整的代码，今天介绍的这些只是cosen-cli中的比较基础的一部分，我们针对业务在cli上做了很多事情。本文只是简单的向大家介绍一下如何基于业务开发自己的脚手架。
：输出数字化字体 standard-version： 版本管理 因为我是前端 node对于我来说比较友好，node 环境电脑一般都有，写这种cli js其实是比较好的选择，灵活高效。...思路 开发cli 的目的主要是为了管理模版 ，所以我们需要自定义输入模版，这就用到了本地存储，存储选用文件存储。...使用的工具，unbuild 简单高效。...(); // 获取项目名称 const topTemplateList = templateList?...., _gitUrl: string) => { // 获取模板列表 const tempList = await getTemplateList(); // 获取自定义组
（给达达前端加星标，提升前端技能） 面试官问：Vue如何安装的呢？ 达达回答：Vue的安装可以从两个方面进行安装，第一种是CDN引入，第二种是NPM安装。...，如何创建Vue项目？...： v-if用于元素的被销毁和重建，使用这个指令开销较为高，在运行过程中，尽量用在很少改变时的情况下使用。...说一说 达达回答：好的 vue-cli安装，第一用npm安装 npm -v vue-cli安装 npm install vue-cli -g vue -V -g代表全局安装，然后查看版本 初始化项目 用...vue-cli官方提供的5种模板 webpack webpack-simple browserify browserify-simple simple ：标识项目名称，用户根据自己的项目来起名字
环境是由Vue-Cli搭建的webpack模板，省略CSS部分 HTML部分 <div class...打印出的元素 可见，这个就是我们常见的DOM对象，注意在1.X中分别使用$els和$refs获取DOM对象和组件的集合，2.0以后统一使用$refs 2.x中的坑 我们知道HTML中是不区分大小写的...，因此在JS中使用的驼峰命名法，在HTML中应该改为短横线命名法。...所以， ref属性统一使用驼峰命名法 ref属性统一使用驼峰命名法 ref属性统一使用驼峰命名法 小结 在我们获取到对象以后，便能便捷的使用getElmentByXXX方法，也能通过原生方法去修改...但是Vue并不推荐使用手动操作DOM对象，获取DOM对象也最好用于获取对象的属性，如clientHeight等，当你真正领会数据驱动的时候，你就会发现你看到了一片新的天地。 就是这样:)
（给达达前端加星标，提升前端技能） 面试官问：Vue如何安装的呢？ 达达回答：Vue的安装可以从两个方面进行安装，第一种是CDN引入，第二种是NPM安装。...： v-if用于元素的被销毁和重建，使用这个指令开销较为高，在运行过程中，尽量用在很少改变时的情况下使用。...说一说 达达回答：好的 vue-cli安装，第一用npm安装 npm -v vue-cli安装 npm install vue-cli -g vue -V -g代表全局安装，然后查看版本 初始化项目...>：表示模板名称 vue-cli官方提供的5种模板 webpack webpack-simple browserify browserify-simple simple ：标识项目名称，用户根据自己的项目来起名字。
开篇经过上篇文章的介绍，实现了可以根据用户选择的模板名称加上对应的版本号，可以下载对应的模板，并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。...拷贝模板例如我现在在终端当中输入 nue-cli create neo 命令，如下图：从图中可以看到除了指令部分之外的内容就是所在的目录文件地址，我要操作的就是将之前下载的模板文件内容拷贝到这个目录下，...如何拷贝？获取到当前所在的目录地址，这个可以通过 Node 中的 path 模块进行实现，使用 path 模块中的 resolve 方法，将当前所在的目录地址获取到。...(projectName));测试方式与之前一样，我将之前的代码注释掉，然后执行 nue-cli create neo 命令，看一下控制台输出的内容：从图中可以看到输出的内容就是当前所在的目录地址加上输入的项目名称...地址完成了，标题所存在的问题还是没有得到解决，那就是如何拷贝文件到这个目录下。
写在前面 其实很多公司或者资深的开发都有自己快速创建项目的脚手架的，有的是魔改代码生成器实现，有的直接基于T4，RazorEngine等模板引擎打造；但无论如何，其最终目的其实就是搭建一个自定义项目模板...今天我们聊聊：如何基于官方的cli donet new 命令创建自己的项目模板。...，并在vs新建项目时可供选择创建项目，或者使用cli命令直接创建； 当然，还有公开模板： https://dotnetnew.azurewebsites.net/ 创建自己的模板 1、先准备好一个项目...-n 或 --name 选项提供要替换的值,不写了话项目名称不变 "preferNameDirectory": true, //创建项目的目录层级； "symbols": { //自定义语法...-Source参数，如果你有搭建好自己的nuget服务端的话改成你自己的； 如何使用一个模板 模板有了，怎么用这个就简单了； vs使用 在创建项目时直接选择自定义模板 不过这样的话，自定义参数都是用默认值
我们可以借助 CODING CI，来实现云函数的自动化部署，简化我们的工作量。 接下来，我将介绍一下如何构建一个流水线，实现自动化部署云开发中的云函数。 1 工作流梳理 我们先梳理一下流水线的工作流。...选择新建项目时的所用到的模板，这里选择 DevOps 模板，进入下一步。 ? 填写项目名称、项目描述，完成创建。 ?...使用主账号登录 https://console.cloud.tencent.com/cam/capi，根据提示创建子用户，选择自定义创建，选择类型为可访问资源并接收消息。...下一步，完成子用户的创建，请保存好 SecretId 和 SecretKey 信息。 ? 5 创建 TCB 云开发项目 在本地使用 TCB CLI 创建一个云开发项目。...选择关联的环境，这里我选择 mytest 环境，输入项目名称 mytest，选择开发语言，目前支持 PHP、Java 和 Node 三种语言，这里我选择 Node，选择云开发模板，这里我选择 Hello
本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。...子组件要使用 props选项声明它期待获得的数据 官方的解释非常清晰了:两者之间需要有一个通讯工具才可以获取到对方的数据,props就是这个通讯工具,并且在通讯时需要说明我想得到什么数据; 先从组件之间的作用域说起...123，第二个的值是456（虽然他们都是btn）但由于作用域不同,所以不会互相影响 如何使用props绑定静态数据： 【1】这种方法用于传递字符串，且值是写在父组件自定义元素上的。...【4】驼峰写法 假如插值是驼峰式的， 而在html标签中，由于html的特性是不区分大小写（比如LI和li是一样的），因此，html标签中要传递的值要写成短横线式的（如btn-test），以区分大小写。...（除非插值不写成驼峰式——跳过大小写的限制，才可以） 利用props绑定动态数据： 简单来说，就是让子组件的某个插值，和父组件的数据保持一致。
egg.js + 云 mongodb 的集成 开发前端项目模板 egg.js 获取项目模板 API 开发 项目模板下载功能开发 inquirer 源码解析，彻底搞懂命令行交互 创建功能架构设计 可拓展...：能够快速复用到不同团队，适应不同团队之间的差异 低成本：在不改动脚手架源码的情况下新增模板，且新增模板的成本很低 高性能：控制存储空间，安装时充分利用 node 多进程提升安装性能 创建功能架构设计图...const Command = require('@hzw-cli-dev/command'); const log = require('@hzw-cli-dev/log'); const inquirer...semver.valid(a) || '请输入合法的版本号'; }, filter: (a) => { if (!!...: projectName 项目名称 , 命令的 options , commander实例 * @return {*} */ function init(argv) { return new
wepy版本：最新的1.7.2版本 安装wepy 命令行在指定目下执行 npm install wepy-cli -g 进行全局配置wepy环境。...wepy init standard myproject 是原生的官方模板 初始化工程命令。通过 wepy list可以查看模板的列表， 目前模板比较少，主要有两个weui zanui。...步骤 在指定目录下执行初始化工程命令 wepy init + 模板名称 +自定义项目名称。 执行完毕后 cd 到自定义项目名称目录下 执行 npm install 进行相关的依赖安装。...image.png 微信工具打开后编译正常, 出现正常显示的界面, 环境就配置完毕了, 开发中一般很少人使用微信的开发工具。...会使用 Sublime、 Jetbrains、 IDEs 、Atom、 VS Code、VIM 等工具进行开发。 相关的高亮提示配置在官方文档也有。
$refs . txt ) } } 任务 通过ref功能,点击按钮时获取input的value值 基础 - 自定义指令 - 全局自定义指令 使用场景 : 需要对普通...将 2.0 的功能补齐到目前的脚手架上 注意 : vue 生成的模板的有难有易 简单业务 => 简易模板 复杂业务 => 内容丰富模板 基础 -vue-cli...- 创建项目 注意 : 文件目路径不能有中文 创建 : 采用 cli 2.0 的特性 ( 生成简易模板 ) 创建： 采用 cli 4.0 特性 ( 两种 默认 / 选填...基础 -vue-cli- 项目目录解释 # 1.heroes 创建的项目名称 $ vue init webpack-simple heroes // webpack-simple...基础 -vue-cli- 简化模板代码 介绍 : 在 cli 开发模式下 , 一个 *.vue 文件就是一个组件 template 组件的页面结构 代表它的 html
文章看起来觉得比较费劲的可以直接移步我的github，源码奉上 源码 先看效果： 实现过程中可能存在的问题 如何获取用户的输入 如果根据用户的输入进行相应的操作 如何自定一个packag.json...// 注意这里必须在项目文件中执行，不可以全局执行 实现过程 脚本命令参数设计 wlm --help 查看使用帮助 wlm -V |--version 查看工具版本号 wlm list 列出所有可用模板...('如何使用该cli') // 当用户输入-h 的时候提示的描述信息 // 接受到用户输入的命令之后进行的操作 .action(()=>{ log(logSymbols.info, chalk.yellow...wlm use ℹ 第一步：运行 wlm list ℹ 第二步：运行 wlm init 模板名称 自定义名称 ℹ 第三步：按照步骤初始化模板即可 有了上述工具之后我们可以做的事情就比较多了，首先可以自定义指令...，之后可以根据自定义指令进行action的操作，action中有回调参数，可以获取到当前用户的操作结果，具体的使用说明可以看上方提供的github链接中的说明文档，这里不做赘述 说明 该功能插件提供很多命令操作和很多选项操作
我们在编程学习的过程中也会写一些项目的模板，这样的模板在后期其实并没有进行很好的管理，以至于下次再来回顾或使用的时候还需要从“零”开始，在使用过 Vite 来创建项目后顺便拿看了一下仓库中create-vite...CLI 工具后再执行对应的创建命令，另一种就是 Vite 目前采用的直接通过包管理器内置命令使用统一的规范来实现项目的快速创建； 如果你使用 YARN： # yarn yarn create vite...接下来就可以按终端提示进行项目名称的录入和项目模板的选择了~ 2.1.2 终端指定模版创建项目： 如果我们很明确内置的模板选项的话我们可以在终端执行时同时录入项目名称和模板名称更快速的创建项目； #...，因为在前期收集参数可能是个目录，这儿创建的时候需要递归创建，但是当目录存在且有内容的时候我们就需要清空掉里面的文件了，但是在清空的时候我们要考虑当时目录可能已经被版本管理过了，所以需要对.git目录过滤掉...总结 在源码中还支持了第三方模板通过自定义命令来创建项目，关键词可以搜索 customCommand ，整体源码是很简单的，你准备好为自己创建一套模板管理工具了吗~
可以通过transition组件自定义过渡动画的类名，可以方便结合第三方的动画库使用，比如：animate.css // transition组件的属性 enter-class enter-active-class...为什么要用vue-cli 可以快速创建vue项目结构,而不需要我们一点点的去创建/管理项目所需要的各种文件夹/文件 什么是vue-cli vue-cli是npm包 vue-cli 提供一个官方命令行工具...使用vue-cli # 安装 Vue CLI 脚手架 # 如果已经安装过则不需要 # 这里安装的是最新版本 3版本 npm install -g @vue/cli # 执行vue --verson查看是否安装成功...， # 显示vue的版本，就是安装成功了 vue -V # 如果仍然要使用vue-cli 2版本的指令 需要安装一个桥接工具 npm install -g @vue/cli-init # 使用脚手架工具初始化你的项目...# webpack-simple是一种工程模板 vue init webpack-simple 项目名称 # 进入你初始化好的项目 cd 项目路径 # 安装项目模板所需要的依赖 npm i #
背景 在平时工作中会有遇到许多以相同模板定制的小程序，因此想自己建立一个生成模板的脚手架工具，以模板为基础构建对应的小程序，而平时的小程序都是用mpvue框架来写的，因此首先先参考一下Vue-cli的原理...知道原理之后，再定制自己的模板脚手架肯定是事半功倍的。 ---- 在说代码之前我们首先回顾一下Vue-cli的使用，我们通常使用的是webpack模板包，输入的是以下代码。...我们将源码下载下来，源码仓库点击这里，平时用的脚手架还是2.0版本，要注意，默认的分支是在dev上，dev上是3.0版本。...在看完vue-init命令的原理之后，其实定制自定义的模板是很简单的事情，我们只要做2件事 首先我们需要有一个自己模板项目 如果需要自定义一些变量，就需要在模板的meta.js当中定制 由于下载模块使用的是...原理解析都是基于vue-cli 2.0的，但实际上 3.0也已经整装待发，如果后续有机会，深入了解之后，再和大家分享，谢谢大家。 ---- 参考文章 vue-cli是如何工作的]6
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
