Node.js安装以及vue脚手架搭建
Node.js安装以及vue脚手架搭建一、Node.js安装1、下载Node.js安装包2、安装3、配置环境二、vue脚手架搭建1、更换国内淘宝镜像cnpm2、安装vue脚手架由于在构建vue脚手架时出了点问题,几经周折终于解决了,现在分享给大家完整流程。一、Node.js安装本机配置为win 10专业版 64位1、下载Node.js安装包到Node.js官网https://nodej...
Node.js安装以及vue脚手架搭建
由于在构建vue脚手架时出了点问题,几经周折终于解决了,现在分享给大家完整流程。
一、Node.js安装
本机配置为win 10专业版 64位
1、下载Node.js安装包
- 到Node.js官网https://nodejs.org/zh-cn/下载想要的版本,点击其它下载再选择以往版本,可以选择其它版本下载。
- 根据自己电脑配置下载即可,比如我是win10 64位,选择了旧一点的10.15.0,也可以选择新版本,我这里是老师要求的。(直接下载msi安装包安装方便一下,不要下载压缩包)
2、安装
-
下载完成双击进入安装页面,一路next即可,中间可以更改安装路径,没有强制装在C盘,建议放其他盘。
-
安装完成后,win+r输入cmd打开终端,输入node -v 和 npm -v ,显示版本号即安装成功了(npm包在安装node.js时顺带自动安装了)
3、配置环境
-
在通过npm安装vue或webpack的时候,node.js默认安装在路径C:\Users\用户名\AppData\Roaming下,为了不占用C盘空间,并且出现系统禁止脚本运行的情况(装vue脚手架时可能报错),所以强烈建议将路径改到安装包里的。
首先进入node.js的安装目录,新建node_global和node_cache两个文件夹,如下图:
-
接着在cmd终端输入一下两个命令(这里是我的路径,你得根据自己的安装路径修改):
npm config set prefix "D:\Front-end_Software\Nodejs\node_global"
npm config set cache "D:\Front-end_Software\Nodejs\node_cache"
-
修改保存位置后,设置环境变量(我的电脑->属性->高级系统设置->高级->环境变量),在系统变量中新建一个NODE_PATH变量,变量值为文件node_modules的路径(在你node.js安装路径里就能找到)
-
再编辑用户变量里的Path,将最后一个路径C:\Users\用户名\AppData\Roaming改成刚刚新建的node_global路径D
:\Front-end_Software\Nodejs\node_global
,配置完成。
二、vue脚手架搭建
1、更换国内淘宝镜像cnpm
- 由于npm是国外服务器提供,下载速度会慢一点,所以推荐更换镜像源为cnpm,首先新建一个vue项目文件夹,按住shift键以及鼠标右键,进入powershell终端界面,输入命令行**
npm install -g cnpm --registry=https://registry.npm.taobao.org
** 更换淘宝镜像。安装完成输入命令行cnpm -v,若显示版本信息,则更换成功。(如果安装失败也没关系,直接用npm其实也不慢,两三分钟就OK)
2、安装vue脚手架
- 还是在当前界面,输入命令行
cnpm install -g vue-cli
(没有淘宝镜像的则用npm install -g vue-cli )回车等待一路自动安装即可。 - 安装成功
- 接着管理员身份运行cmd终端,进入你的vue项目文件夹,记住要进入项目文件夹!,输入命令行
vue init webpack my-vue-project
(my-vue-project为文件夹名,文件夹名可写可不写,写了是为了文件存放更规整)输完回车
- 1 Generate project in current directory? (是否在此路径新建项目)输入Y 等待下载template。
- 2 输入文件夹名(同上面一致)(不能有大写字母)
- 3 项目说明,默认回车就可以
- 4 填写作者(随便写)
- 5 回车即可,默认standalone独立运行
- 6 Install vue-router? 输入Y
- 7 Use ESLint to lint your code? (使用ESLint来lint你的代码?)输入Y
- 8 回车 默认standard
- 9 Set up unit tests 输入N
- 10 Setup e2e tests with Nightwatch? 输入N
- 11 回车即可,默认选择npm;
- 恭喜你,到此就构建完成了。
- 输入命令行
cd my-vue-project
(my-vue-project是前面安装时设置的文件夹名字,这一步你在安装webpack时有设置文件名则用,没有就不用) - 再输入**
npm run dev
,打开浏览器输入http://localhost:8080** 成功进入项目页面就可以了。
- 打开vscode,左上角文件找到刚刚新建的vue文件,点击查看,打开终端,输入
cnpm install
(初始化)接着输入cnpm run dev
(运行)弹出页面链接,即可开始编写页面了。之后每次要运行页面则在终端输入npm start即可。
更多推荐
所有评论(0)