NodeJs搭建前端Vue开发环境需要的工具和框架

IT小悟

已于 2023-05-21 16:49:31 修改

阅读量1.3k

点赞数

分类专栏： Web前端 Node.js Vue.js 文章标签：前端 javascript webpack vue.js node.js

于 2023-02-07 23:40:08 首次发布

本文链接：https://blog.csdn.net/speedwalkman/article/details/128927907

版权

Web前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

Node.js

4 篇文章 0 订阅

订阅专栏

Vue.js

2 篇文章 0 订阅

订阅专栏

需要用到如下的工具包：VUE，Webpack，Vue-cli，NodeJs，NPM，ElementUI，Node-Sass，Axios等。

1、Vue 是什么？Vue.js - 渐进式 JavaScript 框架 | Vue.js

2、Vue-cli 介绍 | Vue CLI

3、Webpack

4、NodeJs

5、NPM npm中文网官网

6、ElementUI Element - The world's most popular Vue UI framework

7、Node-Sass GitHub - sass/node-sass: Node.js bindings to libsass

8、CSS,less,sass,scss的区别

9、Axios：

1、Vue 是什么？Vue.js - 渐进式 JavaScript 框架 | Vue.js

就是纯前端框架，官网定义如下：

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2、Vue-cli 介绍 | Vue CLI

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架，Vue CLI是一个官方发布 vue.js 项目脚手架使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。

3、Webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

也就是，当我们使用Vuer编写前端组件代码时，这些组件代码不能被用户端的浏览器解析执行，需要被翻译和打包成.js文件才能在浏览器端执行。

Webpack支持很多的前端框架，比如：Vue、React、Angular。webpack

4、NodeJs

JavaScript运行环境(runtime), 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动、非阻塞式I/O模型的服务端 JavaScript 环境，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。它是基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

详情参考：Node.js 简介

5、NPM npm中文网官网

Node.js 环境下的包管理器，使用它安装和更新依赖性包将非常的容易。

6、ElementUI Element - The world's most popular Vue UI framework

Elementui它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库，提供PC 端组件，简化了常用组件的封装，降低开发难度。

7、Node-Sass GitHub - sass/node-sass: Node.js bindings to libsass

node sass是一个库，它将Node.js绑定到LibSass【流行样式表预处理器Sass的C版本】，它允许用户以令人难以置信的速度将【.scss】文件本地编译为css，并通过连接中间件自动编译。

8、CSS,less,sass,scss的区别

CSS全称Cascading Style Sheets （层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。

Less全称Leaner Style Sheets 是一门向后兼容的 CSS 扩展语言，是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

Sass 全称(Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass 有两种语法格式。

1）首先是 SCSS (Sassy CSS)这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

2）另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，这种格式以 .sass 作为拓展名。

不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。

less官网地址Less 快速入门 | Less.js 中文文档 - Less 中文网

sass官网地址Sass教程 Sass中文文档 | Sass中文网