Vue_cli2和Vue_cli3

简介: Vue_cli2和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

image.png


如果在之后的开发中,你依然使用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

66.png

目录结构详解:

67.png


目录
相关文章
|
2月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
98 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
19天前
|
资源调度 JavaScript 前端开发
一文带你了解和使用vue-cli(2024年11月)
欢迎来到我的博客!我是一名热爱前端技术的大一学生,自学JavaScript与Vue已两年半,目前正向全栈工程师迈进。如果你从我的博客中有所收获,欢迎关注我,我会持续更新更多优质内容,一起成长!🎉🎉🎉
22 0
一文带你了解和使用vue-cli(2024年11月)
|
7月前
vue-cli 3.0 配置
vue-cli 3.0 配置
57 0
|
JavaScript 前端开发 编译器
Vue安装脚手架 vue-cli
Vue安装脚手架 vue-cli
183 0
|
JavaScript 前端开发 Java
Vue CLI 脚手架
🍅程序员小王的博客:程序员小王的博客 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 如有编辑错误联系作者,如果有比较好的文章欢迎分享给我,我会取其精华去其糟粕 🍅java自学的学习路线:java自学的学习路线
229 0
Vue CLI 脚手架
|
缓存 JavaScript 前端开发
【vue2】Vue Cli脚手架与VueTools的安装详解
Vue Cli脚手架与VueTools的安装详解
【vue2】Vue Cli脚手架与VueTools的安装详解
|
JavaScript 前端开发 编译器
Vue学习笔记(九) Vue CLI
Vue学习笔记(九) Vue CLI
206 0
|
JavaScript
vue-cli学习笔记 01、vue-cli脚手架
vue-cli学习笔记 01、vue-cli脚手架
vue-cli学习笔记 01、vue-cli脚手架