前端工程化-VUE

news2024/11/23 13:42:57

前端工程化-VUE

    • Vue-cli
    • Node.js
    • 1.什么是Node.js
    • 2.Node.js的安装

高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。

Vue-cli

Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻松地创建新的应用程序而且可用于自动生成Vue和Webpack的项目模板。
Vue-cli是一个基于Vue.js进行快速开发的完整系统,其提供以下功能:

(1)通过@vue/cli实现交互式的项目脚手架。
(2)通过@vue/cli+@vue/cli-service-global实现零配置原型开发。
(3)一个运行时的依赖(@vue/cli-service),该依赖:
· 可升级。
· 基于Webpack构建,并带有合理的默认配置。
· 可以通过项目内的配置文件进行配置。
· 可以通过插件进行扩展。
(4)一个丰富的官方插件集合,集成了前端生态中最好的工具。

(5)一套完全图形化的创建和管理Vue.js项目的用户界面。
Vue-cli致力于将Vue生态中的工具基础标准化。它确保各种构建工具能够基于智能的默认配置即可平稳衔接,这样开发者可以专注在撰写应用上,而不必花费好几天时间去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,而无须eject。
利用Vue-cli脚手架构建Vue项目需要先安装Node.js和NPM环境。

Node.js

1.什么是Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型。
Node是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。

Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行JavaScript的速度非常快,性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node使用事件驱动,采用非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

2.Node.js的安装

Node.js的安装比较简单,大家需要在Node.js官网(https://nodejs.org/en/download/)下载并安装Node.js环境,Windows系统推荐下载Windows Installer(.msi)。同时,大家会得到一个附送的NPM工具。
(1)安装Node.js,双击下载好的node安装文件
在这里插入图片描述

安装过程比较简单,一直单击“下一步”按钮即可。
(2)环境变量配置。安装完成后需要设置环境变量,即在Path中添加安装目录(例如:D:\java\nodejs),如图在这里插入图片描述
(3)单击“开始”按钮,然后单击“运行”按钮,在输入框内输入cmd命令,最后输入node-v,如图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/625117.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式C语言中if/else如何优化详解

观点一(灵剑): 前期迭代懒得优化,来一个需求,加一个if,久而久之,就串成了一座金字塔。 当代码已经复杂到难以维护的程度之后,只能狠下心重构优化。那,有什么方案可以优雅…

Spring 源码解析 - FactoryBean 获取 Bean 过程

一、FactoryBean FactoryBean是Spring框架提供的一个核心接口之一,用来创建复杂或无法通过默认构造函数创建的对象。这种情况下通过实现FactoryBean接口,可以自定义实例化Bean的过程,包括Bean的对象类型、初始化、销毁等。 在应用场景中&am…

RK3588平台开发系列讲解(进程篇)程序的二进制格式 ELF

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、ELF 文件二、二进制文件组成三、运行程序为进程沉淀、分享、成长,让自己和他人都能有所收获!😄 📢CPU 是不能执行文本文件里面的指令的,这些指令只有人能看懂,CPU 能够执行的命令是二进制的,比如“0101”…

Selenium还能这么玩:自动管理浏览器

这是个系列文章,主要讲selenium一些实战操作,使用 Python 编写代码。可以把他们应用到自动化测试,也可以应用到网络爬虫中。 这篇文章介绍一个操作,可以让selenium 控制浏览器共用同一个 session。他的应用场景是:共用…

pwn3-绕过防御-ROP(1)

**ROP:**全程Return Oriented Programming(面向返回的编程),在栈溢出基础上,利用程序中已有的小片段(gadgets),改变寄存器或变量的值,从而控制程序执行流程,从而绕过NX防御,常见有ret2text,ret2…

Linux:samba服务 (smbd)

smb服务器为centos7 使用的yum安装(如果不会搭建本地yum仓库可以查看) Linux:rpm查询安装 && yum安装_鲍海超-GNUBHCkalitarro的博客-CSDN博客 samba 简介 samba 使用了 1.SMB 协议 Server Message Block,服务消息块 2…

【LeetCode】769. 最多能完成排序的块

769. 最多能完成排序的块(中等) 方法一:贪心 思路 由于arr是[0,..., n-1] 的一个排列,若已遍历过的数中的最大值 max 与当前遍历到的下标相等,说明可以进行一次分割,累加答案。 代码 class Solution { …

javaScript蓝桥杯---用什么来做计算

目录 一、介绍二、准备三、目标四、代码五、完成 一、介绍 古以算盘作为计算工具。算盘常为木制矩框,内嵌珠子数串,定位拨珠,可做加减乘除等运算。站在前人的肩膀上,后人研究出计算器,便利了大家的生活,我…

从贝叶斯派的角度去看L1和L2

前沿 推导的两个角度 带约束条件的优化求解(拉格朗日乘子法)贝叶斯学派的:最大后验概率 理解的两个角度 贝叶斯学派的角度,L2参数符合高斯先验,L1参数符合laplace先验。从有约束问题角度,用拉格朗日转换…

一“幕”了然 ,平行云助力中车打造“掌上工厂”(文末活动报名)

“全球工业生产效率提高1%,成本降低300亿。” 所以工业界有这样一种说法,叫做“工业领域的1%革命”。 Gartner曾预言:到2021年,将有一半的大型工业公司使用数字孪生技术,而这可以使这些公司的生产有效性提高10%。如今…

rust学习 - 构建mini 命令行工具

rust 的运行速度、安全性、单二进制文件输出和跨平台支持使其成为构建命令行程序的最佳选择。 实现一个命令行搜索工具grep,可以在指定文件中搜索指定的字符串。想实现这个功能呢,可以按照以下逻辑流程处理: 获取输入文件路径、需要搜索的字符串读取文…

基于Alexnet网络实现猫狗数据集分类(Keras框架)

目录 1、作者介绍2、Alexnet网络2.1 网络介绍2.2 AlexNet网络的主要特点 3、基于Alexnet网络实现猫狗数据集分类3.1 猫狗大战数据集3.2 数据集处理3.3 准备工作3.4 训练过程3.4 对比实验3.4.1 HALCON平台下的Alexnet实验3.4.2 HALCON平台下的Resnet-50对比实验3.4.3 HALCON平台…

进程的通信——管道和共享内存

进程间的通信有很多种 管道 匿名管道pipe 命名管道 System V IPC System V 消息队列 System V 共享内存 System V 信号量 POSIX IPC 消息队列 共享内存 信号量 互斥量 条件变量 读写锁 这篇文章主要介绍管道和共享内存 管道 管道内核数据结构:在Linux2.6中 struct …

搭建自动化测试环境

目录 1、安装Python并配置环境变量。2、安装Pycharm开发工具。3、安装Selenium4、安装浏览器:Chrome和Firefox的其中之一。5、浏览器驱动:下载Chrome浏览器驱动或者是Firefox浏览器驱动。6、配置webdriver公众号粉丝福利 自动化测试环境: Pyt…

接口反应慢优化

遇到某个功能,页面转圈好久,需要优化 1.F12 查看接口时间 2.看参数 总共耗时9.6s Waiting for sercer response 时间是2秒 Content Download 7秒 慢在Content Download F12查看接口响应 显示Failed to load response data:Request content was e…

这些10款优秀的交互设计软件,你知道吗?

交互软件可以帮助设计师从“可用性”和“用户体验”的角度优化他们的作品。如果设计师想创建一个令人满意的交互设计作品,一个方便的交互设计软件是必不可少的。 根据设计师的个人喜好和方便,选择易于使用的交互设计软件来完成创建。本文盘点十款易于使…

【P55】JMeter 图形结果(Graph Results)

文章目录 一、图形结果(Graph Results)参数说明二、准备工作三、测试计划设计 一、图形结果(Graph Results)参数说明 可以以图形的方式查看和分析相关指标 使用场景:一般在调试测试计划期间用来查看相关指标&#xf…

微信小程序基础使用-请求数据并渲染

小程序基本使用-请求数据并渲染 小程序模板语法-数据绑定 在js中定义数据 Page({data: {isOpen: true,message: hello world!} })小程序的data是一个对象,不同于vue的data是一个函数 在模块中获取使用数据 小程序中使用 {{}} 实现数据与模板的绑定 内容绑定&a…

Qt Quick-QML地图引擎之v4版本(新增3D模型/抗锯齿任意多边形下载)

在上个版本Qt quick-QML地图引擎之v4版本(新增3D模型/高德/谷歌在线/离线预览/多线程离线裁剪下载/区域查询/位置搜索/路径规划)_qt 高德地图离线_诺谦的博客-CSDN博客更新了很多小功能。经过朋友们一致需求建议,所以V4继续优化。 B站视频: Qt Quick-QML…

【办公效率提升】Window10与ubuntu递归列出当前目录及其所有子目录中的文件和文件夹

在Windows操作系统中,没有内置的类似于Ubuntu的"tree"命令的功能。但是,你可以使用以下两种方法来实现相似的功能: 方法一:使用dir命令和递归 你可以使用Windows的内置命令"dir"以及递归参数"/s"来…