前端架构: 从vue-cli探究脚手架原理

Wang's Blog Wang's Blog 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.3k累计阅读 2.3k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄12年
关注
原创 2024-02-21 22:30:48 2.3k 阅读 AI 写同款· GEO 优化 ›
Vue-cli原理分析 背景 在平时工作中会有遇到许多以相同模板定制的小程序，因此想自己建立一个生成模板的脚手架工具，以模板为基础构建对应的小程序，而平时的小程序都是用mpvue框架来写的，因此首先先参考一下Vue-cli的原理。知道原理之后，再定制自己的模板脚手架肯定是事半功倍的。 在说代码之前我们首先回顾一下Vue-cli的使用，我们通常使用的是webpack模板包，输入的是以下代码。 vue init webpac... 阅读详情

从使用角度理解什么是脚手架

  • 脚手架本质是一个操作系统的客户端
    • 在终端中去执行一个命令，这个命令本身它就是一个客户端
    • 我们其实可以把脚手架理解为操作系统的一个客户端
    • 通过命令去执行它的时候，这个命令往往是这样的一个构造，如下
  • 比如：要创建一个vue的项目的时候, $ vue create vue-test-app
    • 上面这条命令由3个部分组成
      • 主命令: vue
      • command: create
        • 这个 command 是子命令，实际上它向脚手架(主命令)发送一个请求
        • 这个请求，让我们的脚手架帮我们完成一个动作，完成这个动作，就是create创建项目
      • command的param: vue-test-app
        • 建什么项目呢？看这第三个参数，在command后面，又加了一个空格，输入了一个参数
    • 这个命令输入完以后，脚手架会给我们一定的反馈, 比如说会让我们做一些选择，或者会帮我们执行一些操作等等
    • 它表示创建一个vue项目，项目名称为 vue-test-app
  • 以上是一个较为简单的脚手架命令，但实际场景往往更复杂，比如:
    • 当前目录已经有文件了，我们需要覆盖当前目录下的文件，强制进行安装 vue 项目，此时我们就可以输入
    • $ vue create vue-test-app --force
      • --force 叫做 option, 用来辅助脚手架确认在特定场景下用户的选择(可以理解为配置)
      • 如果加入了 --force，就等于告诉脚手架创建项目的时候，可以强制进行覆盖
      • 如果没加 --force, 那么脚手架的执行就会中断。因为你没有强制覆盖，而我当前又有文件，所以我就会中断
      • 其实 --force 可以理解为 --force true, 简写为：--force 或 -f
  • 还有一种场景, 通过 vue create 创建项目时，会自动执行 npm install 帮用户安装依赖
    • 如果我们使用淘宝源来安装，就可以输入命令 vue create vue-test-app --force -r https://registry.npm.taobao.org
    • 这里的 -r 也是 option, 它与 --force 不同的是它使用 -，并且使用简写
    • 这里 -r 也可替换成 --registry，同时，我们可以通过 vue create --help 来查看其他可用命令
    • -r https://registry.npm.taobao.org 后面的 https://registry.npm.taobao.org 成为 option的param

脚手架原理

  • 我们需要理解输入了 $ vue create vue-test-app 之后，为什么会发生一系列的事情

  • 我们先要理解整个 vue 脚手架的体系，如下图

  • 通过 $ which vue 可看到 /usr/local/bin/vue, 这里的vue其实是一个软连接
    • 参考：vue -> …/…/…/Users/xxx/.config/yarn/global/node_modules/.bin/vue
    • 前面的 vue 其实执行的就是后面路径里的vue命令
  • 程序员在终端中输入 $ vue create vue-test-app
  • 终端解析出 vue 命令
  • 终端在环境变量中找到 vue 命令
  • 终端根据 vue 命令链接到实际文件 vue.js
  • 终端利用 node 执行 vue.js
  • vue.js 解析 commond / options
  • vue.js 执行 commond
  • 执行完毕，退出

从应用角度开发

  • 以 vue-cli 为例开发一个脚手架

    • 比如：/Users/johnny/.config/yarn/global/node_modules/@vue/cli

  • 其目录结构

    LICENSE
README.md
bin
lib
node_modules
package.json

  • 需要开发一个 npm 项目，该项目中应包含一个 bin/vue.js 文件，并将这个项目发布到 npm

  • 将 npm 项目安装到 node 的 lib/node_modules，或者如: /…/yarn/global/node_modules

  • 在 node 的 bin 目录下配置 vue 软链接指向 lib/node_modules

  • 在执行vue命令的时候，就可以找到 vue.js 进行执行，这样一个板顶关系，在package.json中

    {
  "bin": {
    "vue": "bin/vue.js"
  }
}

  • 这个就是 vue 和 vue.js 之间的绑定关系

  • 这就是为什么全局安装 @vue/cli 后会添加的命令为 vue

  • $ npm i -g @vue/cli 全局安装 @vue/cli 时发生了什么？

    • 在安装时，会把当前npm包下载到 lib/node_modules
      • 或者如: /…/yarn/global/node_modules 下
    • 之后解析 package.json 中的 bin 属性
    • 创建一个软连接 /usr/local/bin/vue 指向 /../yarn/global/node_modules/@vue/cli/bin/vue.js 中

  • 执行vue命令时，发生了什么？为何 vue 指向了 js 文件，却可以通过 vue 命令执行它

    • 操作系统，会根据 $ which vue 中的 vue 路径找到 vue执行文件，如果 vue 命令不存在，会报出 command not found 的提示
    • 这个vue执行路径其实是一个软链接，通过这个软连接找到真实的 vue地址，对应的就是 上述 /…/bin/vue.js
    • 这个 vue.js 是一个 js文件，即使有执行权限，也不可直接执行，需要一个 node 的解释器，就是类似 node /…/bin/vue.js
    • 但是很明显，在执行vue命令时，并没有冠以 node 的前缀，直接进入 /…/yarn/global/node_modules/@vue/cli/bin/vue.js
    • 可看到，最顶部有一个声明 #!/usr/bin/env node 这个声明可以直接让 xx.js 文件直接在操作系统执行
    • 意思是，告诉操作系统，在直接调用这个文件的时候，到环境变量中去找 node 命令，类似的，如果是个python文件，将node修改成 python
    • /usr/bin/env 会列出所有环境变量，在这个环境变量列表中找到 node 命令
    • 通过 node 命令来执行这个 js 文件
    • 因此，任何js文件，只要在文件顶部加上这个声明，即可 直接执行 (这里限制在 unix 系统)
    • 此时， ./xx.js 等价于 node xx.js
    • 注意，#!/usr/bin/env node 这样写的好处是
      • 无需关注每一个电脑环境下的node路径
      • 这个也可替换成具体的node路径也是一样的，但是会非常的麻烦，而且换个环境可能就不能用了
      • 所以，还是采用这种方式来处理

  • 现在我们想要用 mycommand (这个是我们自定义脚手架随意举例) 指向 xx.js，就可以通过创建软链接的方式来处理

    • 进入到 /usr/local/bin 目录
    • 创建软链接 $ ln -s /../xx.js mycommand
      • 注意，这里的 /…/xx.js 是当前脚本的路径，替换成自己的即可
    • 可看到当前目录下有一个 imooc 的文件
    • 此时，在系统内任意位置，只需要执行 mycommand 即可运行 xx.js

  • 这个就是我们自定义的脚手架 mycommand 的基本设定

最后，描述一下脚手架命令执行的一个整个过程

脚手架的本质是操作系统上的一个客户端

  • 可以发现脚手架执行起来的过程和前端开发的应用是非常不一样的
  • 其实它和web应用从本质上来讲，没有关系
  • 它们的联系仅仅是脚手架和开发的web应用都是通过 js 这个语言来进行编写的
  • 但其实脚手架它其实是操作系统当中的一种机制
  • 执行脚手架的时候，它其实是被作为一个操作系统上的可执行文件来进行执行的
  • 所以可以说我们开发的脚手架就是操作系统上的一个客户端
  • 我们的脚手架它本质执行起来时候，是依靠 node 这个命令
  • node 是一个操作系统客户端，而我们的 xx.js 仅仅是node的一个参数
  • 换句话说，仅仅是把一个参数注到 node 当中，类似的可以这样 node -e console.log(1) 这样也可以执行
  • 也就是说脚手架是操作系统的客户端，其本质并不是说 xx.js 是一个客户端，而是node本身它是一个客户端
  • 在windows中，node 是 node.exe
  • 在mac中，node 是 node* (*代表可执行文件)
  • 当去执行 node xx.js 的时候，其实是把 xx.js 中的代码变成一个字符串传入到node中
  • 然后 node 对这些字符串进行解析，把它当成一个可执行程序进行执行
  • 这些逻辑全部是预设好的，预设好的逻辑就存放在这个node的可执行文件当中
  • 所以脚手架是客户端，其本质是因为node本身就是客户端

脚手架和在PC上面安装的其他应用或者软件的区别

  • 本质来说没有区别，在操作系统上安装了软件，windows上都是 exe 后缀？
  • 在 macos 上面都是可执行文件，所以本质没有区别
  • 它们的区别仅仅是安装的一些软件会提供一个GUI，像当前终端一样，它会提供一个GUI
  • 而我们的 node 并没有提供 GUI
  • 我们的node是直接通过命令行的方式传入参数来进行执行，仅仅是这样的一个差别
  • 如果想在 nodejs 当中去展示GUI有可能吗？
    • 完全可能我们只需要去调用操作系统的GUI绘制API就可以绘制出窗口来
    • 所以脚手架本质它其实就是个客户端。但注意, 不是我们编写的代码是客户端，而是node本身是客户端

为 node 脚手架创建别名

  • 方式 1，就是通过编写一个软链接，其本身会链接到我们自己编写的一个代码文件上
  • 方式 2，现在继续想给 mycommand 添加一个别名或者对其进行修改
    • 进入到 /usr/local/bin 目录
    • 执行 ln -s ./mycommand mycommand1 这样就可以通过 mycommand1 来执行
  • 可见，软链接是可以嵌套的，基于此可以给当前脚手架起别名
收录于
FE Architecture

当前文章被收录于：

FE Architecture
88 篇文章 8 人学习

前端架构

订阅专栏 查看详情
标签
#前端 #架构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
使用vue-cli（vue脚手架）快速搭建项目，前端组件化架构pdf 什么时候使用箭头console.log(“我是csdn哪吒”);}, 1000)console.log(“我是csdn哪吒”);}, 1000)三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。 阅读详情

相关推荐

仿vue-cli3写一个自己的vue-cli脚手架

目前在市面上存在很多脚手架，如：create-react-app、vue-cli。我们可以通过一行简单的命令，就能创建一个基本的项目工程，大大的提高了开发效率。但是我们会面临一个问题，除了脚手架帮我们创建好的项目框架，我们的项目总有需要定制化的配置，比如我们需要引入我们想要的elementUI框架，引入axios相关的工具类完成http请求等。我们不可能每次开启新项目都再配置一遍吧，这太劳神费力了。 通常我们会搞一个个性化脚手架cli，平时创建项目时通过该脚手架一键生成，并同时...

前端琅琊阁 2181

深入剖析vue-cli的原理和过程

前言：初始化一个vue的项目，很多人会下载一个vue的脚手架，通过脚手架快速初始化一个项目 一、初始化流程 1、npm install -g @vue/cli 下载一个脚手架 2、vue create xxx 脚手架创建一个名为xxx的项目 3、进行项目配置 选择最后一个手动配置 选择项目所需要的依赖 版本号以及其他配置单独保存一个文件还是都保存到package.json中 4、进入项目，安装配置、运行项目 cd xxx npm install npm run serve 二、脚手架原理 1、.

程序媛的梦工厂 2401

Vue-Cli - Vue 脚手架的创建 以及 目录结构说明

f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.

CYK_byte的博客 3564

VUE——Vue CLI的原理与基本使用

vue/cli@vue/cliVue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

庄小焱 1274

Vue - CLI 全栈开发的终极指南

随着“前后端分离”开发模式的普及，前端开发者需要更深入地理解后端逻辑，后端开发者也需要掌握前端工程化工具。Vue-CLI 作为 Vue 生态中最核心的脚手架工具，不仅能快速搭建前端项目，还能与后端技术（如 Express、Koa）无缝集成，实现真正的“全栈开发”。Vue-CLI 的核心功能与工作原理前后端项目的目录设计与协作模式数据库集成（以 MongoDB 为例）生产环境部署与性能优化本文将按照“概念理解→操作实践→项目实战→扩展优化”的逻辑展开。

AI天才研究院 968

Modbus TCP 通信（C#）

【代码】Modbus TCP 通信（C#）

weixin_56229359的博客 1151

前端脚手架/CLI工具的深度解析与实战应用

本文深入探讨脚手架工具的原理和应用，并结合理论与实践，详细解读主流脚手架工具的内部机制，帮助开发者系统地掌握构建和使用这些工具的技能，同时提供从零开始创建自己的前端脚手架的全面指导和实战经验。

weixin_51517346的博客 2239

条码打印工具-Bartender的使用

文章目录1、安装Bartender1.解压安装包，可获得bartender2021版本和破解文本2. 双击“BarTender_2021_R1_Full_x64.exe”文件运行，勾选协议及软件安装设置3. 选择安装选项，自行选择勾选，点击Browser可更换软件安装路径4. 耐心等待软件安装完成，直接点击完成退出5. 此时会弹出提示需要激活许可证，先点击取消6. 接着将Crack夹中的“BarTend.exe”破解文件复制到软件安装目录中替换7. 再双击“serial.reg”导入注册，点击确定即可8.

暮紫的笔记本 1万+

Vue CLI 脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 前端系统

程序员小王的博客 2474

Ubuntu22.04下3分钟搞定GitHub加速：SwitchHosts+小鱼工具保姆级配置指南

本文提供Ubuntu22.04下快速解决GitHub下载超时问题的保姆级教程，通过SwitchHosts图形化工具和小鱼一键换源工具实现高效加速。详细步骤包括环境准备、工具安装配置及验证方法，帮助开发者轻松优化GitHub访问速度，提升工作效率。

weixin_29258297的博客 567

Halcon Socket TCP通讯：从算子调用到工业视觉系统集成

本文详细介绍了Halcon Socket TCP通讯在工业视觉系统中的应用与优化技巧。从基础算子调用到高并发处理，再到与PLC、机器人及MES系统的集成实战，提供了全面的解决方案和性能优化建议，帮助开发者高效实现工业视觉系统的通讯需求。

weixin_33502772的博客 248

Vue脚手架（cli和vite详解）

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者， 是作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。vite 提供了用 npm 或者 yarn 一建生成项目结构的方前端字节跳动真题解析ack，加载器、插件不够丰富2.打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包。

2301_82244509的博客 6224

HighScore3.0实战指南：XRD物相分析从入门到精通（持续更新版）

本文提供HighScore3.0软件进行XRD物相分析的完整实战指南。从软件设置、数据导入、背景扣除、寻峰等预处理步骤，到核心的Search & Match物相搜索匹配、Rietveld精修定量，以及结果输出与常见问题排查，系统讲解了从入门到精通的全流程操作与核心技巧，帮助用户高效完成材料物相鉴定与分析工作。

weixin_29310605的博客 1046

深入解析Vue CLI实现原理与手把手实现自定义脚手架工具

深入解析Vue CLI实现原理与手把手实现自定义脚手架工具

嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。 3682

【人工智能】架构演进：基于本体论与 LLM Agent 的供应链备件决策闭环实践

本文探讨了如何将本体论（Ontology）与大语言模型（LLM）Agent结合，构建供应链备件管理的智能决策系统。针对LLM在垂直领域存在的幻觉和逻辑缺陷问题，提出通过本体论建立结构化知识框架，形成四层架构：知识建模、动态感知、深度分析和决策闭环。系统利用图数据库实例化领域本体，融合多源数据实现实时感知，结合图谱推理和时序预测进行确定性分析，最终通过工具调用完成决策执行。技术选型推荐Gemini 1.5 Pro、Neo4j和LangChain等工具，实现从自动化到智能化的升级。该架构为工业领域提供了可解释、

奶爸的编程之路，也就一周冷个三天 172

手把手教你用ESP32-C3打造智能聊天机器人-立创实战派

本文将详细介绍如何利用立创ESP32-C3开发板，烧录小智AI程序，快速实现一个功能强大的聊天机器人。

举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。 5543

Macbook 苹果电脑 安装搭建Vue脚手架教程m1芯片Vue脚手架初学

Macbook 苹果电脑 安装Vue脚手架教程 1.首先我们进入Node.js的官网，下载安装Node.js 如果你已经安装过可以忽略 网址http://nodejs.cn/ 2.直接点击下载，这里我下载的是18版本最新版的。 3.选择macOS版本后会直接下载 4.下载完成后直接点击安装即可 5.Node.js安装完成后接下来我们打开电脑的终端 6. 然后我们进入Vue的官网 https://cn.vuejs.org/ 7. 在*生态系统*处找到*Vue CLI*选项点击进入 8.点击‘起步’

No1banana的博客 9128

insightface scrfd人脸检测测试

pip install mmdet 自动安装mmcv win10上可以，服务器上没成功

jacke121的专栏 4023

vue-cli2,vue-cli3（vue脚手架）超详细教程

文章目录vue-cli脚手架Node.js环境安装vue-cli的安装npm，cnpm介绍安装脚手架用脚手架生成项目目录 vue-cli脚手架 顾名思义，脚手架就是用来协助，配合，帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作，具有安全,高效的特点。 vue-cli与平台无关,功能更加齐全。无论是预编译模板，注入依赖，还是模拟生产环境等功能，vue-cli都具备,而且占用内存少，更高效，运行速度非常快。 Node.js环境安装 要安装Vue.js脚手架

stormzhuo的博客 4539

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

（9）Vue脚手架的使用（Vite、vue-cli、create-vue）

作为后端程序员，我们熟悉项目初始化工具，比如 Spring Initializr，它可以帮助我们快速搭建一个具有Spring环境的项目结构，另外还支持我们勾选自己需要的功能，如模板引擎、Redis环境、Spring Security、测试单元等。 前端脚手架其实和它们非常相似，只不过它是针对前端开发的，即快速帮我们搭建一个整合好了Vue（React、Angular）环境的项目结构，同时也允许我们勾选自己所需要的前端功能，如Vue-Router、Pinia、Vitest等。

緑水長流*z 2560

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

Vue实战之Vue CLI 脚手架

Vue CLI 脚手架

9.冄2.7.號的博客 1368

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

前端基础学习——Vue-Cli脚手架介绍

本文为大家介绍了前端基础学习——Vue-Cli脚手架，希望对你有帮助~~

weixin_53919192的博客 1328

脚手架vue-cli及webpack

上一章我们学习了组件的使用，这一章讲解怎么使用vue cli脚手架的安装和使用。

炑焽的博客 1008

vue cli脚手架详解_Vue-CLI脚手架到底是什么？

点击右上方红色按钮关注“web秀”，让你真正秀起来前言如果你用Vue搭建过项目，应该都熟悉vue init webpack projectName命令，至于为什么是这个命令，相信了解的人不是特别多，反正我能用就行了。现在我们就来好好了解一波。Vue-CLI是什么?Vue-CLI是Vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。运行vue init webpack proj...

weixin_39517520的博客 1975

Vue CLI 原理与实践

理解 Vue CLI 的目的 Vue CLI 架构上的一些设计，值得前端开发者去了解和学习。 前端开发过程中用到的很多的工具，基本上都是基于类似的架构去设计。 通过理解 Vue CLI 的原理和实践，了解一个可扩展性、适应能力更强的工具是怎样去设计和架构的。 vue-cli 早期面貌 Vue CLI 3 之前的模块是 vue-cli，npmjs 上已经被标记为弃用。 近几年开发都使用的 @vue/cli。 @vue/cli也集成了早期 vue-cli 的功能，需要安装 @vue/cli-init，内部还是依

皮蛋很白的博客 1878

vue-cli脚手架

Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程删除已安装的 vue-cli先安装淘宝镜安装cli安装结束后，你可以通过或vue -V查看 vue-cli 的版本信息。

lanlan112233的博客 2563
上一篇： 前端架构: 脚手架在前端研发流程中的意义
下一篇： 前端架构: 脚手架的开发流程和常用框架
点赞 25
评论 0
书签 书签 24
Wang's Blog
Wang's Blog
博客等级 码龄12年 7434粉丝 2421原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值