1.首先下载node.js,nodejs官网 https://nodejs.org/zh-cn/download/,根据自己操作系统选择合适的下载
2.window 的msi安装包 直接双击点击下一步 下一步就行 安装组件默认npm 和path环境变量都会配置好
3.安装完毕 打开cmd测试 查看node和npm版本
node.js是什么:
JavaScript大家都知道是在浏览器运行的,Nodejs 是基于 Chrome 的 V8 引擎开发的一个 C++ 程序,目的是在非浏览器下可以实现和浏览器一样运行 JavaScript的效果,基于Google的V8引擎,因为 Google V8引擎执行Javascript的速度非常快,性能非常好。
所以简单理解nodejs就是一个可以运行JavaScript的平台,(感觉和java的jdk有点类似,只有在安装jdk环境后才能运行java程序!)
npm是什么:
npm就是一个软件包管理仓库,目前我们开发中需要的各种组件,工具基本都上传到npm了,我们可以使用npm指令直接下载使用,而不用通过传统的需要什么去网上或者官网下载对应的工具,比如我要需要使用jquery.js 我们登录npm的网站查询
https://www.npmjs.com/ ,使用 npm i jquery指令即可下载jquery到本地项目 (和maven仓库有点类似,只不过maven是用来管理java的jar包的)
4.我使用的idea2019.1 ,idea新建一个static web
5.打开idea的Terminal,测试npm指令是否可用,前提是直接打开cmd时 npm可用,如果提示npm不是可运行的命令之类,查看idea配置的cmd路径是否为C:\Windows\System32\cmd.exe,配置好重启idea,还是无效重启电脑试下。。。
6.npm可用后执行指令npm i -g cnpm --registry=https://registry.npm.taobao.org
安装淘宝的cnpm,指定淘宝镜像地址,因为npm服务器在国外,受网络影响大,使用淘宝团队的cnpm镜像下载速度会快很多
成功后执行指令cnpm i -g vue-cli
或者直接把npm地址注册为淘宝的地址
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
自带的
淘宝的
安装vue脚手架,安装完成后执行指令vue -V 测试是否可用
7.以上步骤只需要执行一次 ,接下来初始我们的vue工程,Terminal切换到工程上级目录 指令cd ..
执行命令vue init webpack VueDemo01 初始化工程,选项根据情况输入
Project name my-project --项目的名称,直接默认回车,不能输入大写
Project description A Vue.js project --项目描述,直接默认回车
Author syf --作者姓名,输入名字(syf)回车
Install vue-router? Yes --是否安装路由,输入y回车
Use ESLint to lint your code? No --是否用ESLint规范代码,输入n回车
Set up unit tests No --是否需要单元测试,输入n回车
Setup e2e tests with Nightwatch? No --是否需要单元测试,输入n回车
8.工程初始化完成后会显示需要执行的命令
(1)根据提示先执行 cd VueDemo01 后执行 npm run dev
(2)执行完毕可以看到提示 Your application is running here: http://localhost:8080
(3)浏览器输入http://localhost:8080 看到以下界面说明vue成功创建且启动成功