vue 配置

2021-02-25  本文已影响0人  卢卢2020

vue cli 安装链接

安装简单 直接看上面官网链接

这里记录一下在安装vue时遇到的问题(纠结了一个小时)

①运行yarn global add @vue/cli  成功  

②查看版本号 vue --version   显示2.9.6 版本  (可能是以前看别的学习资料时装的低版本)

    遇到这个问题查资料,后面发现官网有讲解(反省自己 以后找资料一定优先在官方文档查看)

    最后以及升级   

            01————yarn global upgrade --latest @vue/cli   命令运行  

             02———— yarn global add @vue/cli  

             03———— vue --version(还是报错 说不存在)最后解决办法重启vscode        

使用 @vue/cli搭建项目

① 根据vue-cli官方文档快速创建——点击链接

② 线上创建修改 下载  链接地址https://codesandbox.io/s/vue

简单搭建一个项目示例

附下面两个图 图一为代码示例 图二为浏览器效果示例

以上代码用到的知识下面详解


①vue实例

方法1:从html得到视图 (体积大 功能强)

    也就是从文档里说的 `完整版Vue`[引入时后缀为vue.js]  === 它的优点是可以在html中得到视图

    从CND引用vue.js或vue.min.js即可做到

    也可以通过import引用vue.js或者vue.min.js

    详情看官方文档这一节,把alias去掉即可

方法2:用JS构建视图 (体积小 功能弱)==>>但是高级方法用 

    还是看上面的文档链接,使用vue.runtime.js【引入时后缀为vue.runtime.js】===它不能在html中得到视图,但是它更加独立

    这种方法很不方便,但实际上是对的

方法3:使用vue-loader () ==>>为上面方法的升级 安装vue-loader 程序员时候用方法1 给用户看的时候用方法二 实现了体积小 功能强

    可以把.vue营业日翻译成h构建方法

    但这样做HTML就只有一个div#app,SEO不友好

方法1图解

方法1 方法1

方法2图解

方法二图1 方法2 图二

方法3图解

也叫vue 单文件组件

什么是SEO

搜索引擎优化

你可以认为搜索引擎就是不停地curl

搜索引擎根据curl结果猜测页面内容,

如果你的页面都是用JS创建div的,那么curl就很瞎

解决方法

给curl一点内容

把title、description、keyword、h1、a写好即可

原则:让curl能得到页面的信息,SEO就能正常工作

图解:

内容根据需要定

以上内容总结图展示

上一篇 下一篇

猜你喜欢

热点阅读