六. Vue CLI详解
1. Vue CLI理解
1.1 什么是Vue CLI
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI
,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI
。
使用Vue.js开发大型应用时我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是什么意思?Command-Line Interface
,翻译为命令行界面,但是俗称脚手架。Vue CLI
是一个官方发布 Vue.js 项目脚手架,使用它可以快速搭建Vue开发环境以及对应的webpack配置。
1.2 Vue CLI使用前提 - Node & Webpack
安装Node.js
可以直接在官方网站中下载安装
Node环境要求8.9以上或者更高版本
NPM
NPM的全称是Node Package Manager
,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。后续我们会经常使用NPM来安装一些开发过程中依赖包。
CNPM安装
由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install cnpm -g --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了
cnpm install [name]
Webpack
Vue.js官方脚手架工具就使用了webpack模板。webpack对所有的资源会压缩等优化操作,它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
Webpack的全局安装
npm install webpack -g
1.3 安装Vue脚手架
//Vue CLI2
npm install -g vue-cli
//Vue ClI3
npm install -g @vue/cli
1.4 初始化项目
//Vue CLI2
vue init webpack my-project
//Vue CLI3
vue create my-project
注:当我们安装了
Vue CLI3
的版本,如果需要想按照Vue CLI2
的方式初始化项目时不可以的。可以使用如下方式在安装Vue CLI3
的基础上拉取2.x的模板。
2. Vue CLI2详解
2.1 初始化设置
2.2 Runtime-Compiler和Runtime-only的区别
简单总结
如果在之后的开发中你依然使用template,就需要选择Runtime-Compiler
。如果你之后的开发中使用的是.vue文件夹开发,那么可以选择Runtime-only
render和template
使用Runtime-Compiler
模式时
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
使用Runtime-only
模式时
new Vue({
el: '#app',
render: h => h(App)
})
为什么会出现这样的差异呢?我们需要先理解Vue应用程序是如何运行起来的,Vue中的模板如何最终渲染成真实DOM。我们来看下面的一幅图。
render函数的使用
//组件对象
const cpn = {
template: '<div>{{message}},我是cpn组件</div>',
data() {
return {
message:'hello'
}
}
}
//这里传来的实参名字叫createElement,而模板生成使用形参h去接收,为什么要取名h?
new Vue({
el: '#app',
render: (createElement) => {
//1.使用方式一:我们这里创建出来的element就会替换#app元素
// return createElement('标签','相关数据对象(可以不传),即标签的属性',['内容数组']);
//1.1 render函数基本使用
// return createElement('div',{class: 'box'},['polaris']);
//1.2 嵌套render函数
// return createElement('div',{class: 'box'},[
// 'polaris',createElement('h2',['我是标题啊'])
// ]);
//1.3 传入一个组件对象,注意这里的cpn组件需要template编译器
return createElement(cpn);
}
})
注意:
vue-template-compiler
会把.vue文件中的template转化成render函数,不需要使用template编译器了。(vue-template-compiler
是什么请回看 Webpack详解)
2.3 目录结构
2.4 npm run build流程
2.5 npm run dev流程
2.6 修改配置:webpack.base.conf.js起别名
resolve: {
extensions: ['.js','.vue','.json'],
alias: {
'@': resolve('src'),
'pages': resolve('src/pages'),
'common': resolve('src/common'),
'components': resolve('src/components'),
'network': resolve('src/network'),
}
}
3. Vue CLI3详解
vue-cli 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-cli 3的配置文件放哪里去了?
注:在vue-cli3如果我们要修改配置,有三种方式
① 启动配置服务器: vue ui命令
② 在项目根目录下创建一个
vue.config.js
文件,写的配置会和默认配置合并作为webpack配置。③ 隐藏起来的配置:
node_nodules/@vue/cli-service/lib/webpack.config.js
main.js理解
import Vue from 'vue'
import App from './App.vue'
//生产阶段打印的一些提示信息,在开发阶段一般不需要即设为false
Vue.config.productionTip = false
//两种不同的写法异同 ↓
new Vue({
//el与下面的.$mount('#app')没有区别
//vue底层只是多了一行代码,即如果配置了el则获取el的值去执行.$mount('得到的值')
//即不管有没有el,最终都会执行.$mount('xx')
el: '#app'
render: function(h) {
return h(App)
}
})
new Vue({
render: h => h(App),
}).$mount('#app')
六. Vue CLI详解的更多相关文章
- HTTP协议 (六) 状态码详解
HTTP协议 (六) 状态码详解 HTTP状态码,我都是现查现用. 我以前记得几个常用的状态码,比如200,302,304,404, 503. 一般来说我也只需要了解这些常用的状态码就可以了. 如果 ...
- C++11 并发指南六(atomic 类型详解四 C 风格原子操作介绍)
前面三篇文章<C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)>.<C++11 并发指南六( <atomic> 类型详解二 std::at ...
- C++11 并发指南六(atomic 类型详解三 std::atomic (续))
C++11 并发指南六( <atomic> 类型详解二 std::atomic ) 介绍了基本的原子类型 std::atomic 的用法,本节我会给大家介绍C++11 标准库中的 std: ...
- C++11 并发指南六( <atomic> 类型详解二 std::atomic )
C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍) 一文介绍了 C++11 中最简单的原子类型 std::atomic_flag,但是 std::atomic_flag ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- Vue.prototype详解
参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...
- 小白进阶之Scrapy第六篇Scrapy-Redis详解(转)
Scrapy-Redis 详解 通常我们在一个站站点进行采集的时候,如果是小站的话 我们使用scrapy本身就可以满足. 但是如果在面对一些比较大型的站点的时候,单个scrapy就显得力不从心了. 要 ...
- vue指令详解
一.vue简绍 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...
随机推荐
- 用微信小程序做一个小电商 sku
效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...
- php 之 excel导出导入合并
<?php class Excel extends Controller { //直属高校 public function __construct() { parent::Controller( ...
- 家庭版window10找不到文件'gpedit.msc'。请确定文件名是否正确后 ,再试一次
今天遇到电脑找不到gpedit.msc文件,所以记录一下这个问题的解决方法 1. 首先建立一个空白文档 代码如下: @echo off pushd "%~dp0" dir /b ...
- 日志切分神器--logrotate
Blog:博客园 个人 概述 还在自己写定时切分日志的脚本?试试系统自带的logrotate工具吧! logrotate是一个日志文件管理工具.用于分割日志文件,删除旧的日志文件,并创建新的日志文件, ...
- fashion数据集训练
下载数据集 fashion数据集总共有7万张28*28像素点的灰度图片和标签,涵盖十个分类:T恤.裤子.套头衫.连衣裙.外套.凉鞋.衬衫.运动鞋.包.靴子. 其中6万张用于训练,1万张用于测试. im ...
- CSS3之径向渐变
设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...
- 七:Redis的持久化
1.RDB(Redis DataBase) 1.1 定义:在指定的时间间隔内将内存中的数据集快照写入磁盘,也就是行话讲的snapshot快照,他恢复时是将快照文件直接读到内存里 是什么:Redis会单 ...
- MiniCat:手写Http服务器
minicat 项目介绍 已实现http基础协议.参数接受.servlet.filter.cookie.多文件上传等.支持NIO. 一款轻量化Http服务器.支持bio.nio两种模式.归属Coody ...
- Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...
- php 把一个数随机分成n份
$money_total=100; $personal_num=10; $min_money=0.01; $money_right=$money_total; $randMoney=[]; for($ ...