从jQuery到Vue3的快捷通道

　　当初使用jQuery做了几个简单的项目，算是有一点点了解，现在学习Vue3，发现了一个可以快速转换思维的通道使用CDN的方式模拟Vite建立的项目！CDN方式
　　jQuery的使用非常方便，用script引入js文件即可，然后找到DOM即可开始操作。
　　而Vue3也支持直接用script引入的方式，然后使用插值的方式绑定数据，我们来看一下使用方法：引入vue。jsheadmetacharsetUTF8！加载vue3！加载elementpluslinkhrefhttps：unpkg。comelementplus2。1。9distindex。cssrelstylesheettitleVue3CDN的简单演示titlehead
　　这样我们就可以在网页里面使用Vue了，另外我们引入了一个UI库elementplus。绑定数据和事件
　　然后我们写一个helloword：bodybuttonclickcount自增button
　　elbuttonclickcount自增elbutton
　　｛｛count｝｝body插值
　　在模板里面使用双大括号即可实现数据绑定。事件
　　可以使用原生button，也可以使用UI库提供的button，用von（简写：）添加事件。定义数据
　　这里采用compositionAPI的方式，使用ref，实现简单的计数功能。挂载
　　使用createApp创建一个App，然后挂载插件、UI库、路由、状态等。
　　本篇只做简单介绍，详细介绍请移步官网：https：stagingcn。vuejs。org组件化
　　一个项目有很多功能，显然不能把所有代码都放在一起，那么如何管理代码呢？Vue提供了组件化的方式，便于组织代码。
　　我们可以建立一个count。js文件（单文件组件），实现上面那个简单的计数功能：count。jsconst｛ref｝Vueexportdefault｛name：count，template：buttonclickcount自增button
　　elbuttonclickcount自增elbutton
　　｛｛count｝｝setup（）｛constcountref（0）return｛count｝｝｝
　　这样就可以建立一个单独的Vue组件，相关的代码都可以放在这里，管理起来就更容易了。工程化项目
　　一般我们可以用Vite建立一个项目，然后安装需要的各种插件，但是这需要我们先了解node、npm、yarn、vite等，还要先配置好环境，这些对于新手来说容易懵。
　　那么能不能暂时跳过这些，直接建立一个工程化的项目呢？当然是可以的！
　　我们可以模仿Vite建立的项目的文件结构，用CDN的方式实现一个项目。
　　为啥要用CDN的方式模拟一下呢？因为这样可以先不用了解node等前置知识点，可以比较清晰地看到Vue的运作方式，快速理解Vue的特点，可以作为一种过渡方式。目录结构
　　可以发现和Vite建立的项目的结构是基本一样的，只是把。vue后缀变成了。js后缀。加载各种插件headmetacharsetUTF8linkreliconhref。。nfwt。ico！加载axios！加载vue3！加载vuerouter！加载pinia！加载elementpluslinkhrefhttps：unpkg。comelementplus2。1。9distindex。cssrelstylesheetheadpinia状态管理
　　pinia需要加载两个文件，一个是pinia。js，另一个是其依赖项vuedemi，实现兼容vue2的功能。加载main。js
　　main。js是入口文件，需要在index。html使用typemodule的方式引入，这样main里面才可以使用import。body这里是CDN仿工程化开发的演示。。。body设置main。js
　　然后在main里面加载根节点、路由设置、状态设置、UI库等操作。constverwindow。ver？v0constpiniaPinia。createPinia（）Promise。all（〔import（。app。jsver），import（。routerindex。jsver），〕）。then（（res）｛Vue。createApp（res〔0〕。default）。use（res〔1〕。default）挂载路由。use（ElementPlus）加载ElementPlus。use（pinia）状态管理。mount（app）对应p｝）
　　可以直接使用importAppfrom。app。js的方式加载，但是不好管理缓存。
　　所以采用了这种增加版本号的方式，以确保可以加载最新文件。App。js
　　可以在app。js做页面布局，当然也可以实现其他功能。const｛ref，defineAsyncComponent｝Vue加载菜单组件constmyMenudefineAsyncComponent（（）import（。viewsmenu。jswindow。ver））exportdefault｛name：app，components：｛myMenu｝，template：elcontainerelheaderCND的方式模仿工程化项目elheaderelcontainerelasidewidth200px！菜单mymenuelasideelcontainerelmain！路由容器routerviewrouterviewelmainelfooterCND的简单演示。byVue3、elementplus、Pinia、vueRouterelfooterelcontainerelcontainerelcontainer，setup（）｛return｛｝｝｝
　　这里采用异步组件的方式加载子组件，方便设置版本号，确保可以加载最新文件。设置路由
　　为了更方便的加载组件，我们可以使用vuerouter设置路由。定义路由constroutes〔｛path：，name：Home，component：（）myImport（viewshome）｝，｛path：pinia，name：pinia，component：（）myImport（viewsstatepinia）｝，｛path：，name：ui，component：（）myImport（viewsuiuielp）｝，｛path：h，name：htest，component：（）myImport（viewshh）｝，｛path：jsx，name：jsxtest，component：（）myImport（viewshjsx）｝〕constbasecdn3constrouterVueRouter。createRouter（｛history：VueRouter。createWebHistory（base），routes｝）exportdefaultrouter
　　如果组件只有js文件，那么可以直接使用import来加载，如果组件由jshtml组成，需要使用myImport来加载，myImport是我自己封装的函数，在最后介绍。设置菜单
　　我们先做一个简单的菜单：menu。jsexportdefault｛name：menu，template：routerlink：to｛name：Home｝首页routerlink
　　routerlink：to｛name：pinia｝piniarouterlink
　　routerlink：to｛name：htest｝h的演示routerlink
　　routerlink：to｛name：jsxtest｝jsx的演示routerlink
　　，setup（）｛return｛｝｝｝
　　这里先使用routerlink做个简单的连接，也可以使用elmenu做菜单。状态管理
　　这里采用最新的pinia进行状态管理，因为Vuex有点臃肿。
　　首先需要在main。js里面挂载pinia，见main的部分。
　　然后我们建立一个js文件，定义一个状态，再建立一个js文件作为组件。count。jsconst｛defineStore｝PiniaconsttestPromie（）｛returnnewPromise（（resolve）｛setTimeout（（）｛resolve（100）｝，500）｝）｝exportconstuseCounterStoredefineStore（counter，｛state：（）｛return｛count：0，name：｝｝，actions：｛increment（）｛this。count｝，asyncloadData（val，state）｛constfooawaittestPromie（）this。countfoothis。nameasync赋值：newDate（）。valueOf（）｝，loadData2（val，state）｛testPromie（）。then（（val）｛this。countvalthis。name异步赋值：newDate（）。valueOf（）｝）｝｝｝）pinia。js
　　然后在组件里面引入：状态import｛useCounterStore｝from。count。jsexportdefault｛name：piniatest，setup（）｛consttestuseCounterStore（）return｛count｝｝｝pinia。html
　　我们可以把template部分拿出去，做成html文件：测试pinia的状态
　　｛｛test｝｝
　　elbuttontypeclicktest。increment（）修改elbutton
　　这样一个简单的项目结构就搭建起来了。小结
　　本篇仅为过渡，并不是说正式项目要用这种方式开发，因为缺点也是很明显的。
　　当然也是有一些优点：可以更充分的利用CDN，缓存vue。js这类的变化频率低的js文件，只需要更新业务相关的代码即可。如果CDN不卡的话，加载速度可以更快。可以利用CDN的资源，缓解自己服务器的压力。项目可以分模块开发，稳定且基础的模块可以打包、发布到CDN里面使用。源码和演示源码：https：gitee。comnaturefwprojectvue3cnd演示：https：naturefwproject。gitee。iovue3cnd补充
　　template部分，如果用字符串的方式写，那么比较麻烦，所以可以分为html文件的方式来写，这样可以使用提示、补全和验证等功能。
　　然后做一个加载的函数myImport：window。myImport（url）｛returnnewPromise（（resolve，reject）｛constverwindow。verconstbaseUrlwindow。basrUrlsrc先加载jsimport（baseUrlurl。jsver）。then（（resjs）｛constjsresjs。defaultif（！js。template）｛如果模板是空的，表示需要加载html作为模板axios。get（baseUrlurl。htmlver）。then（（resHTML）｛js。templateresHTML。dataresolve（js）｝）｝else｛否则直接使用js注册组件resolve（js）｝｝）｝）｝