您的位置:首页 > 产品设计 > UI/UE

Vue-cli脚手架安装

2017-08-03 19:19 561 查看

Vue-cli脚手架安装

随着Vue.js认知度和使用率的提高,Vue-cli逐渐成为构建一个网站所使用的方便、快捷的工具,Vue-cli是什么呢?Vue-cli的作用有哪些?Vue-cli怎样安装?在下面的文字中给予一一介绍。

Vue.js是一套构建用户界面的渐进式框架(官方介绍);Vue-cli是一套快速构建这个网页应用的插件,它也是构建项目的一套脚手架工具,主要作用包括:目录结构,本地调试,代码部署,热加载,单元测试。

Vue-cli安装:

在本地电脑上安装好node,并搭建好git,能够方便安装脚手架,安装node、搭建git方法在网上很多,这里不多介绍。

在电脑上创建一个文件夹,名称自拟,我的叫project,打开此文件夹,鼠标单击右键,点击Git Base Here选项,弹出窗口。



全局安装vue-cli:在弹出的git窗口中输入:npm install -g vue-cli即可全局安装vue-cli;

这里先说明一下:在窗口中输入的所有命令都要在$符号后面输入,输入后按Enter(回车键)才能生效。



安装后输入:vue -V检测安装是否成功,此处V大写;



显示2.8.2是版本号,此时为安装成功;在一台电脑上全局安装一次即可,无需重复安装。

创建项目:输入vue init webpack-simple vue-project其中vue-project为项目名,webpack-simple为脚手架项目简约版,普通项目使用webpack-simple已经够了。



此命令输入后,如果对名称等条件没有改动,按Enter键到最后,完成后会在指定文件夹内出现与输入的项目名相同的文件夹,如图中‘名称’下显示的my-project文件夹。

这样,Vue-cli脚手架安装完成,并创建了一个项目指定文件夹。

我们安装了webpack-simple简约版以后,文件内包含的插件是有限的,如果我们的项目需要其他插件,要根据项目下载所需的其他插件,当然,我们也可以安装完整版的webpack插件,步骤是相同的,只需要将第4步创建项目中webpack-simple改为webpack即可。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  框架 应用 插件