看完之后有手就行的安装Vue脚手架教程.

126 阅读2分钟

vue-cli 脚手架介绍.

目标.

了解什么是vue -cli 脚手架.
vuecli是什么.
vue-cli 是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。

  • 基于webpack
  • 开箱即用,零配置 注释:脚手架是为了保证各个施工过程顺利进行而搭设的平台.

好处和能力

  • 统一的项目结构(文件名+文件+配置代码)全球人民只要用vuecli项目结构都一样.
  • 开发过程中的webpack各系列支持.
    • babel支持
    • eslint约束语法风格(代码风格)
    • 样式预处理器less
    • vue 单文件支持
  • 提供一个开发时的服务器,预览代码.(预览项目)
    • 自动刷新,方便预览
    • 热更新(只刷新修改的部分)
  • 基于nodejs的命令工具.

安装vue - cli

要求

把@vue/cli模块全局安装.(@vue/cli就是一个npm第三方的包.全局安装即可.)

步骤.

设置淘宝镜像.
1.先电脑任意位置创建一个文件夹.
2.在文件夹中打开cmd窗口.
3.输入一下两行命令

npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
npm config get registry  #查看镜像地址

image.png

注释:为什么要修改定向地址.因为原地址,是国外的地址下载速度较慢.修改之后,下载地址是国内的,速度比较快.当然你也可以不用修改一样可以下载.

全局安装命令
npm i -g @vue/cli
注意:如果下载失败或者任务条没有变化(95%都是网络问题),可以ctrl+c停止安装,换一个网络环境来继续重新安装.
检查是否安装成功.

在小黑窗输入 vue -V注意:这里的V是大写的.

image.png

这里我们可以看到版本号就说明,我们安装已经成功了.
总结
vuecli是什么. 它是一个官方提供的全局模块包(通过命令工具行来使用),用来快速创建一个脚手架项目.