Vue之搭建脚手架(vue-cli)

Vue之搭建脚手架(vue-cli)

31
Mar 2017

这是第一篇我在自己的博客发表的文章,建此博客的目的就是在激励自己的学习意志,加深知识的印象(好像把话扯远了一些,以后我的博文我会都以白话去发布,方便大家理解,因为我比较讨厌专业术语,哈)。

Vue已经火了有一段时间了,最近发现不是一般的火,是挺火的。所以,我也要学习一下如何使用Vue,要不然你就要OUT啦,是吗?

在要使用Vue的时候,我们首先要做的就是要先把环境搭好,然后在此环境上来搭建脚手架,提高开发效率。

其实脚手架是什么呢?我也是刚开始学,对于我的理解是:它可以帮你快速开始一个Vue项目,生成一套很全面的文件结构,其中包含基础的依赖库,我们不需要花太多的时间去浪费在编译或其它琐碎的事情上,从而提升工作效率。不知道我的理解正确吗?

环境搭建

1.安装nodejs

首先从nodejs官网下载安装程序,下载成功后,双击运行,在弹出的窗口中一路狂点“下一步”即可安装完成。安装完成后,打开命令行工具输入node -v,如果出现了版本号,说明就已经安装成功了,可以进行一步。

注意:在官网下载了nodejs后并安装,就已经自带了npm包管理工具了。

2.安装淘宝镜像

打开命令行工具,复制这条命令并运行npm install -g cnpm –registry=https://registry.npm.taobao.org。因为npm的服务器是在国外,在安装的时候会很慢,更有可能会安装失败,所以,我们要利用国内淘宝镜像来安装依赖。运行完上面这条命令,成功后我们依然在命令行工具输入cnpm -v来查看版本号,如果有说明已经安装成功了。

3.安装webpack

在命令行工具里输入npm install webpack -g,安装完成后,输入webpack -v查看版本号,出现则成功。

4.安装vue-cli脚手架

在命令行工具里输入npm install vue-cli -g,安装完成后,输入vue -V(这里的V是大写的,不是小写的哦),出现版本号则安装成功。

vue-cli构建项目

环境搭好以后,我们就要开始使用vue-cli脚手架来构建项目了。

1.创建一个文件夹

可以在资源管理器中,鼠标右键新建文件夹,或者在命令行工具cd到你刚刚创建的文件夹中都可以。

2.安装vue-cli脚手架工具

在命令行工具输入vue init webpack exprice,exprice代表你刚才创建的文件夹名称,也就是你的项目名称。

3.进行目录并且安装依赖

使用CD命令进入刚才创建的目录,使用npm install安装项目依赖。如果使用npm install安装失败的话,建议使用淘宝国内镜像来安装cnpm install

4.安装路由模块和网络请求模块

使用cnpm install vue-router vue-resource –save来安装这两个模块。

安装完成后的目录结构如下:

5.启动项目

输入:npm run dev启动项目。启动成功后,会自动打开一个欢迎页面。如下图:

注意:这里默认占用的是8080端口,所以请确保您的计算机8080端口没有被占用。如果被占用,请更换其它端口。

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

/鼻子 /黑头 /黄瓜 /魔鬼 /雪糕 /鄙视 /送花 /耳光 /神气 /石头 /石化 /睡觉 /爱心 /点赞 /死去 /无语 /捂眼 /拥抱 /打你 /感动 /感冒 /怒火 /微笑 /害羞 /奸笑 /唉呀 /哭泪 /吐血 /吐口水 /吐你 /口水 /勾引 /剪刀手 /出拳 /冰冻 /亲亲 /中指 /不想看 /不开心