1、node.js
Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,
所以首先要安装node.js。 (安装步骤见前几节笔记)
1、安装node.js
安装完毕之后,在命令行下验证是否安装成功:
2、进入命令行
开始-运行- cmd
3、查询node版本
输入 npm -v
,
显示版本信息就表示node.js安装成功。
4、 cnpm
安装完node之后,npm包含的很多依赖包是部署在国外的,为了加快依赖包的加载速度,开发中一般选择使用国内的镜像。cnpm是淘宝对npm的镜像服务器,
输入 cnpm
5 vue-cli安装
vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、
保存时静态检查以及可用于生产环境的构建配置的项目。安装命令如下:
cnpm install -g vue-cli
安装完后,检查是否安装成功,输入vue(或者使用vue -v查看版本信息),出现相关的帮助信息则说明安装成功。
6、新建项目
新建一个项目文件夹(如 vue)(忘记没建),cd到此文件夹,输入init命令新建一个vue项目:
vue init webpack vue-demo
(vue-demo 是项目名称)
血和泪:
vue init webpack vue-demo
(vue-demo 是项目名称)
为什么一直强调 vue-demo 是项目名称,就是因为在建立项目初期
只会照猫画虎,一步步操作,没太看明白,还以为 vue-demo 是命令中的参数,在命令中经常也会用到 -参数的格式对吧,所以这里在不明白的情况下,当成了命令的一部分,写成了一个空格,也怪自己看的不够仔细,就这一个错误,一直就过不去,始终报错还找不到原因
现在看来只是觉得这错误犯的有够幼稚。
7、安装依赖
接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包:
cnmp install
要在项目的文件夹下,安装项目依赖包
8、启动项目
接下来,在命令行里输入命令:
cnpm run dev
执行完成后启动项目,浏览器出现以下接结果,说明启动成功。
9、打开浏览器,输入网址:http://localhost:8080/#/
迈向成功的第一步成功。