Vue_cli2和Vue_cli3

文章目录

• 1.什么是Vue cli
• 2.使用前提
• 3.Vue CLI2详解
• 4.Vue CLI3详解

1.什么是Vue cli

• 当开发大型程序的时候，推荐使用Vue Cli
• CLI == Command-Line Interface 脚手架
• 使用其可以快速的搭建Vue开发环境以及对应的webpack配置

2.使用前提

• node.js的安装 http://nodejs.cn/download/
• 检测安装成功 node -v 、npm -v
• 其中npm是自动安装的，为包管理工具
• webpack的全局安装 npm install webpack -g
• Vue Cli3的安装 npm install -g @vue/cli@3.2.1
• Vue Cli2的安装npm install -g @vue/cli-init，这样就可以既使用2、也可以使用3

3.Vue CLI2详解

• 初始化项目：vue init webpack my-project
  
  注：图片来自视频课程：https://www.bilibili.com/video/BV15741177Eh?p=92

• 目录结构详解
  
  注：图片来自视频课程：https://www.bilibili.com/video/BV15741177Eh?p=93

• Runtime-Compiler和Runtime-only的区别？
  

• 左边是Runtime-Compile，右边是Runtime-only

• 主要是Runtime-only少了编译过程，所以是轻量级的，
  

• 总结

  • 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
  • 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only
  • 如果想更细致的了解内部原理：https://www.bilibili.com/video/BV15741177Eh?p=96

4.Vue CLI3详解

• 3和2的区别？

  • vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
  • vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
  • vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
  • 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

• 初始化项目：vue create my-project
  

• 目录结构详解：
  
  注：图片来自视频课程：https://www.bilibili.com/video/BV15741177Eh?p=97

• 配置变成ui了,使用命令 npx vue ui查看