Vue CLI 讲解（Vue脚手架）

Vue CLI 讲解

什么是 Vue CLI

• 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.

• 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI

  • 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
  • 如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

• CLI是什么意思?

  • CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
  • Vue CLI是一个官方发布vue.js项目脚手架
  • 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI 使用前提 - Node

• 安装 NodeJS

  • 可以直接在官方网站中下载安装.
  • 网址: http://nodejs.cn/download/

• 检测安装的版本

  • 默认情况下自动安装Node和NPM
  • Node环境要求8.9以上或者更高版本

• 什么是NPM呢?

  • NPM的全称是Node Package Manager
  • 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
  • 后续我们会经常使用NPM来安装一些开发过程中依赖包.

注意事项：

• node npm

• node:js运行时的环境,可以使js运行在服务器之上

• npm: 依赖包管理工具，安装、卸载、打包…等操作

• npm cnpm yarn….

  • cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm
  • npm install -g yarn
  • npm仍然提供了一个非常有用的解决方案，支持大量的测试用例。大多数开发人员使用原始npm客户端仍然可以做得很好
  • yarn的确定性安装，可以避免很多潜在的问题，相对安全
  • pnpm可能是一些测试用例的更好的选择。例如，它可以在运行大量集成测试并希望尽可能快地安装依赖关系的中小型团队中发挥作用

• 版本

  • Vue:2.6.x(正在使用)

  • Vue:3.x(最新版)

  • Vue-cli:4.5.11

    

Vue CLI的使用

• 安装Vue脚手架

  • npm install –g @vue/cli（后面不跟版本，下载的是3.0以上的最新版本）

    

• 卸载vue-cli 3.0及以上版本

  

• 注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的

• Vue CLI2初始化项目

  • vue init webpack my-project

• Vue CLI3初始化项目

  • vue create my-project（这里我创建的是learn-vuecli）

    

  • 选择手动配置

    

  • 根据自己的需求选择对象的选项

    

  • 选择版本（我选择2.x）

    

  • 选择插件的配置是否单独放在一个文件中

    

  • 是否保存你选择的配置方便下一次直接使用。y是，n否。

    

  • 等待项目搭建完成

    

  • 进入项目启动服务

    

    • 浏览器访问（http://localhost:8080）在cmd里面键盘按住Ctrl然后点击网址进入

      

  • 项目文件含义：