Shinkai005
2022/04/28阅读:42主题:红绯
从零一起看vue文档第一天
代办
-
[ ] 用Xmind理一下文档结构 -
[ ] vue介绍的视频 精听 -
[ ] vue和其他框架的比较 -
[ ] vue cli
从零一起看vue文档第一天
vuejs介绍
什么是vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
这句话有两个点
-
用户界面 -
渐进式框架
用户界面: 简单来说就是告诉浏览器数据如何呈现.
渐进式: 就是可以拆卸装备的框架. 不需要一次引入所有内容.只需要引入所需的.随着时间增长业务加重,再继续引入即可.
vue特点
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
vue比较轻便,还是需要与各种其他的类库,工具链来使用的.
但是! 因为尤大的推荐, 使用过程中会发现大家用的都是那些常见的.(特殊需求会用一些不常见的...常见的够用了).
下面介绍一下2022年的一些工具链,类库
「编译器」、「打包器」、「包管理器」、「第三方库开发」、「Web 应用开发」
编译器
编译器负责将输入的代码,转换为某种目标的输出格式。
本文只关注 JS 和 TS 的编译器,它可以将现代的 JS 和 TS 转换成特定版本的 ECMAscript,并兼容浏览器和最新版本的 Node.js。
打包器
打包器负责将所有的源文件打包到一起,通常用于打包第三方库和 web 应用。
包管理
Web 应用开发
这些高级工具和框架会帮助开发者屏蔽掉所有细节,来更好地构建现代 web 应用。
“这里有一个视频,我明天会把这个视频精听了~ 把英文字幕写出来~
”
对比其他框架留坑
起步
“开始创建vue项目.开始之前小tip了一下不建议直接以vue框架入门前端
”
需要有一些基础知识,最起码有如下:js基础知识
-
es6语法规范 -
es6模块化 -
包管理 -
原型链,原型 -
数组常用方法 -
axios -
promise -
...
安装(可以跳过不看,偏向于工程化)
兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
如下图片红色是完全不支持,浅绿色是部分支持,绿色是完全支持.
语义化版本控制
Vue 在其所有项目中公布的功能和行为都遵循语义化版本控制。对于未公布的或内部暴露的行为,其变更会描述在发布说明中。
什么是语义化?简单的了解下 看下图
“其实都是这么说的......
”
Vue Devtools
在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
vue引入方式
vue分成了两种版本: 开发版本(完整的警告和调试),生产版本(删除了警告,仅有33.46KB)
cdn引入
npm下载.// 适合大项目文件,更好的配合webpack等打包器使用(说简单点因为有包可以用)
命令行工具CLI
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。
后面会补坑,我都记着呢
运行时 + 编译器 vs. 只包含运行时
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。
因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。如果你仍然希望使用完整版,则需要在打包工具里配置一个别名:
webpack
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}
“这块解释很清楚了~ 能学到 两个版本的差别.
”
开发环境 vs. 生产环境模式
对于 UMD 版本来说,开发环境/生产环境模式是硬编码好的:开发环境下用未压缩的代码,生产环境下使用压缩后的代码。
CommonJS 和 ES Module 版本是用于打包工具的,因此我们不提供压缩后的版本。你需要自行将最终的包进行压缩。
CommonJS 和 ES Module 版本同时保留原始的 process.env.NODE_ENV
检测,以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换这些环境变量以便控制 Vue 所运行的模式。把 process.env.NODE_ENV
替换为字符串字面量同时可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境的代码块,以减少最终的文件尺寸。
//webpack
//在 webpack 4+ 中,你可以使用 mode 选项:
module.exports = {
mode: 'production'
}
“这块不好理解.见我文章 commonjs 和 esmodule
”
回到vuejs介绍
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
操作dom的命令式渲染如下:
第一个vue应用
我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。
学术名词
-
CLi命令行工具
-
UMD:UMD 版本可以通过
作者介绍
Shinkai005
公众号:深海笔记Shinkai