前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)
一.安装 NodeJS
1. 下载地址:https://nodejs.org/en/download/
安装过程:点击next安装
测试安装成功:
打开命令行窗口(WIN +R键)
命令行输入 node -v ,如果输出版本号,则表示安装成功。
在我们安装NodeJS的同时,它自带的包管理工具 NPM 也一同被安装
我们可以命令行输入 npm -v ,如果输出版本号,则表示安装成功。
二. 安装cnpm 包管理器
cnpm是淘宝在国内的npm镜像资源,方面国内安装。
我们在命令行中输入以下命令:
npm install -g cnpm --registry=http://registry.npm.taobao.org
等待片刻,cnpm成功安装。
三. 安装 vue-cli (Vue 脚手架)
前面的几部都是为安装 vue-cli 做的准备工作,我们其实是要利用 nodeJS 的 npm 包管理器来安装 vue-cli 。
安装方式:命令行中运行命令cnpm install -g vue-cli
,然后等待安装完成。
通过以上步骤,我们的vue 开发环境就搭建好了,我们接下来就可以使用vue-cli来构建项目了。
四.构建 Vue 项目
1. 新建一个vue项目放置的文件夹,我是在F盘下创建 VueProject目录;
2. 命令行跳转到上面目录
3. 命令行输入vue init webpack-simple myapp
快速安装, 按Enter 键确认;
ps:如果想安装完整目录,可以使用“vue init webpack myapp
”,
4. 按Enter键 确认项目名称,
5. 按Enter键 确认项目作者
6. 按Enter键 确认许可
7. 输入 “Y” 确认安装sass的依赖包
8. 到此,我们可以在我们的 VueProject目录中看到我们构建的项目 myapp
五.项目启动及发布
当我们构建 vue 项目完成后,就可以在浏览器启动了,具体步骤为:
1. 命令行窗口中跳转到 myapp 项目路径;
2. 输入cnpm -install ,按Enter键,等待完成安装node 工具包,完成后将在 myapp文件夹中新增“node_modules”目录;
3. 输入 cnpm run dev,按Enter键,将在浏览器中跳转到:
http://localhost:8080/index.html
到此,说明我们已经成功发布了项目。
六.补充说明
1. 安装路由模块(vue-router)及网络请求模块(vue-resource)命令: cnpm install vue-router vue-resource --save
2.默认发布项目时,使用8080端口,如果8080端口被占用,我们可以修改默认端口。
构建项目时的坑
1. vue中项目名称不能输入大写字母,否则会报以下错误:
Sorry, name can no longer contain capital letters.(项目名称不能包含大写字母)。
2. 官方文档中构建项目时,命令行输入vue init webpack myapp
,而国内由于网络问题,会导致出现 downloading template无限下载的结果;
我们安装了淘宝的镜像后,可以直接使用 命令: vue init webpack-simple projectname
构建项目。