热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【VUE.JS】安装部署篇:验证开发环境:NODE+Express+VUE+WEBPACK

通常,对于一项新技术的初学者,在开发的前期环境部署中,因为不熟悉,安装了很多文件,过一段时间后也不确定系统中是
通常,对于一项新技术的初学者,在开发的前期环境部署中,因为不熟悉,安装了很多文件,过一段时间后也不确定系统中是否已经安装了需要的的开发环境。例如部署安装VUE+NODE.js +WEBPACKWindows开发环境。


1、Check系统中是否存在NODE.JS 文件及其版本号, 以“管理员的身份运行“CMD”命令,打开命令行窗口;

输入:node -v



2、安装验证Express的使用

npm init



npm install express

   

 安装成功后,写index.js,可以测试Express是否正常Work.

index.js 内容如下:

const express = require('express')  //引入express模块

const app = express()  //实例化express

app.get('/',(req,res)=>res.seng('Hello, Jane')) //设定跟路由显示

app.listen(3000,()=>console.log('The port 3000 is listening now!'))  //侦听3000端口

运行,测试;

命令行执行: node  index.js

网页地址访问: http://localhost:3000/ 

3、安装验证VUE.JS 

VUE.js的使用有两种方式:

(1)、通过CDN方式或引入静态文件;

(2)、通过命令行安装;

npm install vue 

安装完成后,文件目录中便有了"node_modules"文件夹

 4、安装Webpack

       执行如下一些命令:

        npm install webpack

        npm install webpack-cli

        npm install vue

        npm install vue-loader

        npm install vue-template-compiler

命令全部执行完成后,检查package.json文件:

 

刚才安装的依赖项已经全部加载。 

概念解释: 

1、Node.js:Javascript的运行环境;Javascript语言运行的一个壳,有了Node.js, Javascript

                      从原来只能运行在web浏览器中,现在可以运行在任何地方,可以和PHP,Python                          等语言相媲美。

2、Express: 基于Node.js的一个后端框架,是对Node.js中的HTTP模块进行的一层抽象。

3、VUE.js:  用于构建Web用户界面的渐进式Javascript前端框架。

                      基于标准HTML,CSS,和Javascript构建,并提供了一套声明式的、组件化的编程                        模型。  

4、Webpack:打包工具,将*.vue文件编译成普通的Javascript文件。

 


推荐阅读
  • 本打算教一步步实现koa-router,因为要解释的太多了,所以先简化成mini版本,从实现部分功能到阅读源码,希望能让你好理解一些。希望你之前有读过koa源码,没有的话,给你链接 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom"echarts";4、如果用到map(地图),还 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文详细介绍了如何在 Vue CLI 3.0 和 2.0 中配置 proxy 来解决开发环境下的跨域问题,包括具体的配置项和使用场景。 ... [详细]
  • 作为一名新手开发者,我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用,涉及多个复杂组件(如按钮、图表等)。希望有经验的开发者能够提供指导。 ... [详细]
  • Webpack 初探:Import 和 Require 的使用
    本文介绍了 Webpack 中 Import 和 Require 的基本概念和使用方法,帮助读者更好地理解和应用模块化开发。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • 本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换,包括安装Guest Additions增强功能,以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]
  • 解决PHP项目在服务器无法抓取远程网页内容的问题
    本文探讨了在使用PHP进行后端开发时,遇到的一个常见问题:即在本地环境中能够正常通过CURL获取远程网页内容,但在服务器上却无法实现。我们将分析可能的原因并提供解决方案。 ... [详细]
  • 提升工作效率:掌握15个键盘快捷键
    在日常工作中,熟练掌握计算机操作技巧能够显著提升工作效率。本文将介绍15个常用的键盘快捷键,帮助用户更加高效地完成工作任务。 ... [详细]
author-avatar
Song_Rr
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有