前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)

一.安装 NodeJS
1. 下载地址:https://nodejs.org/en/download/

  1. 安装过程:点击next安装
    前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)

  2. 测试安装成功:
    打开命令行窗口(WIN +R键)
    命令行输入 node -v ,如果输出版本号,则表示安装成功。
    在我们安装NodeJS的同时,它自带的包管理工具 NPM 也一同被安装
    我们可以命令行输入 npm -v ,如果输出版本号,则表示安装成功。
    前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)

二. 安装cnpm 包管理器
cnpm是淘宝在国内的npm镜像资源,方面国内安装。
我们在命令行中输入以下命令:

npm install -g cnpm --registry=http://registry.npm.taobao.org

前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)
等待片刻,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的依赖包

前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)
8. 到此,我们可以在我们的 VueProject目录中看到我们构建的项目 myapp
前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)

五.项目启动及发布
当我们构建 vue 项目完成后,就可以在浏览器启动了,具体步骤为:
前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)
1. 命令行窗口中跳转到 myapp 项目路径;
2. 输入cnpm -install ,按Enter键,等待完成安装node 工具包,完成后将在 myapp文件夹中新增“node_modules”目录;
3. 输入 cnpm run dev,按Enter键,将在浏览器中跳转到:
http://localhost:8080/index.html
到此,说明我们已经成功发布了项目。
前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)

六.补充说明
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 构建项目。

文末送福利!现在关注我的公众号,回复 【vue】即可获取价值 299 元的Vue学习视频资源。为感谢大家的支持,我将不定期发布更多免费学习资源。
前端开发框架 Vue 学习第一篇—— 开发环境搭建(文末送福利)