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即可。