vue是什么?是一个前端框架
node.js:运行JavaScript的运行环境,本质是tomcat和响应的管理器。
npm:node.js下的包管理器
webpack:用来将组建,如***.vue组建打包翻译成.js文件,被浏览器解析。
vue-cli:用来创建模板的vue工程,通过该工程,创建vue工程项目,然后再该工程里创建前端界面,最后编译,打包成js文件,然后再被浏览器解析。
一、安装node.js
windows系统,安装node.js ,到官网下载http://nodejs.cn/
node.js直接安装到系统,node.js自带npm管理器,但有可能不是最新的。
安装完成后,找到命令行工具,以管理员身份打开。
进入如下界面
二、更新npm、安装必要的组件
1、更新npm到最新版本 npm update -g(防止因为版本问题,报错)
备注:更新node.js 需要两个命令
命令: npm install -g n
n latest
2、更换组件地址,为淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org(因为国外网速很慢,且有可能访问不到)
(备注:很多人说cnpm有很多的bug,因此建议使用npm install --registry=https://registry.npm.taobao.org)
3、安装webpack,用来打包,翻译vue组件的插件
cnpm install webpack -g
4、安装创建模板的vue工程插件
cnpm install vue-cli -g
三、创建前端工程
vue init webpack my-project(最后这个是项目的文件夹名称)
之后会选择多个配置选项,包括,项目名称,作者,还有校验,测试等。
四、进入到项目中,安装项目依赖
进入到工程目录
d:
cd npm
cd helloWorld(创建的项目名称)
安装依赖项
npm install 载入会比较慢
cnpm install vue-router vue-resource --save(如果之前没有更改组件地址为淘宝地址,则使用npm)
npm run dev(启动项目)
经过一系列的加载,没有错误后,结果界面如下
在浏览器输入localhost:8080,得到如下界面
至此,启动成功。