05 传统html+vue+elementUI开发&nodeJS环境搭建

于 2022-05-03 20:59:38 发布
阅读量320 收藏
点赞数 2
分类专栏： 入门 文章标签： javascript 服务器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66587374/article/details/124560276
版权
本文介绍了ElementUI，一个基于Vue2.0的组件库，简化前端开发。接着讲解了Node.js的基本概念和优势，如高并发能力和统一前后端开发环境。详细阐述了Node.js环境的搭建过程，包括下载、解压、配置环境变量以及修改npm镜像以提高下载速度。最后，展示了如何安装和启动Node.js项目，包括安装依赖和运行项目。
摘要由CSDN通过智能技术生成

目录

一. ElementUI简介

二. Vue+ElementUI安装

         2.1 CDN方式

        2.2 NPM(略，需要配置NodeJs环境) 

三、Node.js介绍

四、node.js的优势

        4.1、Nodejs语法完全是js语法，

        4.2、NodeJs超强的高并发能力

        4.3、实现高性能服务器

        4.4、开发周期短、开发成本低、学习成本低

五. Node.js环境搭建

        5.1 下载

        5.2 解压

        5.3 配置环境变量

                        新增NODE_HOME，值为：D:\tools\node-v10.15.3-win-x64

​                        修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

                                注1：环境变量查看

                                注2：测试安装是否成功：

        5.4 配置npm全局模块路径和cache默认安装位置

                5.4.1打开cmd，分开执行如下命令：

​                           注1：

                注2：

                注3：

                注4：

        5.5 修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry)

                    5.5.1 --registry（推荐）

                                ## 设置淘宝源

​                                ## 查看源，可以看到设置过的所有的源

                5.5.2 cnpm

        5.6 验证安装结果

                5.6.1 版本验证(同步骤3.3，注2) 

                5.6.2 查看淘宝镜像设置情况

                5.6.3 查看npm全局路径设置情况

六. 如何运行下载的Node.js项目

        6.1. 打开命令窗口

        6.2. 切换到d盘 

        6.3. 进入指定目录

        6.4. 进行依赖安装

        6.5. 启动项目

一. ElementUI简介

        我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
   所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

   ElementUI官网：http://element-cn.eleme.io/#/zh-CN

   注1：类似前端框架还有iview

二. Vue+ElementUI安装

         2.1 CDN方式

      <!-- 1. 导入css -->
      <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
      <!-- 2. 引入vue和vue-router-->
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
      <!-- 未使用vue路由功能可不导入 -->
      <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
      <!-- 3. 引入ElementUI组件 -->
      <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script> 

        2.2 NPM(略，需要配置NodeJs环境) 

三、Node.js介绍

Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。

Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的js解释部分，但是Ryan Dahl 这哥们，鬼才般的，把这个V8搬到了服务器上，用于做服务器的软件。

四、node.js的优势

        4.1、Nodejs语法完全是js语法，

                只要你懂js基础就可以学会Nodejs后端开发

Node打破了过去JavaScript只能在浏览器中运行的局面。前后端编程环境统一，可以大大降低开发成本。

        4.2、NodeJs超强的高并发能力

NodeJs的首要目标是提供一种简单的、用于创建高性能服务器及可在该服务器中运行的各种应用程序的开发工具。

首先让我们来看一下现在的服务器端语言中存在着什么问题。在Java、PHP或者.NET等服务器语言中，会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约2MB内存。也就是说，理论上，一个8GB内存的服务器可以同时连接的最大用户数为4000个左右。要让web应用程序支持更多的用户，就需要增加服务器的数量，而web应用程序的硬件成本当然就上升了。

NodeJs不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的。使用Node.js，一个8GB内存的服务器，可以同时处理超过4万用户的连接。

        4.3、实现高性能服务器

严格地说，Node.js是一个用于开发各种web服务器的开发工具。在Node.js服务器中，运行的是高性能V8 JavaScript脚本语言，该语言是一种可以运行在服务器端的脚本语言。

那么，什么是V8 JavaScript脚本语言呢？该语言是一种被V8 JavaScript引擎所解析并执行的脚本语言。V8 JavaScript引擎是由Google公司使用C++语言开发的一种高性能JavaScript引擎，该引擎并不局限于在浏览器中运行。Node.js将其转用在了服务器中，并且为其提供了许多附加的具有各种不同用途的API。例如，在一个服务器中，经常需要处理各种二进制数据。在JavaScript脚本语言中，只具有非常有限的对二进制数据的处理能力，而Node.js所提供的Buffer类则提供了丰富的对二进制数据的处理能力。

另外，在V8 JavaScript引擎内部使用一种全新的编译技术。这意味着开发者编写的高端的 JavaScript 脚本代码与开发者编写的低端的C语言具有非常相近的执行效率，这也是Node.js服务器可以提供的一个重要特性。

        4.4、开发周期短、开发成本低、学习成本低

Node.js自身哲学，是话最小的硬件成本，追求更高的并发，更高的处理性能。

五. Node.js环境搭建

 由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。
   想一想，java开发的第一步：是不是安装JDK，再配置环境变量java_home/classpath/path

        5.1 下载

      下载地址：https://nodejs.org/zh-cn/download/ 
      选择相应的版本下载，本章使用的是：node-v10.15.3-win-x64.zip

 

  

      注1：Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本

        5.2 解压

 将文件解压到指定位置(例如：d:\tools)，并在解压后的目录下建立node_global和node_cache这两个目录
      
      注1：新建目录说明
           node_global：npm全局安装位置
           node_cache：npm缓存路径

      注2：本教程是将文件解压到d:\tools目录，后面都以此为例，实际开发中请修改成自己的解压目录
           D:\tools\node-v10.15.3-win-x64 

        5.3 配置环境变量

                        新增NODE_HOME，值为：D:\tools\node-v10.15.3-win-x64


                        修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

 

                                注1：环境变量查看

           echo %node_home%


           echo %path%

 

                                注2：测试安装是否成功：

打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
           node -v


           npm -v

 

        5.4 配置npm全局模块路径和cache默认安装位置

                5.4.1打开cmd，分开执行如下命令：

     npm config set cache "D:\ruanjian\node-v16.14.2-win-x64\node_cache"

     npm config set prefix "D:\ruanjian\node-v16.14.2-win-x64\node_global"


     
      
                注1：

将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来

                注2：

如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）

                注3：

"D:\tools\node-v10.15.3-win-x64\node_global"，双引号不能少

                注4：

node_global全局安装位置类似于Maven中的本地Jar包仓库

 

        5.5 修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry)


                    5.5.1 --registry（推荐）

                                ## 设置淘宝源

npm config set registry https://registry.npm.taobao.org/


                                ## 查看源，可以看到设置过的所有的源

        npm config get registry

   注1：其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
               registry=https://registry.npm.taobao.org

                5.5.2 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

         注1：cnpm安装完成后，以后就可以用cnpm命令代替npm命令, 此时npm还是会用官方镜        像，cnpm会用国内镜像
          注2：如果要恢复成原来的设置，执行如下：
               npm config set registry https://registry.npmjs.org/

        5.6 验证安装结果

                5.6.1 版本验证(同步骤3.3，注2) 

         node -v
          npm -v

                5.6.2 查看淘宝镜像设置情况

                npm get registry

                5.6.3 查看npm全局路径设置情况

        ## 此步骤随便全局安装一个模块就可以测评
          npm install webpack -g
          ## 以上命令执行完毕后，会生成如下文件
          %node_home%\node_global\node_modules\webpack

六. 如何运行下载的Node.js项目


   将下载的项目解压到指定目录，本例是解压到：D:\temp\vueproject，后面都以此为例

        6.1. 打开命令窗口

                cmd

        6.2. 切换到d盘 

                 d:

        6.3. 进入指定目录

        cd D:\temp\vueproject


下面的才是关键代码

        6.4. 进行依赖安装

   ##    命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，
   ##    那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，
   ##    此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖
   ##    那pom文件在哪里呢？其实就是项目中的package.json
   npm install

        6.5. 启动项目

                npm run dev

出现这个效果图就是Node.js环境搭建成功

 

☞南烟勿忘☜
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node后端开发劣势_Node在大前端中的应用场景分析
weixin_39758229的博客
12-18 1584
作者:前端361https://zhuanlan.zhihu.com/p/121055042关于node的使用已经很久了，使用范围也很广，似乎有前端的地方就有node，那么来思考一个问题，node到底是用来干嘛的呢？本文从五个大的方面对该问题进行了解释。我们知道node的出现，让前端开发既ajax之后，有了全新的面貌，在开发效率，性能等层面都有质的提升。归纳一直是知识提升的重要一环，参...
Node.js介绍、优势、用途
qq_43842093的博客
05-16 1077
一、Node.js介绍 Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。 Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的js解释部分，但是Ryan Dahl 这哥们，鬼才般的，把这个V8搬到了服务器上，用于做服务器的软件。 二、node.js的优势 1、Nodejs语法完全是js语法，只
nodejs的优点
weixin_40542544的博客
09-11 2979
1：为什么要用nodejs? Nodejs基于Javascript语言，不用再单独新学一门陌生的语言，从而减低了学习的门槛。同时，Javascript语言在Web前端开发中至关重要，特别HTML5的应用必须要使用，所以前后台统一语言，不仅可以实现程序员的全栈开发，还可以统一公共类库，代码标准化； Nodejs并没有重新开发运行时环境，而是选择了目前最快的浏览器内核V8做为执行引擎，保证了Nodejs的性能和稳定性； Nodejs的开发非常高效，而且代码简单，得意于Nodejs的单线程机制。而Nodejs的
Node.js应用场景及发展趋势
weixin_34116110的博客
05-28 356
node主要应用场景是在大前端，阿里的思路是比较合适的，但是必须要注意，绝对不能让node做太多的业务逻辑，他只适合接受人家生成好的数据，然后或渲染后，或直接发送到客户端。如果让node做复杂的业务逻辑，那会得不偿失的。这个阿里的人可以来说明一下，你们node主要应用的场景是不是都是比较简单的逻辑。 回调模式下的异步是有明显缺陷的，程序的执行顺序必须依靠回调来保证，没有层层回调，就没有可以保障的...
NodeJS优缺点及适用场景讨论
zfz1214的专栏
06-18 1737
http://www.xprogrammer.com/159.html
SuperManageSystem:一个基于vue + vue-router + elementui + axios + nodejs + mysql实现的后台管理系统项目
03-11
这个项目的核心特点在于它利用了Vue.js框架，结合vue-router进行页面路由管理，ElementUI作为界面组件库，axios负责前后端通信，以及Node.js作为服务器端运行环境，并通过MySQL进行数据存储。下面将详细介绍这些关键...
基于nodejs+vue2.0+element ui的学生社团管理系统源码.zip
07-05
基于nodejs+vue2.0+element ui的学生社团管理系统源码.zip 该项目是个人毕设项目源码，评审分达到95分，都经过严格调试，确保可以运行！放心下载使用。 该项目资源主要针对计算机、自动化等相关专业的学生或从业者...
vue环境搭建nodejs及elemeUI
04-23
在进行Vue项目的开发之前，我们需要搭建一个完整的开发环境，其中包括安装Node.js和集成ElemeUI这个流行的UI组件库。以下是对整个过程的详细步骤和相关知识点的解释。 ### 1. 安装Node.js 首先，你需要在你的计算机...
详解Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）
11-29
其中ElementUI，就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境： NodeJS（npm）Webstorm （前端IDE）Nginx（后期用来转发请求到后台服务器） 由于我们需要使用npm的包管理器，所以首先得先安装...
基于Vue和ElementUI的文化公司企业网站PC端设计源码
最新发布
03-28
一个使用Vue和ElementUI构建的文化公司企业网站PC端设计源码，包含Nodejs、Vue、JavaScript、CSS、HTML等编程语言。项目文件共72个，包括42个Vue文件、16个JavaScript文件、2个JSON文件、2个ICO文件、1个...
NodeJS的优势
OneFine的技术博客
06-30 2862
NodeJS的优势
Node.js优缺点
hlydiy的专栏
04-02 437
Node.js优点： 1、采用事件驱动、异步编程，为网络服务而设计。其实Javascript的匿名函数和闭包特性非常适合事件驱动、异步编程。而且JavaScript也简单易学，很多前端设计人员可以很快上手做后端设计。 2、Node.js非阻塞模式的IO处理给Node.js带来在相对低系统资源耗用下的高性能与出众的负载能力，非常适合用作依赖其它IO资源的中间层服务。3、Node.js轻量高效，可...
NodeJS的优缺点
weixin_30710457的博客
04-23 1372
我们知道NodeJS是2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，解决了JS不能在服务器上运行的难题，也给前端工程师开发后端接口提供了一个新的方案。 NodeJS是基于Event Loop(事件循环) 和CallBack（回调）把单进程、单线程 的效率发挥到极致（会...
Node.js的定义，优缺点及其作用
比国王富有
07-13 332
** Node.js 1、定义 它是一个Javascript运行环境（简单来说就是可以解析、执行js代码），不是一门语言/库/框架，依赖于Chrome V8引擎进行代码解释 （1）Node.js中的JavaScript没有BOM、DOM，只有ECMAScript （基本语法），因为服务端不操作页面 （2）在Node这个javascript执行环境中为js提供了一些服务器级别的操作API（文件读写、...
Nodejs做服务端的优缺点
热门推荐
机智的皮卡丘的博客
07-31 1万+
好久没有写博客了，作为一个小前端最近还是有点纠结后端语言用什么的，来分析一波nodejs在后端语言中的优缺点。 缺点： 1.nodejs单线程，不能做cpu密集型操作，导致时间片不能释放，阻塞后面的任务。 2.nodejs可靠性比较低，一个地方报错会导致整个程序崩溃，需要守护进程或者docker重启来解决。 3.像使用多核性能的时候需要使用cluster或者部署多个实例，比较麻烦。 4.内存默认0.7G和1.4G，设置大了之后垃圾回收会变慢，可能需要多部署几个实例。 5.nodejs类型的后端...
Node.js的简介及优缺点
shadowfall的博客
07-13 493
Node与Chrome Node除了HTML、WebKit和显卡相关技术没有支持外Node的结构与Chrome十分相似 Node的特点 Node最大的特点就是异步I/O，以读取文件为例，这里的“发起读取文件”是在”读取文件完成“之前输出的。同样”读取文件完成“的执行也取决于读取文件的异步调用何时结束。 var fs = require('fs') fs.readFile('path', function(err, file) { console.log('读取文件完成') }) console.log
node是什么？前端学习小计
aa67567456的博客
12-13 405
Node.js 是什么 传统意义上的 JavaScript 运行在浏览器上，这是因为浏览器内核实际上分为两个部分:渲染引擎和 JavaScript 引擎。前者负责渲染 HTML + CSS，后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快。 Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎。我们知道 Apache + PHP 以及 Java 的 Servlet 都可以用来开发动态网页，Node.js 的作用与他们类似，.
Node.js的特点
aliven1的博客
03-09 196
1.单线程，处理高并发性能比较好，只是比较耗内存，每个任务都是异步处理，处理完释放内存 2.Php是多线程，分配线程150个，任务执行是排队执行，多并发处理性能没有node快，需要优化 ...
django+vue3+elementui开发一个员工管理系统代码
05-11
抱歉，我是一个语言模型，无法提供完整的代码。但是，我可以给你一些参考和提示。 首先，你需要安装 Django、Vue3 和 ElementUI。然后，你需要创建 Django 项目和 Vue3 项目。在 Django 项目中，你需要创建一个应用程序来处理员工管理系统的逻辑。在 Vue3 项目中，你需要创建组件来呈现用户界面。 在 Django 中，你需要创建一个模型来表示员工。这个模型将包含员工的姓名、职位、薪水等信息。你还需要创建视图来处理员工的增删改查等操作。这些视图将接收来自 Vue3 前端的请求，并返回 JSON 格式的数据。 在 Vue3 中，你需要创建组件来呈现员工管理系统的用户界面。你可以使用 ElementUI 来构建这些组件。你需要创建一个表格组件来显示员工列表，并添加增删改查等操作按钮。你还需要创建一个表单组件来添加或编辑员工信息。 在 Vue3 中，你需要使用 Axios 或其他类似的库来发送 HTTP 请求到 Django 后端，并处理返回的 JSON 数据。你还需要使用 Vue Router 来设置路由，以便用户可以导航到不同的页面。 最后，你需要将 Django 和 Vue3 项目集成在一起。你可以使用 Django REST framework 来构建 RESTful API，并在 Vue3 中使用 Axios 来调用这些 API。你还需要使用 Django 的模板引擎来渲染 Vue3 前端页面。 这是一个大致的指南，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值