当初使用 jQuery 做了几个简单的项目,算是有一点点了解,现在学习Vue3,发现了一个可以快速转换思维的通道 —— 使用CDN的方式模拟 Vite 建立的项目!

CDN方式

jQuery的使用非常方便,用 script 引入 js文件即可,然后找到DOM即可开始操作。

而 Vue3 也支持直接用 script 引入的方式,然后使用插值的方式绑定数据,我们来看一下使用方法:

  • 引入 vue.js
  1. <head>
  2. <meta charset="UTF-8" />
  3. <!--加载 vue3 -->
  4. <script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script>
  5. <!--加载 element-plus -->
  6. <script src="https://unpkg.com/element-plus@2.1.9/dist/index.full.js"></script>
  7. <link href="https://unpkg.com/element-plus@2.1.9/dist/index.css" rel="stylesheet"/>
  8. <title>Vue3 CDN的简单演示</title>
  9. </head>

这样我们就可以在网页里面使用 Vue 了,另外我们引入了一个UI库——element-plus。

  • 绑定数据和事件

然后我们写一个 hello word:

  1. <body>
  2. <div id="app">
  3. <button @click="count++">自增</button> <br>
  4. <el-button @click="count++" >自增</el-button> <br>
  5. {{ count }}
  6. </div>
  7. <script>
  8. const { ref, createApp } = Vue
  9. const app = {
  10. setup() {
  11. const count = ref(0)
  12. return {
  13. count
  14. }
  15. }
  16. }
  17. createApp(app)
  18. .use(ElementPlus)
  19. .mount('#app')
  20. </script>
  21. </body>
  • 插值

    在模板里面使用双大括号即可实现数据绑定。

  • 事件

    可以使用原生button,也可以使用UI库提供的button,用v-on(简写:@)添加事件。

  • 定义数据

    这里采用 composition API 的方式,使用 ref,实现简单的计数功能。

  • 挂载

    使用 createApp 创建一个App,然后挂载插件、UI库、路由、状态等。

本篇只做简单介绍,详细介绍请移步官网:https://staging-cn.vuejs.org/

组件化

一个项目有很多功能,显然不能把所有代码都放在一起,那么如何管理代码呢?Vue提供了组件化的方式,便于组织代码。

我们可以建立一个 count.js 文件(单文件组件),实现上面那个简单的计数功能:

  • count.js
  1. const { ref } = Vue
  2. export default {
  3. name: 'count',
  4. template: `
  5. <button @click="count++">自增</button> <br>
  6. <el-button @click="count++" >自增</el-button> <br>
  7. {{ count }}
  8. `
  9. setup() {
  10. const count = ref(0)
  11. return {
  12. count
  13. }
  14. }
  15. }

这样就可以建立一个单独的Vue组件,相关的代码都可以放在这里,管理起来就更容易了。

工程化项目

一般我们可以用 Vite 建立一个项目,然后安装需要的各种插件,但是这需要我们先了解 node、npm、yarn、vite等,还要先配置好环境,这些对于新手来说容易懵。

那么能不能暂时跳过这些,直接建立一个工程化的项目呢?当然是可以的!

我们可以模仿 Vite 建立的项目的文件结构,用CDN的方式实现一个项目。

为啥要用CDN的方式模拟一下呢?因为这样可以先不用了解node等前置知识点,可以比较清晰的看到 Vue 的运作方式,快速理解Vue的特点,可以作为一种过渡方式。

目录结构

可以发现和 Vite 建立的项目的结构是基本一样的,只是把.vue后缀变成了.js后缀。

加载各种插件

  1. <head>
  2. <meta charset="UTF-8" />
  3. <link rel="icon" href="../nfwt.ico" />
  4. <script src="src/script/appImport.js?v=1"></script>
  5. <!--加载 axios -->
  6. <script src="https://unpkg.com/axios@0.26.1/dist/axios.min.js"></script>
  7. <!--加载 vue3 -->
  8. <script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script>
  9. <!--加载 vue-router -->
  10. <script src="https://unpkg.com/vue-router@4.0.14/dist/vue-router.global.js"></script>
  11. <!--加载 pinia -->
  12. <script src="https://unpkg.com/vue-demi@0.12.5/lib/index.iife.js"></script>
  13. <script src="https://unpkg.com/pinia@2.0.13/dist/pinia.iife.js"></script>
  14. <!--加载 element-plus -->
  15. <script src="https://unpkg.com/element-plus@2.1.9/dist/index.full.js"></script>
  16. <link href="https://unpkg.com/element-plus@2.1.9/dist/index.css" rel="stylesheet"/>
  17. </head>
  • pinia 状态管理

    pinia 需要加载两个文件,一个是pinia.js,另一个是其依赖项 vue-demi,实现兼容vue2的功能。

加载 main.js

main.js 是入口文件,需要在 index.html 使用 type="module" 的方式引入,这样main里面才可以使用“import”。

  1. <body>
  2. <div id="app">
  3. 这里是CDN仿工程化开发的演示...
  4. </div>
  5. <script type="module" src="src/main.js"></script>
  6. </body>

设置 main.js

然后在main里面加载根节点、路由设置、状态设置、UI库等操作。

  1. const ver = window.__ver || '?v=0'
  2. const pinia = Pinia.createPinia()
  3. Promise.all([
  4. import('./app.js' + ver),
  5. import('./router/index.js' + ver),
  6. ]).then((res) => {
  7. Vue.createApp(res[0].default)
  8. .use(res[1].default) // 挂载路由
  9. .use(ElementPlus) // 加载ElementPlus
  10. .use(pinia) // 状态管理
  11. .mount('#app') // 对应div
  12. })

可以直接使用 import App from './app.js' 的方式加载,但是不好管理缓存。

所以采用了这种增加版本号的方式,以确保可以加载最新文件。

App.js

可以在 app.js 做页面布局,当然也可以实现其他功能。

  1. const { ref, defineAsyncComponent } = Vue
  2. // 加载菜单组件
  3. const myMenu = defineAsyncComponent(() => import('./views/menu.js' + window.__ver))
  4. export default {
  5. name: 'app',
  6. components: {
  7. myMenu
  8. },
  9. template: `
  10. <el-container>
  11. <el-header>
  12. CND的方式 模仿工程化项目
  13. </el-header>
  14. <el-container>
  15. <el-aside width="200px">
  16. <!--菜单-->
  17. <my-menu/>
  18. </el-aside>
  19. <el-container>
  20. <el-main>
  21. <!--路由容器 -->
  22. <router-view></router-view>
  23. </el-main>
  24. <el-footer>
  25. CND的简单演示。by Vue3、element-plus、Pinia、vue-Router
  26. </el-footer>
  27. </el-container>
  28. </el-container>
  29. </el-container>
  30. `,
  31. setup() {
  32. return {
  33. }
  34. }
  35. }

这里采用异步组件的方式加载子组件,方便设置版本号,确保可以加载最新文件。

设置路由

为了更方便的加载组件,我们可以使用 vue-router 设置路由。


  1. // 定义路由
  2. const routes = [
  3. {
  4. path: '/',
  5. name: 'Home',
  6. component: () => myImport('views/home')
  7. },
  8. {
  9. path: '/pinia',
  10. name: 'pinia',
  11. component: () => myImport('views/state/pinia')
  12. },
  13. {
  14. path: '/',
  15. name: 'ui',
  16. component: () => myImport('views/ui/ui-elp')
  17. },
  18. {
  19. path: '/h',
  20. name: 'h-test',
  21. component: () => myImport('views/h/h')
  22. },
  23. {
  24. path: '/jsx',
  25. name: 'jsx-test',
  26. component: () => myImport('views/h/jsx')
  27. }
  28. ]
  29. const base = '/cdn3/'
  30. const router = VueRouter.createRouter({
  31. history: VueRouter.createWebHistory(base),
  32. routes
  33. })
  34. export default router

如果组件只有js文件,那么可以直接使用 import 来加载,如果组件由js+html组成,需要使用 myImport 来加载,myImport 是我自己封装的函数,在最后介绍。

设置菜单

我们先做一个简单的菜单:

  • menu.js
  1. export default {
  2. name: 'menu',
  3. template: `
  4. <router-link :to="{name:'Home'}">首页</router-link><br><br>
  5. <router-link :to="{name:'pinia'}">pinia</router-link><br><br>
  6. <router-link :to="{name:'h-test'}">h的演示</router-link><br><br>
  7. <router-link :to="{name:'jsx-test'}">jsx的演示</router-link><br><br>
  8. `,
  9. setup() {
  10. return {
  11. }
  12. }
  13. }

这里先使用 router-link 做个简单的连接,也可以使用 el-menu 做菜单。

状态管理

这里采用最新的 pinia 进行状态管理,因为 Vuex 有点臃肿。

首先需要在 main.js 里面挂载pinia,见 main 的部分。

然后我们建立一个js文件,定义一个状态,再建立一个js文件作为组件。

  • count.js
  1. const { defineStore } = Pinia
  2. const testPromie = () => {
  3. return new Promise((resolve) => {
  4. setTimeout(() => {
  5. resolve(100)
  6. }, 500)
  7. })
  8. }
  9. export const useCounterStore = defineStore('counter', {
  10. state: () => {
  11. return { count: 0, name: '' }
  12. },
  13. actions: {
  14. increment() {
  15. this.count ++
  16. },
  17. async loadData(val, state) {
  18. const foo = await testPromie()
  19. this.count += foo
  20. this.name = 'async 赋值:' + new Date().valueOf()
  21. },
  22. loadData2(val, state) {
  23. testPromie().then((val) => {
  24. this.count += val
  25. this.name = '异步赋值:' + new Date().valueOf()
  26. })
  27. }
  28. }
  29. })
  • pinia.js

然后在组件里面引入:

  1. // 状态
  2. import { useCounterStore } from './count.js'
  3. export default {
  4. name: 'pinia-test',
  5. setup() {
  6. const test = useCounterStore()
  7. return { count }
  8. }
  9. }
  • pinia.html

我们可以把 template 部分拿出去,做成 html 文件:

  1. <div>
  2. 测试pinia的状态<br>
  3. {{ test }}<br>
  4. <el-button type="" @click="test.increment()">修改</el-button>
  5. </div>

这样一个简单的项目结构就搭建起来了。

小结

本篇仅为过渡,并不是说正式项目要用这种方式开发,因为缺点也是很明显的。

当然也是有一些优点:

  • 可以更充分的利用CDN,缓存vue.js这类的变化频率低的 js 文件,只需要更新业务相关的代码即可。
  • 如果CDN不卡的话,加载速度可以更快。
  • 可以利用CDN的资源,缓解自己服务器的压力。
  • 项目可以分模块开发,稳定且基础的模块可以打包、发布到CDN里面使用。

源码和演示

补充

template 部分,如果用字符串的方式写,那么比较麻烦,所以可以分为 html 文件的方式来写,这样可以使用提示、补全和验证等功能。

然后做一个加载的函数 myImport :

  1. window.myImport = (url) => {
  2. return new Promise((resolve, reject) => {
  3. const ver = window.__ver || ''
  4. const baseUrl = window.__basrUrl || '/src/'
  5. // 先加载 js
  6. import(baseUrl + url + '.js' + ver).then((resjs) => {
  7. const js = resjs.default
  8. if (!js.template) {
  9. // 如果模板是空的,表示需要加载 html作为模板
  10. axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
  11. js.template = resHTML.data
  12. resolve(js)
  13. })
  14. } else {
  15. // 否则直接使用 js 注册组件
  16. resolve(js)
  17. }
  18. })
  19. })
  20. }

从 jQuery 到 Vue3 的快捷通道的更多相关文章

  1. Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]

    快捷API <1>$.get(url, [data], [callback], [type]) <2>$.post(url, [data], [callback], [type ...

  2. windows 右健添加cmd快捷通道

    windows 右健添加cmd快捷 - Windows - geektown极客堂 - Powered by Discuz!. 把横线下面的文本copy保存到一个注册表文件中,比如cmd.reg,然后 ...

  3. 网页插件学javascript还是jquery好啊?

    文章的起因,也是在群内交流是回答一个小伙的问题,一扯就停不下来,但由于个人知识面覆盖有限,自身基础又不够扎实,仅供参考: 问这个问题之前,我个人建议先搞清什么是jquery,什么是js?     jq ...

  4. jQuery 2.0.3 源码分析 钩子机制 - 属性操作

    jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的. 根据API这章主要是分解5个方法 .attr()   获取匹配的元素集合中的第一个元素的属性的值  或 设置 ...

  5. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  6. jQuery学习小结1-CSS操作+事件

    一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...

  7. jQuery库(noConflict)冲突解决机制

    很多JSFramework库选择使用$符号作为一个函数或变量名,而在实际的项目开发,模板语言,则有可能"$"符号是模板语言keyword.例如Veclocity模板语言,$它是ke ...

  8. jQuery 最外面的那层皮

    这次学习 jQuery 源码,基于当前最新的版本,3.2.1. IIFE (function() { 'use strict'; // })(); 定义一个匿名函数并立即执行,得益于 javascri ...

  9. 美团Java团队分享:如何实践支付通道自动化管理

    随着支付业务量激增,支付团队不断壮大.为了满足日益增长的业务需求,大量的支付通道逐渐接入,但由于对接的各银行和第三方系统的稳定性参差不齐,支付通道故障时有发生,作为承接上下游的核心系统,要在一系列不稳 ...

随机推荐

  1. Java 中你怎样唤醒一个阻塞的线程?

    在 Java 发展史上曾经使用 suspend().resume()方法对于线程进行阻塞唤醒,但 随之出现很多问题,比较典型的还是死锁问题. 解决方案可以使用以对象为目标的阻塞,即利用 Object ...

  2. 什么是redis的缓存雪崩与缓存穿透?如何解决?

    一.缓存雪崩 1.1 什么是缓存雪崩? 首先我们先来回答一下我们为什么要用缓存(Redis): 1.提高性能能:缓存查询是纯内存访问,而硬盘是磁盘访问,因此缓存查询速度比数据库查询速度快 2.提高并发 ...

  3. linux文本编辑器vim详解

    vim 1.打开文件 vim [option] - file... 打开文件 +# 打开文件后,让光标处于第#行的行首 +/字符串 打开文件后,光标处于第一个被匹配到字符串的行首 -b file 二进 ...

  4. 数据库SQL之学习SUM总和套用条件CASE WHEN语句

    1.SQL之学习SUM总和套用条件CASE WHEN语句 2.条件语句CASE WHEN 格式已经在图中写的很明白了 -- 查询t_wzw库中所有数据 总和(条件为t_wzw.birthday > ...

  5. python中一切皆对象的理解

    一切皆对象? 学过Java都知道,Java中有8个基本类型,其余的都是继承自Object类的引用类型.方法内的基本类型变量会在栈上分配,而引用类型会通过逃逸分析来决定在栈上分配或堆上分配.Java中关 ...

  6. html 常用标签及基本用法

    一个网页基本是由 结构(html) + 样式(css) + 脚本(js) 组成.学习的话 应该从最基本的标签开始, 结构清晰了, 再用css美化, 最后可以用脚本加上特效 块级 和 行类标签 特点: ...

  7. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  8. 微信小程序开发快速入手

    1.在page中的修改数据的setData函数,需要传递的是一个对象. that.setData({ src: res.tempFilePath }) 2.在 onload 事件中,可以获取wx.na ...

  9. PAT B1013 数素数

    输入样例: 5 27   输出样例: 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97 101 103 解题思路: 从2开始 ...

  10. 类其中的变量为final时的用法

    类其中的变量为final时的用法:   类当中final变量没有初始缺省值,必须在构造函数中赋值或直接当时赋值.否则报错. public class Test {     final int i;   ...