不用npm,教你直接从CDN使用Vue,速度加倍,代码减半

c#小王子 c#小王子 2021-01-12 873 直接从CDN使用Vue

一直以来都是按照教程规规矩矩的npm安装,然后vue create创建,然后npm run dev或者npm run serve。


随着使用,功能确实好用的不得了,缺功能就装插件,缺美工就找模板。仿站是分分钟的事,功能也能分分钟搞定。但是,到真正项目部署时候,才发现前端框架是爱之越深,恨之越切。SPA的模式大大影响限制了Vue的用途,虽然也有Quasar、nuxt作为顶层框架解决SSR(服务端渲染)的问题,但是仍然有诸多兼容类、输入法、性能等方面的小问题。


Vue SAP前端三大缺点:

  • 速度慢:直接npm run dev的话,文件大概在7M以上,部署到服务器,每次重载浏览器不等个20秒,首屏页面根本加载不完,卡到爆。
  • 无缘SEO:用SPA意味者,你的网站基本与搜索引擎无缘了,这种用法,除了公司级产品自用以外,拿来建对外浏览的网站简直就是灾难;
  • 难兼容后端:除了js的后端,vue本身没有配套的后端,一些规模较小的项目,仍然需要分别去开发前后端,而且还跨域,这无疑会大大影响小规模开发者的效率,每一次调试,都想抓狂。


于是乎,搞完了Vue,就得面对Nuxt,面对完Nuxt,还得搞一大堆插件兼容的问题。难道就没有很直接,有很爽快的解决方案吗?

笔者也是带着无比的蛋疼,和对技术的执着,仔细研究了如果使用传统的MVC+外挂Vue来实现:


  • 既快速的首屏;
  • 又良好的界面交互;
  • 功能一样完整;


的外挂式Vue另类用法。


好了,话不多说。直接按照思路撸代码。


适用传统MVC架构(技术栈:php、aspmvc、js)均可。我这里以aspmvc为示例。


首先,页面直接由控制器MVC里面的渲染。

<div>
  <p>
    @Html.DisplayFor(model => model.username)
  </p>
</div>


上面是一个很普通的aspmvc界面,变量什么的我们不用去研究,就是一个div包裹一个段落标签。


外挂Vue,直接从CDN引用。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>


然后效果如下:


<body>
//其他内容

<div>
  <p>
    @Html.DisplayNameFor(model => model.title)
  </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>


//其他内容
</body>


这种暂时还不能使用,我们要指定操作哪一块DOM。这个时候要指定id和id值(以“App”为例),并新建一个script片段,创建Vue实例,指定实例要操作的el为App。整个代码如下:


<body>
  //其他内容
  <div id="App">


    <p>{{message}}</p>
    <p>{{num}}</p>



    <p>@Html.DisplayNameFor(model => model.title)</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>

    var app = new Vue({
      el: "#app",


      data() {
        return {
          message: "hello",
          num:0          
        };
      },


      methods: {
          //和常规用法一样
        plus() {
          this.num++;
        },
      },

      mounted() {
       //和npm+webpack开发时一样可以用
      },


    });
  </script>
  //其他内容
</body>


启动项目,你就会发现网页可以像正常Vue项目一样运行了。甚至直接保存到html文件,直接用浏览器就可以打开使用。


可以看到,这个混入了常规MVC架构的语言,在项目应用上更加灵活,而且CDN加载的Vue,体积更为小巧,不占用任何服务器资源。

如果和一些UI框架搭配使用会更加的如虎添翼。


后续我们再讲解如何在常规MVC渲染的基础上,利用前端vue+axios进行数据交互。敬请期待.....



文章热度: 166291
文章数量: 333
推荐阅读

FlashFXP绿色版网盘下载,附激活教程 548

FlashFxp百度网盘下载链接:https://pan.baidu.com/s/1MBQ5gkZY1TCFY8A7fnZCfQ。FlashFxp是功能强大的FTP工具

Adobe Fireworks CS6 Ansifa绿色精简版网盘下载 398

firework可以制作精美或是可以闪瞎眼的gif,这在广告领域是需要常用的,还有firework制作下logo,一些原创的图片还是很便捷的,而且fireworks用法简单,配合dw在做网站这一块往往会发挥出很强大的效果。百度网盘下载链接:https://pan.baidu.com/s/1fzIZszfy8VX6VzQBM_bdZQ

navicat for mysql中文绿色版网盘下载 373

Navicat for Mysql是用于Mysql数据库管理的一款图形化管理软件,非常的便捷和好用,可以方便的增删改查数据库、数据表、字段、支持mysql命令,视图等等。百度网盘下载链接:https://pan.baidu.com/s/1T_tlgxzdQLtDr9TzptoWQw 提取码:y2yq

火车头采集器(旗舰版)绿色版网盘下载 469

火车头采集器是站长常用的工具,相比于八爪鱼,简洁好用,易于配置。火车头能够轻松的抓取网页内容,并通过自带的工具对内容进行处理。站长圈想要做网站,火车头采集器是必不可少的。百度网盘链接:https://pan.baidu.com/s/1u8wUqS901HgOmucMBBOvEA

Photoshop(CS-2015-2023)绿色中文版软件下载 974

安装文件清单(共46G)包含Window和Mac OS各个版本的安装包,从cs到cc,从绿色版到破解版,从安装文件激活工具,应有尽有,一次性打包。 Photoshop CC绿色精简版 Photoshop CS6 Mac版 Photoshop CC 2015 32位 Photoshop CC 2015 64位 Photoshop CC 2015 MAC版 Photoshop CC 2017 64位 Adobe Photoshop CC 2018 Adobe_Photoshop_CC_2018 Photoshop CC 2018 Win32 Photoshop CC 2018 Win64

知之

知之平台是全球领先的知识付费平台。提供各个领域的项目实战经验分享,提供优质的行业解决方案信息,来帮助您的工作和学习

使用指南 建议意见 用户协议 友情链接 隐私政策 Powered by NOOU ©2020 知之