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
安装Node.JS
可以直接在官方网站中下载安装。
网址:http://nodejs.cn/download/
检测安装的版本,默认情况下自动安装Node和NPM
什么是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]
Vue CLI使用前提 - Webpack
Vue.js官方脚手架工具就使用了webpack模板。对所有的资源会压缩等优化操作,它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
Webpack的全局安装
npm install webpack -g
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选项的详解
目录结构详细
Runtime-Compiler和Runtime-only的区别
简单总结
如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler,如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only。
render和template
Runtime-Compiler 和 Runtime-only的区别
为什么存在这样的差异呢?
我们需要先理解Vue应用程序是如何运行起来的。Vue中的模板如何最终渲染成真实DOM。
我们来看下面的一幅图。
render函数的使用
npm run build
npm run dev
修改配置:webpack.base.conf.js起别名
Vue CLI3
配置去哪里了?
UI方面的配置
启动配置服务器:vue ui
自定义配置:起别名
Vue CLI的详细介绍与讲解相关推荐
- Vue 防抖节流 详细介绍(面试常客、去繁从简、性能优化)
本文主要介绍js中的防抖和节流以及在vue项目中如何使用它们来达到性能优化的目的. 前置知识点:js.闭包.es6.vue等. 使用背景: 很多场景下,页面具有交互性,免不了会触发一些事件以及发送一些 ...
- Vue2.x 核心基础(Vue概述,Vue基本使用,@vue/cli脚手架,Element-UI 的基本使用,Vue模板语法)
1. Vue概述 尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
- PHP模板引擎smarty详细介绍
篇文章主要介绍了PHP模板引擎smarty详细介绍,本文讲解了什么是smarty.smarty优点.不适合使用smarty的地方.smarty目录结构及版本,需要的朋友可以参考下 /* 一.什么是sm ...
- Vue详细介绍及使用
Vue详细介绍及使用 一.Vue定义及简介 1.Vue定义 关于Vue简介,百度百科给出的解释是:Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设 ...
- 【 Vue全家桶 · Vue CLI(四)】Vue项目的详细目录结构解析
文章目录 前言 -- 一级目录解析 一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
- Vue详细介绍及使用(组件)
Vue详细介绍及使用 一.Vue组件概念 1.基本的概念 为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...
- 详细介绍:如何用Vue完成喵喵电影项目?
Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...
- vue项目转apk详细介绍linux虚拟器远程连接逍遥模拟器
vue项目转apk详细介绍 此篇文章为原创,转载请标明出处!!! 1.卸载centOs7自带的jdk,安装1.8版本 上传后解压 tar -zxvf jdk-7u67-linux-x64.tar.gz ...
- 全网详细介绍百度低代码框架amis及实例讲解
文章目录 1. 文章引言 2. amis官网 3. amis介绍 3.1 amis的简述 3.2 amis的初衷 3.3 amis的其他亮点 3.4 amis不适之处 4. amis使用 4.1 am ...
最新文章
- 无线红外探测器04:产品测试及验证
- Unity3D在iOS下为啥不能更新的资料收集
- 全国计算机一级wps网络,全国计算机一级《WPS》考试试题及答案
- HDU 1873 看病要排队(结构体+优先队列)
- php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
- jQuery 缩放 旋转 裁剪图片 Image Cropper
- Flink-org.apache.flink.streaming.api.watermark.Watermark
- Ubuntu搭建Anki服务器
- Linux系统调用接口添加简单示例
- Atitit session机制的实现web目录1. Sessionid的发送 11.1. session大部分情况下基于cookie实现。 11.2. 基于url的session 11.
- ajax一般格式,ajax格式是什么样的?ajax教程
- ISO 27002【实践指南】 -2022新标准
- 徐小明:这次我支持房产新政
- Swing组件与监听器
- anmate.css怎么用,animate.css使用方法是什么
- Autofac 资料整理
- 中华五千年的朝代顺序
- Java操作wkhtmltopdf实现Html转PDF
- 使用KlipC避开平台扫止损,控制止盈和延迟订单成交
- jQuery——立可得项目心得
热门文章
- ajax 服务器压力,web中ajax请求后台的节流方式,减轻服务器压力
- 【网络安全】反序列化漏洞详细解析
- ​1.F : 模拟计算器​
- 有限元仿真的流程:三大步三小步
- Deep Meta Learning for Real-Time Target-Aware Visual Tracking 论文阅读
- 工作中常用的git命令记录
- 「艾尔斯马克绘」数绘的线稿,用马克笔如何上色呢?
- 文件是储存在计算机外,文件夹是指存放在外存储器上的一组相关信息的集合
- 二手车价格预测-模型stacking融合
- Eclipse 运行web项目 HTTP404错误