良好的文档和社区支持： Angular具有详细而清晰的官方文档，并且有一个活跃的社区，开发者能够在社区中获得帮助、分享经验和获取最新的信息。...ng build --prod 将构建后的文件部署到 ASP.NET Core 项目： 将 Angular 应用构建后生成的 dist 文件夹中的内容复制到 ASP.NET Core 项目的 wwwroot...npm run build 将构建后的文件部署到 ASP.NET Core 项目： 将 Vue 应用构建后生成的 dist 文件夹中的内容复制到 ASP.NET Core 项目的 wwwroot 文件夹中...以下是一些常见的前端性能优化技巧： 减少 HTTP 请求 合并和压缩 CSS、JavaScript 文件。 使用 CSS 精灵来减少图像加载次数。 使用字体图标代替图像。 减少不必要的资源加载。...使用 CDN 加速资源加载 将静态资源（如 JavaScript 库、字体、图像等）托管在 CDN 上，以提高资源加载速度。
如果你: 希望将您的Angular/React/Vue或任何其他基于前端的框架应用程序放在Nginx上; 希望将Nginx上的客户端与后端连接(如Node.js或Java app); 要将域调用委托给内部...web服务器，例如在其他端口(代理)上工作; 在Nginx上的前端应用 如果您使用任何框架(如Vue、Angular或React)开发前端应用程序，那么您最终将生成一个产品包——准备部署在web服务器上的文件...在大多数框架中，运行生产构建将类似于npm构建，或者例如在Vue: Quasar构建中使用Quasar。您的生产文件应该在项目文件夹中生成的dest文件夹中。...然后将前端应用程序dist文件夹中创建的每个文件/文件夹移动到/usr/share/nginx/html/domain(必须在/usr/share/nginx/html下创建域文件夹)。...，在简单的场景中可以处理前端web应用程序的静态资源，并有可能将请求代理到后端服务器——这就是我们所需要的。
build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。...lint (l): 在给定项目文件夹中的 Angular 应用程序代码上运行 linting 工具。 new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。...我们看看各个文件的作用： /e2e/：包含网站的端到端（模拟用户行为）测试 /node_modules/：使用 npm install 将所有 3rd 方库安装到此文件夹 /src/：包含应用程序的源代码...大部分工作将在这里完成 /app/：包含模块和组件 /assets/：包含图像、图标和样式等静态资源 /environments/：包含环境（生产和开发）特定的配置文件 browserslist：autoprefixer...首先导航到项目的文件夹中并运行以下命令： $ cd frontend $ ng serve 您现在可以导航到 http://localhost:4200/ 地址来开始使用您的前端应用程序。
4.png 运行使用了TrueType的MiniGUI应用程序 经过上一节，我们已经成功在miniStudio中对控件设置了TrueType字体。...为什么miniStudio中明明设置成功的字体，到程序运行的时候就变卦了呢？为这个问题我又是好一顿折腾。...打开testgui项目的MiniGUI.cfg, 6.png 我明白了原因，应用程序的MiniGUI.cfg中[truetypefonts]字段没有同步更新，而通过前面的关于MiniGUI 的运⾏时配置选项的说明...，我们知道MiniGUI应用程序启动时首先是找自己当前文件夹下的MiniGUI.cfg。...)" 部分命令调用linux 命令cat读取资源文件夹下的en_US.txt文件 #（这里包含了testgui项目中所有的文本），sfnttool将根据这个文本提取所有用到的汉字字体 $ java -jar
构建您的代码以生成可部署项目 现在，我们需要在生产模式下构建代码，以创建将在GitHub Pages上部署的可分发文件。...默认情况下，这个可部署代码是在app文件夹下的/dist/文件夹中生成的，但是我们需要在app文件夹下的“docs”文件夹中生成。...因此，在使用git bash窗口中base-href选项中的网站URL运行以下命令，以在docs文件夹中生成可分发文件。...转到您的app文件夹，并检查docs文件夹是否已创建并包含所有可分发文件。 ? 现在，通过在git bash窗口中运行以下命令，将该文件夹提交到本地存储库中，并将其推入GitHub存储库中。...您可以使用另一种方法将Angular应用程序部署在GitHub Pages上—使用angular-cli-ghpages软件包。
PDF文件格式可以将文字、字型、格式、颜色及独立于设备和分辨率的图形图像等封装在一个文件中，该格式文件还可以包含超文本链接、声音和动态影像等电子信息，支持特长文件，集成度和安全可靠性都较高。...这也就是终端用户无论是手机端 iOS, Android，还是老的PC，新的PC机器都可以随时随地打开PDF 文件，支持阅读的方式非常多样便捷，而不是像Excel文件必须要office才能够读取。...桌面报表设计器 是基于 Electron使用Chromium来显示用户界面。 Web 在线设计器 和 报表 viewer 组件在用户计算机的浏览器中运行的 Web 应用程序。...每个浏览器对于文字内容，甚至CSS 属性处理都不一致，而正因为各家有各家的标准，会出现我们在Chrome中可以正常使用所有功能，而火狐使用PDF时，内容无法正常显示，但打印功能正常。 分辨率。...在报表Viewer中显示报表，将报表导出为PDF或托管报表设计器组件的应用程序应使用与为独立设计器应用程序创建的配置相同的配置。
有关qiankun微应用的部署，官方是有说到的，提供了二种方式 方案 1：微应用都放在在一个特殊名称（不会和微应用重名）的文件夹下（建议使用） 方案 2：微应用直接放在二级目录，但是设置特殊的 activeRule...angular-hash/ # 存放微应用 angular-hash 的文件夹 | ├── angular-history/ # 存放微应用 angular-history 的文件夹.../ # 主应用的js文件夹 html是根目录，里面存放了主应用（基座应用）的资源，就是build出来的dist目录中的资源。...然后在根目录创建一个child 文件夹，child 文件夹下，存放这构建出的各个子应用的资源。每一个应用资源一个文件夹。...方案二：在基座的流水线中构建所有应用制品 改方案主要是使用 Deploy keys，在基座的流水线中 获取各个子应用的源码，然后进行编译，构建。
，会看到dist文件夹现在包含一个index.html，里面也自动引入了我们打包好的 js 文件。...Clean 我们还需要设置clean-webpack-plugin,在每次构建后清除dist文件夹中的所有内容。 这对于确保不遗留任何旧数据很重要。...loader 预处理一些加载的文件，如 js 文件、静态资源(如图像和CSS样式)和编译器(如TypeScript和Babel)。...对于图像类型，我们将使用asset/resource,注意，这里是一个type，而不是loader。...为此可以为 webpack 设置两种配置： 生产配置，用于最小化，优化和删除所有源映射 开发配置，该配置在服务器中运行webpack，每次更改都会更新，并具有源映射 开发模式下是在内存中运行所有内容，而不是构建一个
部署Angular项目 我们用 angular-cli 工具来生成Angular解决方案，你可以用ng build 指令来发布你的工程项目，发布内容默认放在dist文件夹下，然后你可以将这个文件夹部署到...基于令牌的认证 如果您想从移动应用程序中使用API /应用程序服务，您可以使用基于令牌的认证机制，就像我们为Angular 客户端那样做。启动模板包括jwtbearer令牌认证基础设施。...这个应用程序从主机的appsettings.json文件中获取连接字符串。开始它和Web.Host中的appsettings.json文件一样。确保在配置文件中的连接字符串是要数据库。...你可以在开发或生成环境迁使用这个工具来迁移数据，而不是使用EntityFramework自己的工具（这需要一些配置，而且可以在一个单个数据库/租户的工作）。...你可以查看，并且很轻松的写类似的测试。实际上，他们因为测试你的代码与所有的ASP.NET样板的基础设施，所以算是集成测试而不是单元测试（包括验证、授权、工作单位…）。
前提条件：该演示案例所用到的前端代码基于 Angular 框架，如果你用的是 Vue 框架，同样适用。...如今，JavaScript不仅用于创建Web应用程序，还用于桌面应用程序、移动应用程序等各个领域。 我部署的 Jenkins 的在本机部署的，Windows 版本。...npm run build 是一个npm命令，用于在项目中运行预定义的构建脚本。...当在项目的根目录中执行这个命令时，npm会查找package.json文件中的"scripts"字段，并执行对应的构建命令。 安装 nodejs 时会自动安装 NPM。...Remte directory：拷贝到哪个路径下，如果之前已经配置过全局的文件夹，则拷贝的文件会放到 /之下，如果全局文件夹之下没有这个 Remote directory 目录，则创建一个
loadChildren会从根文件夹中获取绝对路径。RouterModule.forRoot（）会获取routes数组并配置路由器。 在子模块中导入模块特定路由。...其中一些是： 避免为你的组件使用/注入动态HTML内容。 如果使用外部HTML，也就是来自数据库或应用程序之外的地方，那么就需要清理它。 不要将外部网址放在应用程序中，除非它是受信任的。...所有dependencies 和dev-dependencies都是明确分离的。 如果应用程序较大时，我会考虑延迟加载而不是完全捆绑的应用程序。...但是预编译的应用程序会将所有模板和样式与组件对齐，因此到服务器的Http请求数量会更少。 更快的渲染：如果应用程序不是AOT编译，那么应用程序完全加载时，编译过程会发生在浏览器中。...缺点： 仅适用于HTML和CSS，其它文件类型需要前面的构建步骤 没有watch模式，必须手动完成（bin / ngc-watch.js）并编译所有文件 需要维护AOT版本的bootstrap文件（使用
将 / 的所有 html、图片、字体文件、.htaccess 拷贝到 下。...混淆后置于 ''/scripts 中。 使用 filerev 重命名 / 下所有 js、css、图片和字体文件。...压缩 下的所有 html 以及视图文件夹所有的 html，将压缩后的文件置于 / 下。...= yeoman.dist %>/ 下所有 js、css、图片和字体文件。... 下的所有 html 以及视图文件夹所有的 html，将压缩后的文件置于 / 下。
Test 测试 为什么将测试放在这里而不是放在单独的tests目录中？两个字-代管！ 属于一起的文件应该放在一起。如果您想象编辑或者删除组件的过程，此方法的好处将变得非常明显。...出于上述所有相同的原因，将每个story及其相应的组件并置在一起很重要。 Styles 样式文件 使用CSS-in-JS时，可以直接在组件文件中创建样式化的组件。...如果我们选择了CSS模块，则样式文件应与组件位于其目录中。 Assets 资源文件 图像，图标或其他特定于组件的资源文件应直接放置在组件目录中。再次托管！...我们应该确保所有utils都是特定于组件的，而不是应由应用程序其他部分重用的东西。utils的测试位于组件目录中。 Sub-components 子组件 子组件的结构与主组件非常相似。...我们想重用我们的钩子，但与此同时，它不再是特定于组件的。我们应该将其从Menu组件中取出，然后将其放在更高的位置，也许放在我们的常规utils文件夹中。
所以这就是这篇文章所要做的。它将帮助你入门Gulp，你就可以自己探索其他任何东西。 在我们投入Gulp的学习之前，让我们来讨论一下，为什么你可能希望使用Gulp，而不是其他相似的工具。...，而不是全局安装，这就是为什么命令行有些不一样。...这儿有多个文件夹，我们需要从app文件夹编译到dist文件夹中，比如字体文件夹。让我们来做这件事。 将字体文件夹赋值到Dist文件夹 由于字体文件已经压缩了，所以我们不需要做额外的事。...我们压缩资源文件，像CSS,JavaScript和图片在这个进程以及从app文件夹复制字体文件到dist文件夹。...我们也构建了第二个任务，build,创建一个dist文件夹给生产用网页。我们编译Sass为CSS，压缩我们所有的资源文件以及复制必要的文件夹到dist文件夹。
我将把我的项目放在,路径为,C：\Projects\source\repos 文件夹中。 第6步：点击创建按钮。 ? 此处的步骤和VS 2017不太相同。...Web应用程序（模型视图控制器）:此模板包含创建Model，视图(Views)和控制器文件夹并添加Web特定的内容，如CSS，JavaScript文件，布局文件和网站所需的其他资源，也可以基于此模板创建...在Views文件夹中，我们有示例视图文件和布局文件，它们代表Web应用程序的用户界面。我们还有Web应用程序通常需要的JavaScript和CSS文件。 ?...它不会创建 Models 和Views文件夹，因为它们不是API所必需的。下面的屏幕截图显示了我使用API模板创建的项目。请注意，我们只有Controllers文件夹。...我们没有RESTful API不需要的所有JavaScript，CSS和布局文件。 ? Web应用程序：此模板使用新的用于构建Web应用程序的Razor Pages框架。
使用这种方法构建应用程序会产生一个模块化框架，其中应用程序是通过这些代码块串联在一块的。 使用这种方法能够让程序更易读和更好维护。也能够在应用中很好定位指定的功能。...构建 Angular 应用程序并对其扩展是一种持续性的练习。在不断的练习中，使用单一职责原则组织你的项目，将使你的应用程序干净，可读和可维护。 2....一般最佳实践的模式 7-1 模式，该模式使用 7 个文件夹和 1 个文件，如下所示： App - 项目的主要文件夹 Abstract - 抽象部分，包含所有变量、混合和类似的组件 Core - 包含整个站点的排版...Vendors - 这个可选文件夹适合项目的使用的引导框架，比如 bootstrap 为包含该特定文件夹所有代入的在每个文件夹中新建一个 all.scss 文件。...简化导入的 Angular 最佳实践 嵌套文件结构本质上比将所有代码文件都放在一个目录中的平面文件系统更加容易导航。 然而，随着项目的方法，项目的文件结构可能变得相当复杂。
/build/')) }) 上面gulp配置完成的内容是： 1.将目录下所有的以.js结尾的文件 2.执行jshint代码检查 3.然后concat合并为一个文件， 4.再使用uglify...对文件进行压缩， 5.最后输出到当前目录下，build文件夹中。...bower进行类库的管理，所以在项目打包的过程，需要从bower_components文件夹中就项目实际使用的js和css文件复制发布文件夹中。...在gulpfile.js中有一个task名为vendor，主要任务就是将项目中实际使用的js和css复制到发布文件夹中。我们项目发布文件夹名字为dist。...")); }); 开发的源代码 vs 发布的代码文件文件大小对比 4.参考内容 http://www.gulpjs.com.cn/ 前端构建工具gulp使用 前端构建大法 Gulp 系列 (一)：为什么需要前端构建
我将把我的项目放在,路径为,C：\Projects\source\repos 文件夹中。...Web应用程序（模型视图控制器）:此模板包含创建Model，视图(Views)和控制器文件夹并添加Web特定的内容，如CSS，JavaScript文件，布局文件和网站所需的其他资源，也可以基于此模板创建...在Views文件夹中，我们有示例视图文件和布局文件，它们代表Web应用程序的用户界面。我们还有Web应用程序通常需要的JavaScript和CSS文件。 ?...它不会创建 Models 和Views文件夹，因为它们不是API所必需的。下面的屏幕截图显示了我使用API模板创建的项目。请注意，我们只有Controllers文件夹。...我们没有RESTful API不需要的所有JavaScript，CSS和布局文件。 ? Web应用程序：此模板使用新的用于构建Web应用程序的Razor Pages框架。
Razor 视图驻留在视图文件夹中; 所有的 JavaScript 文件驻留在脚本文件夹; 所有的内容文件驻留在内容文件夹中。...所有的客户的 Angular 视图和控件器将驻留在客户子文件夹中，所有的产品的 Angular 视图和控件器将驻留在产品子文件夹中 。...由于 Angular 视图是 HTML 文件，而 Angular 控制器是 JavaScript 文件，从 Views 文件夹到浏览器，ASP.NET MVC 必须被配置为允许 HTML 文件和 JavaScript...每次应用程序运行的时候，我想获得最新版本的应用程序和使用的版本号，以实现最新的 HTML 文件和 JavaScript 文件生成时，帮助浏览器从缓存中，获取最新的文件来替换那些旧文件。...你当然会遇到这个错误，因为/View/Customers/CustomerInquiry的路由是个 Angular 路由，而不是 MVC 路由。MVC 并不知道这个路由。
： .next：包含通过运行 Next.js 的 build 命令生成的可以应用于生产环境的应用程序文件 public：包含应用程序的静态资源，如图像、字体等 src/pages 所有在此定义的页面都可以在相应的路由处使用...# 为什么要使用 TypeScript ？ 对于由大型团队构建的大型应用程序，TypeScript 尤其有用。TypeScript 编写的代码比使用纯 JavaScript 编写的代码更易阅读和理解。...当项目开始时，根据类型将文件分组并将它们放在同一个文件夹中并没有什么问题。...# 按领域/功能拆分 为了以最简单和可维护的方式扩展应用程序，可以将大部分应用程序代码放在 features 文件夹中，该文件夹应包含不同的基于功能的内容。每个功能文件夹应包含给定功能的特定领域代码。...这样我们可以将功能限定在一个特定的功能范围内，而不是将其声明与共享内容混合在一起。这比具有许多文件的扁平文件夹结构容易维护得多。
领取专属 10元无门槛券
手把手带您无忧上云
