什么Node.js?

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。

    Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。(来源百度百科)

下载安装Node.js

首先先下载Node.j,下载链接请点击这里 Node.js的下载链接 ,点击之后会进入以下页面,选择相应的版本下载即可
在这里插入图片描述

安装Node.js

下载之后,双击运行程序,点击next

在这里插入图片描述
打钩,点击next
在这里插入图片描述
改路径,点击next
在这里插入图片描述
默认点击next
在这里插入图片描述
next
在这里插入图片描述
install
在这里插入图片描述
finish
在这里插入图片描述
Win+R 打开 cmd 输入 node --version 或者 node -v注意:version前面有两个 – )验证是否安装成功
在这里插入图片描述
安装后的目录如下所示
在这里插入图片描述

配置环境

配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)
如:
在这里插入图片描述
输入以下命令配置一下,我的是在虚拟机里面安装的,所以路径是在C盘,大家可以设置在其他盘

npm config set prefix "D:\node\node_global"
npm config set cache "D:\node\node_cache"

在这里插入图片描述
右击计算机,点击属性,点击高级系统设置
在这里插入图片描述
点击环境变量
在这里插入图片描述
新建NODE_PATH变量名,输入node_modules所在的路径
在这里插入图片描述
点击用户变量,点击path,修改一下
在这里插入图片描述
修改为node_global的路径
在这里插入图片描述

什么是Vue.js?

    Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。(来源百度百科)

安装Vue组件

安装express

输入以下指令

npm install express -g

在这里插入图片描述

全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。

安装命令:

npm install -g vue-cli
如果下载太慢,可以使用淘宝镜像
//切换淘宝镜像
npm config set registry https://registry.npm.taobao.org

验证是否已经切换
npm config get registry

在这里插入图片描述

安装webpack,它是打包js的工具

安装命令:

npm install -g webpack 

在这里插入图片描述

在开始创建项目之前还需要安装Vue

命令为:

npm install vue

在这里插入图片描述

再输入 npm install 安装包

输入vue验证vue是否安装成功
可以看到有关vue的相关用法,其中vue init就是生成一套vue模板
在这里插入图片描述
这个时候就可以创建项目了,打cmd输入命令如下:

vue init webpack 项目名

在这里插入图片描述
这个时候我们就可以看到vuecode文件夹下生成的vue模板
在这里插入图片描述

启动Vue项目

接下来我们启动一下我们生成的项目,输入以下指令

npm run dev

在这里插入图片描述
启动成功,在浏览器中输入localhost:8080即可访问到项目
在这里插入图片描述
如果访问不到页面而且也没报错的,有以下原因

  • 一种是浏览器的问题,笔者使用IE8的时候是无法访问到页面的,换了一个谷歌浏览器访问之后就可以了
  • 另一种是把localhost改为你的电脑IP地址,端口改为9090,修改方法如下:

(1)点击你的项目下的config文件夹
在这里插入图片描述
(2)点击index,js进行修改,打开文件之后点击编辑查找进行修改即可
在这里插入图片描述
修改之后再访问即可访问到你的项目

关注我的公众号,共同进步
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐