热门标签 | 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文件。

 


推荐阅读
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • 本文介绍了在使用vue和webpack进行异步组件按需加载时可能出现的报错问题,并提供了解决方法。同时还解答了关于局部注册组件和v-if指令的相关问题。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 本文讨论了在使用PHP cURL发送POST请求时,请求体在node.js中没有定义的问题。作者尝试了多种解决方案,但仍然无法解决该问题。同时提供了当前PHP代码示例。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ... [详细]
  • 前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 本文介绍了Python函数的定义与调用的方法,以及函数的作用,包括增强代码的可读性和重用性。文章详细解释了函数的定义与调用的语法和规则,以及函数的参数和返回值的用法。同时,还介绍了函数返回值的多种情况和多个值的返回方式。通过学习本文,读者可以更好地理解和使用Python函数,提高代码的可读性和重用性。 ... [详细]
  • CentOS7.8下编译muduo库找不到Boost库报错的解决方法
    本文介绍了在CentOS7.8下编译muduo库时出现找不到Boost库报错的问题,并提供了解决方法。文章详细介绍了从Github上下载muduo和muduo-tutorial源代码的步骤,并指导如何编译muduo库。最后,作者提供了陈硕老师的Github链接和muduo库的简介。 ... [详细]
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社区 版权所有