什么是Vue CLI？聊聊vue cli的配置和使用
什么是Vue CLI？下面本篇文章给大家深入介绍一下vue cli，聊聊vue cli的配置和使用，希望对大家有所帮助！
一、Vue CLI
1.1.什么是Vue CLI
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。（学习视频分享：vuejs视频教程）
如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是什么意思?
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
Vue CLI是一个官方发布 vue.js 项目脚手架
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.
脚手架长什么样子
1.2.Vue CLI使用前提 - Node
安装NodeJS
可以直接在官方网站中下载安装.
网址: http://nodejs.cn/download/
检测安装的版本
默认情况下自动安装Node和NPM
Node环境要求8.9以上或者更高版本
什么是NPM呢?
NPM的全称是Node Package Manager
是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
后续我们会经常使用NPM来安装一些开发过程中依赖包.
cnpm安装 由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用 cnpm 命令来安装模块了： cnpm install [name]
1.3.Vue CLI使用前提 - Webpack
Vue.js官方脚手架工具就使用了webpack模板
对所有的资源会压缩等优化操作
它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。
Webpack的全局安装
npm install webpack -g
1.4.Vue CLI的使用
安装Vue脚手架
npm install -g @vue/cli
注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。
Vue CLI2初始化项目
vue init webpack my-project
Vue CLI3初始化项目
vue create my-project
二、Vue CLI2
2.1.Vue CLI2详解
2.2.目录结构详解
2.3.Runtime-Compiler和Runtime-only的区别
简单总结
1.如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
2.如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only
2.4.render和template
Runtime-Compiler 和 Runtime-only
为什么存在这样的差异呢？
我们需要先理解Vue应用程序是如何运行起来的。
Vue中的模板如何最终渲染成真实DOM。
我们来看下面的一幅图
2.5.Vue程序运行过程
2.6.render函数的使用
2.7.npm run build
2.8.npm run dev
2.9.修改配置：webpack.base.conf.js起别名
三、Vue CLI3
3.1.认识Vue CLI3
vue-cli 3 与 2 版本有很大区别
1.vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
2.vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
3.vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
4.移除了static文件夹，新增了public文件夹，并且index.html移动到public中
3.2.目录结构详解
3.3.配置去哪里了？
UI方面的配置
启动配置服务器：vue ui
3.4.自定义配置：起别名
【相关视频教程推荐：web前端】
以上是什么是Vue CLI？聊聊vue cli的配置和使用的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
vue.js vs.反应：特定于项目的考虑因素
Apr 09, 2025 am 12:01 AM
Vue.js适合中小型项目和快速迭代，React适用于大型复杂应用。1)Vue.js易于上手，适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富，适合有高性能需求和复杂功能需求的项目。
vue怎么给按钮添加函数
Apr 08, 2025 am 08:51 AM
可以通过以下步骤为 Vue 按钮添加函数：将 HTML 模板中的按钮绑定到一个方法。在 Vue 实例中定义该方法并编写函数逻辑。
vue中怎么用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。
vue.js怎么引用js文件
Apr 07, 2025 pm 11:27 PM
在 Vue.js 中引用 JS 文件的方法有三种：直接使用 <script> 标签指定路径；利用 mounted() 生命周期钩子动态导入；通过 Vuex 状态管理库进行导入。
vue中的watch怎么用
Apr 07, 2025 pm 11:36 PM
Vue.js 中的 watch 选项允许开发者监听特定数据的变化。当数据发生变化时，watch 会触发一个回调函数，用于执行更新视图或其他任务。其配置选项包括 immediate，用于指定是否立即执行回调，以及 deep，用于指定是否递归监听对象或数组的更改。
vue返回上一页的方法
Apr 07, 2025 pm 11:30 PM
Vue.js 返回上一页有四种方法：$router.go(-1)$router.back()使用 <router-link to="/"> 组件window.history.back()，方法选择取决于场景。
vue多页面开发是啥意思
Apr 07, 2025 pm 11:57 PM
Vue 多页面开发是一种使用 Vue.js 框架构建应用程序的方法，其中应用程序被划分为独立的页面：代码维护性：将应用程序拆分为多个页面可以使代码更易于管理和维护。模块化：每个页面都可以作为独立的模块，便于重用和替换。路由简单：页面之间的导航可以通过简单的路由配置来管理。SEO 优化：每个页面都有自己的 URL，这有助于搜索引擎优化。
vue的div怎么跳转
Apr 08, 2025 am 09:18 AM
Vue 中 div 元素跳转的方法有两种：使用 Vue Router，添加 router-link 组件。添加 @click 事件监听器，调用 this.$router.push() 方法跳转。
