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

比眉伴天荒 2023-10-07 23:34 39阅读 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.js - _ JavaScript _ _ Vue.js] ##

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

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

## 2、Vue-cli [介绍 | 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 运行在[服务端][Link 1]的开发平台，它让JavaScript成为与[PHP][]、[Python][]、[Perl][]、[Ruby][]等服务端语言平起平坐的[脚本语言][Link 2]。它是基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

详情参考：[Node.js 简介][Node.js]

## 5、NPM [npm中文网 官网][npm_] ##

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

## 6、ElementUI [Element - The world's most popular Vue UI framework][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][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 中文网][Less _ _ Less.js _ - Less]

sass官网地址[Sass教程 Sass中文文档 | Sass中文网][Sass_ Sass_ _ Sass]

## 9、Axios ##

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

[GitHub - axios/axios: Promise based HTTP client for the browser and node.js][GitHub - axios_axios_ Promise based HTTP client for the browser and node.js]

[Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js][Axios _ _ Axios _ _ Axios _ promise _ node.js]

功能：

从浏览器中创建 [XMLHttpRequests][]

从 node.js 创建 [http][] 请求

支持 [Promise][] API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 [XSRF][]

[Vue.js - _ JavaScript _ _ Vue.js]: https://cn.vuejs.org/
[_ Vue CLI]: https://cli.vuejs.org/zh/guide/
[webpack]: https://webpack.docschina.org/
[Link 1]: https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1%E7%AB%AF/6492316?fromModule=lemma_inlink
[PHP]: https://baike.baidu.com/item/PHP/9337?fromModule=lemma_inlink
[Python]: https://baike.baidu.com/item/Python/407313?fromModule=lemma_inlink
[Perl]: https://baike.baidu.com/item/Perl/851577?fromModule=lemma_inlink
[Ruby]: https://baike.baidu.com/item/Ruby/11419?fromModule=lemma_inlink
[Link 2]: https://baike.baidu.com/item/%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80/1379708?fromModule=lemma_inlink
[Node.js]: http://dev.nodejs.cn/learn
[npm_]: https://npm.p2hp.com/
[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN
[GitHub - sass_node-sass_ Node.js bindings to libsass]: https://github.com/sass/node-sass
[Less _ _ Less.js _ - Less]: https://less.bootcss.com/
[Sass_ Sass_ _ Sass]: https://www.sass.hk/docs/
[GitHub - axios_axios_ Promise based HTTP client for the browser and node.js]: https://github.com/axios/axios
[Axios _ _ Axios _ _ Axios _ promise _ node.js]: https://www.axios-http.cn/
[XMLHttpRequests]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[http]: http://nodejs.org/api/http.html
[Promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[XSRF]: http://en.wikipedia.org/wiki/Cross-site_request_forgery