邂逅Vue3和Vue3开发体验
# Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链 (opens new window)以及各种支持类库 (opens new window)结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
# vue引入方式
# 1、cdn方式
国外cdn: jsdelivr 国内：bootcdn、阿里云等
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.26/vue.global.js"></script>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue页面模板</title>
<!-- 导入 Vue 3 -->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.26/vue.global.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@next"></script>-->
<script src="../js/vue.global.js"></script>
<!-- 导入element-plus样式 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/>
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/big.js/6.1.1/big.min.js"></script>
</head>
<body>
<div id="app"></div>
<template id="app-template">
<h2>{{message}}</h2>
<button @click="init">点击</button>
</template>
<script>
const App = {
template: "#app-template",
data: function () {
return {
message: 'Hello'
}
},
methods:{
init(){
},
},
computed: {},
watch: {},
created() {},
mounted() {
this.init();
},
beforeDestroy() {},
destroyed() {},
};
Vue.createApp(App).mount("#app");
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# 2、下载到本地，js引入
在写代码的时候，会有代码提示
# 3、npm方式，webpack打包
# 4、vue-cli脚手架方式
Vue的脚手架就是Vue CLI：
CLI是Command-Line Interface, 翻译为命令行界面；
我们可以通过CLI选择项目的配置和创建出我们的项目；
Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置
npm install @vue/cli -g
npm update @vue/cli -g
vue create 项目的名称
2
3
4
# 项目结构
# 1、.browserslistrc
设置目标可以兼容的浏览器版本
> 1% 全球超过1%人使用的浏览器 > 5% in US 指定国家使用率覆盖 last 2 versions 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本 Firefox ESR 火狐最新版本 Firefox > 20 指定浏览器的版本范围 not ie <=8 方向排除部分版本 Firefox 12.1 指定浏览器的兼容到指定版本 unreleased versions 所有浏览器的beta测试版本 unreleased Chrome versions 指定浏览器的测试版本 since 2013 2013年之后发布的所有版本
# 2、vue-cli-service命令源码
当执行vue-cli-service serve时，可以运行项目，具体代码在@vue/cli-service目录下，bin/vue-cli-service.js
- 核心的类
Service.js， 自定义配置vue.config.js和vue.config.cjs - 入口文件
./src/main.js - 别名
vue$代表vue/dist/vue.esm.js,更多webpack的配置，请看config/base.jsconfig/app.js - 当import模块文件时，扩展了这些后缀文件，不用写后缀，
'.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'
# vue编程思想
# 声明式和命令式编程范式
vue、react、angular为声明式编程，为主流
# mvvm模型
『View』：视图层（UI 用户界面）『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）『Model』：数据层（存储数据及对数据的处理如增删改查）
# vue常用属性
# template
写法一： 直接在template里面写html， 缺点是没有代码提示，不方便阅读
写法二： script引入方式，没有代码提示
<script type="x-template" id="aa"> ... </script>
- 写法三： template标签方式，会有代码提示
HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化
# data属性
- 传入的是一个函数
- data中返回的对象会被Vue的响应式系统劫持，之后该对象的修改或访问都会在劫持中被处理
# methods属性
- 可以用this来直接访问data中的对象，this指向的是Vue的Proxy代理对象？
- 不应该使用箭头函数来定义method函数，因为箭头函数绑定了父级作用域的上下文，this将不会按照期望指向组件实例，而是window
# vue源码
vuejs/vue-next: 🖖 vue3 git下载. (github.com) (opens new window) 下载后导入ide当中，需要安装node和pnpm工具，3.0之前的用yarn安装
git clone https://github.com.cnpmjs.org/vuejs/vue-next.git
git checkout v3.2.9 切换到相对应的版本
npm i -g pnpm
pnpm install
// 修改package.json中的scripts下dev的配置，后边加上--sourcemap
"dev": "node scripts/dev.js --sourcemap"
2
3
4
5
6
7
8
生成后的目录：vue-next\packages\vue\dist
<script src="../../dist/vue.global.js"></script>
<script type="text/javascript">
debugger;
Vue.createApp({
template : `<h2>aa</h2>`
}).mount("#app");
</script>
2
3
4
5
6
7
8
9
参考文章:
vue3初体验，调试Vue的源码 - 冲啊！ - 博客园 (cnblogs.com) (opens new window)
Vue3+TS系统学习一 - 邂逅Vue3和TypeScript (qq.com) (opens new window)