安装node.js
下载地址 https://nodejs.org/zh-cn/ (下载长期使用版本就行,下载完了双击傻瓜式安装,)
安装完了之后打开命令窗口 快捷键 win+R 输入 cmd 回车
输入 node -v 和 npm -v 如果显示了版本号 说明已经安装成功!!!
安装淘宝镜像
接下来安装cnpm,因为许多npm包都是在国外,安装起来特别慢,所以使用淘宝的镜像服务器。
安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack
安装命令:cnpm install webpack -g
安装vue脚手架
安装命令:cnpm install -g vue-cli
安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了。
创建项目
D: 可以进入D盘
cd 文件夹名 进入文件夹
vue init webpack my-vue(项目文件夹名) 回车之后等一会之后会要求输入一些项目信息
Project name ----项目名称,使用英文
Project description ----项目描述,可写可不写
Author Datura ----项目创建者,可写可不写
Vue build ----直接回车
Install vue-router? (Y/n) Y ----是否安装Vue路由,我选择的是
Use ESLint to lint your code? (Y/n) n ----是否启用eslint检测,我选择no
Set up unit tests? (Y/n) n ----是否建立单元测试,我选择no
Setup e2e tests with Nightwatch? (Y/n) Y---设置e2e测试 我选择的是
完事之后进入到刚刚创建的文件夹下就可以看到我们的项目,如图
安装项目依赖
一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。
安装命令:npm install
不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)
安装命令:cnpm instal
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
安装命令:cnpm install vue-router vue-resource --save
启动项目
启动命令:npm run dev (如果看到下图显示就代表已经启动了,将8080网址复制到浏览器就可以打开)
如果浏览器显示这样的话就代表已经启动成功了!!!~~~
默认端口是8080,如果电脑目前有其他的项目占用了8080端口,项目启动会报错,可以在项目中config > index.js
中找到port:8080
直接修改成其他端口就可以了