脚本宝典收集整理的这篇文章主要介绍了

Vue.js小白入门,搭建开发环境

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

installvue_logo

最近Vue.js的热度持续上升,甚至有标题说2017再不会Vue.js就out了。而作为一个不排斥前段的后端码农来说,当然也要跟得上时代。近来准备放下手中的DOM操作,来一次Vue.js从入门到放弃。现将环境搭建过程记录下来。


环境准备

  • Node.js Javascript的运行时环境
  • npm Node.js下的包管理工具
  • webpack 前端资源模块化管理和打包工具
  • vue-cli 脚手架构建工具
  • cnpm npm的淘宝镜像

如果你像我一样是个后端开发者,并且对以上的工具还处在一脸懵逼的状态下。那么可以先看一下这篇文章萌新也能懂的现代 JavaScript 开发。了解一下现代 JavaScript的演变过程。

Vue.js安装

1. Node.js的安装非常容易,首先从官网下载你所需操作系统的版本,然后一直下一步就ok,这里贴个菜鸟教程的传送门
安装完成之后,在命令行敲出node -v,如果出现对应版本号,则表示安装成功。
Vue.js小白入门,搭建开发环境-脚本宝典
2. npm是随同Node.js一起安装的包管理工具,直接在命令行敲出npm -v就可以查看是否安装成功。
Vue.js小白入门,搭建开发环境-脚本宝典
npm包管理器虽然有了,但是由于npm下载需要依赖包的服务器地址在国外,导致很多资源访问会很慢。所以我们可以安装淘宝的国内镜像。
3. 在命令行敲出 npm install -g cnpm --registry=http://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:

cnpm install [name]

4. 安装webpack

cnpm install webpack -g

5. 安装vue脚手架

npm install vue-cli -g

初始化一个Vue.js环境

在电脑上新建一个文件夹用来存放我们的代码。然后使用命令行进入这个文件夹cd 目录路径
之后使用命令

vue init webpack name

来初始化一个vue环境,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。在安装过程会有一些初始化的设置,我们可以采用默认配置,一路回车 。
Vue.js小白入门,搭建开发环境-脚本宝典
从上图的我们还可以看到vue很贴心的告诉了我们快速开始(To get started)的命令
安装项目依赖
一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

启动项目

npm run dev

运行成功以后他会告诉你ip和端口号
Vue.js小白入门,搭建开发环境-脚本宝典
访问这个地址
Vue.js小白入门,搭建开发环境-脚本宝典
如果出现上图。恭喜你,已经可以开始Vue.js之旅了。


本文作者: catalinaLi
本文链接: http://catalinali.top/2017/in...
版权声明: 原创文章,有问题请评论中留言。非商业转载请注明作者及出处。

总结

以上是脚本宝典为你收集整理的

Vue.js小白入门,搭建开发环境

全部内容,希望文章能够帮你解决

Vue.js小白入门,搭建开发环境

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过