前端工程化-VUE

简介: 前端工程化-VUE

高效的开发离不开基础工程的搭建。本章主要介绍如何使用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,如图


相关文章
|
1月前
|
存储 JavaScript 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
44 6
|
25天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
63 41
|
11天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
11天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
16天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
23天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
60 4
|
27天前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
17 2
|
29天前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
31 4
|
28天前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
68 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
下一篇
无影云桌面