首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端 实战项目·动态加载 JS 文件

动态加载 JS 文件 对于 Vue、React 等框架开发的单页面应用,在某些页面开发特殊功能时经常需要依赖第三方 JS 文件,如果在全局引入 CDN 资源可能会加载冗余文件,此时最好使用动态加载方式...动态加载 JS 脚本指仅在某些特殊页面引入依赖文件,而非全局引入,这样可以避免在这些页面并未打开时造成加载无用的资源,提高页面加载速度的同时,也让整个项目更加模块化。...对于 defer,可以认为是将外链的 js 放在了页面底部。js 的加载不会阻塞页面的渲染和资源的加载。defer 会按照原本的 js 的顺序执行。.../ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0.../moment.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js',

5.1K40

Java项目开发文档(javaweb实战项目)

项目开发过程中为了增加程序的可读性和程序的健壮性, 方便后期程序的调试和维护,所以需要在开发过程中统一技术规范,一般会在项目初期确定好相关文档作为这一统一的规范。...一、需求文档 在项目启动之后,项目的目标已经明确了,那么就要开始着手干活了,但是在干活之前,需要对整个项目分析透彻。那么,如何对业务进行分析呢,看以下的建议。...首先,开发人员要有随意转换身份的意识和能力。 A、明确产品功能 在分析业务时,站在用户的角度上,思考要做的产品能实现什么功能。把所有的功能点列出来!...B、分析某一功能点的流程 在罗列了所有的功能之后,需要站在开发者的角度分析每一个功能点,考虑从客户端到后台操作数据库的整个流程,可以从是什么、为什么、在哪、怎么做、谁来做、做完如何反馈、反馈给谁、上传到哪...E、绘制业务流程图 需求文档确定之后,绘制整个项目的业务流程图,这时候的流程图只需要包含前端的业务流程,后台实现的流程图不需要在需求文档中体现,而是放在后面的接口文档中。

1.1K40

项目实战-UmiJS开发(附带qiankun)

,性价比会很高,所以我们也采用了 UmiJS + ANT DESIGN PRO 的架构来进行项目升级(之前的老项目基于 Umi2.0 与 ANT DESIGN PRO 3.0 开发) UmiJS 是什么...开发环境 export default { c: 'local' }; // .umirc.test.js 或者 config/config.test.js export default { b: '...这里就结合改造之后的项目来介绍下使用。 在使用微前端之前建议看看之前的博文-传送地址:你为什么需要微前端。确定你团队确实存在这些情况之后,再根据需要业务的定制与之匹配开发模板。...配置开发、生产环境 既然是微前端,不可能同时启动主子两个系统,那样不符合微前端的概念,所以引入 localhost 肯定是不科学的,但是本地引入项目的时候,有的时候存在跨域问题。...Docker 使用 DevOps - 发布任务流程设计 DevOps - 代码审查卡点 DevOps - Node 服务质量监控 前端模块 DevOps - H5 基础脚手架 DevOps - React 项目开发

2.1K20

Node.js开发实战 - 笔记

Why:为什么要学 Node.js - Node.js 的应用场景 What:Node.js 是什么 - Node.js 运行时结构 How:怎样编写 Node.js 代码 - Http Server...延伸话题:贡献 Node.js 代码、编译 Node.js、诊断 / 追踪、WASM,NAPI # Node.js开发开发实战 - 笔记 # Node.js 的应用场景 - Why 前端工程化...Transpile:bablejs, typescript 其他语言加入竞争:esbuild(go), parcel(rust), prisma 现状:难以替代 Web 服务端应用: 学习曲线平缓,开发效率较高...跨平台 + JS 无需编译环境 (+ Web 跨平台 + 诊断工具跨平台) = 开发成本低 (大部分场景无需担心跨平台问题),整体学习成本低 # 编写 Http Server - How # 安装...SSR 难点: 需要处理打包代码 需要思考前端代码在服务端运行时的逻辑 移除对服务端无意义的副作用,或重置环境 # Debug V8 Inspector:开箱即用、特性丰富强大、与前端开发一致

1.2K20

vscode下面开发vue.js项目

3.在router目录下面(路由跳转目录)下的index.js页面中添加,我们刚才添加的Test.vue页面的跳转路由。文件内如如下: ? 4.使用快捷键Ctrl+~键,就可以出现命令行输入页面。...想要停止的话可以输入快捷键Ctrl+C接可以停止项目了,如下所示: ? 根目录下面package.json文件是npm命令的集合文件,如下所示: ?...如果想要修改项目的端口地址的话,可以去config下面的index.js进行修改。如下所示: ? 6.浏览器中输入项目的启动地址,看看是否配置成功。如下图所示: ?...界面上要是看到我们项目编写的内容的话,就说明成功了。 这边需要说一下的是:项目的全局vue名字叫做Vue.vue、启动js文件是main.js ?

1.6K40

实战】Vue.js 图标选择组件开发

最近项目中在做一个自定义菜单需求,其中有一个为菜单设置小图标的功能,就是大家常见的左侧菜单 ?...image.png 设置图标不难,方案就是字体图标,可供使用的图标库也有很多,比如阿里巴巴的 Iconfont,以及 Fontaswsome 等,问题在于如何优雅的提供几百个图标供用户选择,而不需要开发去一个一个的写标签...字体图标库 Fontawesome 方案 我们使用字体图标的方式,一般是一个 这样的标签,平常开发中用一些图标都是用到一个写一个,展示.../components/index.js' Object.keys(CustomComponents).forEach(key => Vue.use(CustomComponents[key])) 这样就可以在项目中任意...原文链接:https://blog.zhangbing.site/2018/12/01/Vue-js-图标选择组件实践/ 作者简介:做工程不做码农(微信公众号同名),Web前端工程师,7年开发经验,坐标杭州

3.2K10

JSP项目引入Vue.js进行项目开发(工程搭建)

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。...最近在做JSP项目,想在项目里引入Vue.js进行前端页面开发,同时加上脚手架Element UI,项目搭建过程遇到一些问题,本博客进行归纳: 官网:Vue.js中文官网 引入vue.js: 兼容ie,支持ES6,必须引入browser.min.js和polyfill.min.js..." src="${resource}/es6/polyfill.min.js"> Element ui支持: @import "${resource}/elementui...theme-chalk/index.css"; <script type="text/javascript" src="${resource}/elementui/lib/index.<em>js</em>

5.8K30

Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目

4.main.js 前言 从这篇文章开始,就进入真正的实践了。...在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的。...一、安装 Vue CLI 因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/...让我们来看入口文件 main.js 的代码 import Vue from 'vue' import App from './App' import router from '....在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由

1K30

基于 Nest.js+TypeORM 实战项目已开源,推荐!

考拉 的 Nest.js 系列文章(系列会持续更新): 学完这篇 Nest.js 实战,还没入门的来锤我!...(长文预警) Nest.js 实战系列第二篇-实现注册、扫码登陆、jwt认证等 这篇文章是上篇实现登录、注册的后续, 本来是和上一篇文章写在一起的, 考虑篇幅问题,就拆了一个下篇出来。...同一个人不停的属性页面,也容易导致数据准确率不高 针对上面的问题是有解决方案的, 可以通过redis很方便的解决, 鉴于部分小伙伴对redis不甚了解, 所以后面会单独用一篇文章来将redis, 以及在我们项目中的应用...) MD5加密文件生成字符串,对文件进行命名 查询文件是否已存在于COS中 存在,则拼接文件路径返回 不存在, 调用腾讯api将文件上传到cos中 Nest内置文件上传 为了处理文件上传, Nest.js...手把手带你实战-项目创建&数据库操作 Nest.js 手把手带你实战-实现注册、扫码登陆、jwt认证等 预告一下接下来【Nest.js进阶系列文章】,会对Nest.js的核心知识点进行详细拆解,结合Redis

10.4K41

.net core项目实战开发环境搭建

在上一篇[.net core项目实战之回顾总结]主要介绍了项目背景和自己的一些想法,从本篇开始正式叙述整个开发过程,本篇主要介绍一下开发前的环境准备,vs2017和docker的安装与配置 系统要求 首先建议采用...(之前踩过这样的坑) 到这里,docker的基本配置就算ok了,不会用docker的话没有关系,只是为了确保我们在开发.net core项目时有个基于docker的环境调试,避免在正式发布时有环境上的差异...新建一个 .net core项目 首先打开vs2017新建项目,选择ASP.NET Core Web应用程序 然后点击确定,选择.net core2.0,Web API,记住一定要勾选启用docker,...并选择Linux 点击确定后项目开始创建,项目中会产生一个docker-compose,这里面就是启动程序相关的docker命令。...我们试着修改下映射的端口,原本是映射的80,怕80被其他程序占用: 到这里,可以直接点击运行项目: 当然,你也可以将你的项目设为默认启动项,这样就是使用IIS Express进行调试: 总结 相对于搭建

1.8K20

小程序项目实战-云开发配置

本文的前提是你已经会使用【微信开发者工具】创建项目,只需要等待连接数据库,而云开发就是给你提供这样一个免费、快速、便捷的云数据库。 云开发是什么?...1 创建云开发项目 在创建项目时一定要勾选云开发服务。 2 开通云开发服务 进入项目后,点击工具左上角位置的【云开发】选项,等待加载,根据提示就可以开通云开发功能。...3 在项目根目录创建云文件夹 比如你的小程序项目名称叫【webapp】,在【webapp】目录下建一个子目录,子目录名随意。...新版本微信开发工具在新建云开发项目后可能会自动创建这个目录,如果已经自动创建该目录就不需要再次创建了,接着下面流程走就OK。...4 修改项目配置文件 在项目中找到图中该文件,并添加以下内容: "cloudfunctionRoot":"新建的目录名", 5 云开发环境初始化 在app.js文件的onLaunch: function

1K20

08Vue.js快速入门-Vue综合实战项目

nodejs基础知识 知识点学习: 文件操作 http服务 express 组件化开发思想 8.2....Vue脚手架工具:vue-cli构建实战项目 其实如果编写Vue的前端项目,直接使用vue的官方vue-cli构建工具最好用,一个命令就可以直接生成项目的结构和目录。...安装和开发控制台的命令: # 如果已经安装,请省略 $ npm install -g vue-cli # 初始化一个webpack全功能包的vue项目,请您把my-project换成你自己的项目名...综合实例开发记录 通过vue-cli构建工具初始化项目目录 安装过程,控制台会问你项目名称是什么?项目描述?项目作者,是否使用eslint校验,是否使用单元测试等.......Project description A Vue.js project # => 项目描述 ?

1.3K70
领券