Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。那么下面大家一起看看如何来搭建Vue开发环境的吧。(老司机绕道而行)
第一步:安装Node
1.先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/download/,(我使用的Win10系统,所以下载的是windows版本的哈!)
2.检查Node安装是否成功,如下图所示:点击“以管理员身份运行”,输入命令:node -v 回车 查看node版本号,出现版本号则说明安装成功
第二步:安装淘宝npm镜像
由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步:安装全局vue-cli脚手架
淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;
输入命令:cnpm install --global vue-cli
第四步:创建一个新项目
搭建完手脚架之后,我们要开始建一个新项目:输入命令:vue init webpack myproject_first
"my-project-first"是自身创建的项目文件夹名,那有人会问:通过这个命令创建的项目文件夹在哪找呀?别急,继续往下看。
Node默认安装的路径是在C盘,启动Node命令窗体我们可以看到输入的命令所执行的文件路径,如下图所示:
因为创建Vue项目都比较大,在这建议大家不要直接在默认的路径上输入命令,如要切换盘符,直接输入 盘符编号+英文状态下的冒号即可,如输入 I: 回车,这时再输入创建项目命令:vue init webpack myproject_first,那么项目文件夹就在I盘下
创建项目之后,一直按回车,直到出现是否要安装vue-route,这个我们在项目中要用到,所以输入y 回车,其他的暂时用不到,则输入n 回车
第四步:进入项目文件夹,并在项目里安装依赖
输入命令:cd myproject_first 回车,在项目里安装依赖,输入命令:cnpm install
第五步:运行项目
输入命令:cnpm run dev 回车 弹出一个浏览器访问地址:http://localhost:8080
第六步:启动浏览器输入地址:http://localhost:8080访问
到此为止,vue开发环境搭建完毕!
小贴士:如何修改默认的端口?
在项目目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js,这里不仅可以改变端口,还可以根据需要改变其他配置信息。
更多Vue学习教程请点击下方链接:
https://cn.vuejs.org/v2/guide/
http://www.runoob.com/vue2/vue-tutorial.html
寄语:感谢您花时间来阅读这篇文章,如果觉得对您有帮助请点个赞呗!