Node.js + Vue.js 的下载安装以及配置启动教程(超详细)
下载安装Node.js首先先下载Node.j,下载链接请点击这里 Node.js的下载链接 ,点击之后会进入以下页面,选择相应的版本下载即可下载之后,双击运行程序,点击next打钩,点击next改路径,点击next默认点击nextnextinstallfinishWin+R 打开 cmd 输入 node --version 或者 node -v(注意:versio...
什么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进行修改,打开文件之后点击编辑查找进行修改即可
修改之后再访问即可访问到你的项目
关注我的公众号,共同进步
更多推荐
所有评论(0)