Vue起手

最新推荐文章于 2024-08-17 12:54:01 发布

新猿人

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量215

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_46383761/article/details/114384299

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue

读作view(/vjuː/)，意为MVC中的V

MVC中的V是Vue的重点，M和C则被简化

–资料来源于饥人谷

作者

尤雨溪尤大，英文名 Evan You。

本科就读于美国科尔盖特大学，艺术与艺术史专业，帕森设计学院艺术硕士，毕业后在Google Creative Lab担任UI相关工作后，后来转为全职JavaScript开发工程师。现为独立开发者，靠每个月十几万以上的捐款生活还有其他赞助。–非科班学前端也能很厉害。

Github主页,个人域名

主要作品

Vue、Vue Router、Vuex、@vue/cli

Vue热度比较

全球范围来看，Vue用户量是React用户量的一半。

问题

用Vue的大部分是中国人?

个人认为:是的。感觉中国人的比例可能超过80%

原因:Vue的中文文档写得真是好

Vue和React学哪个好?

结果:都要学，小孩子才做选择

知识:Vue和 React越来越相似了，尤其是Vue 3

能力:如果你学会了其中一个，不可能不会另一个

顺序:先Vue再React或者先 React再Vue都行

学习途径

Vue：英文文档，中文文档

以后想要更厉害，英语要好。

Vue自学路线图

项目搭建

响应式

目标一:搞出一个使用Vue的项目

安装vue-cli先：

我喜欢命令到达要特定目录下再全局安装

yarn global add @vue/cli
或者
npm install -g @vue/cli

安装完后可以用 vue --version看版本号看安装是否成功

然后就可以使用vue create 目录名创建

具体步骤

一些废话：

方法一:使用@vue/cli

搜索@vue/cli，进入官网

打开文档，打开「创建一个项目」章节，然后 CRM !按着文档走

- 如何系统学习Vue

用CRM把所有文档都过一遍!

使用vue-cli

- 本次vue学习选项

注意：

选错了请Ctrl+C中断然后重来
没有截图的都使用默认选项
这次的选项只适合本次学习，如果是真实项目，请自行斟酌选项

–运行vue create 目录名步骤开始

请选择一个配置，自学的话推荐选默认的，我这里选择手动选择特性。

上下键移动，空格选中CSS预处理，单元测试。完成回车

其他没截图的选择默认。dart-sass，eslint

提交的时候再运行lint，告诉代码错哪了

使用单元测试方案

其他没截图的选择默认。默认文件分开放还是放在package.json。

Save this as a preset for future projects? (y/N)是否把刚才的选项作为未来项目的默认值，选择y意味着不用再改了，但是以后有改的可能不知道在哪改，建议n

这就成功了

命令行start .(mac:open .)打开当前目录，把项目拖进VS

打开终端运行yarn start打开链接运行成功。

方法二：还可以使用codesandbox.io直接在线创建一个vue的项目。

如何使用Vue 实例

vue.js和vue.runtime.js的使用

方法一:从 HTML得到视图

可以从bootCDN通过script引用vue.js或 vue.min.js即可做到

也就是文档里说的完整版Vue。mvc视图没有写在js里面，直接写在了页面里面，引入后会得到一个全局变量。

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

不同版本解释详情看文档这一节

方法二:用JS构建视图

还是看文档链接，使用vue.runtime.js(运行时版)

只要从html变成页面中的东西，完整版就支持，运行时版就不支持

以我这种小白来说肯定是完整版好用，但实际上是运行时版好，更独立

（画图说明)

完整版会占用更多的代码体积，文档上也说了因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。

运行时版没有compiler，所以没有办法把html变成节点，但是可以用webpack进行翻译，使用vue-loader

方法三:使用vue-loader

可以把.vue文件翻译成h(createElement)构建方法，单文件组件

一个单文件组件示例：

写入html，script，css

<template>
  <div class="red">
    {{ n }}
    <button @click="add">+1</button>
  </div>
</template>


<script>
export default {
  //除了视图外其他的选项
  data() {
    //注意：如果用vue-loader写的，data必须是一个函数
    return {
      n: 0,
    };
  },
  methods:{
      add(){
          this.n +=1
      }
  }
};
</script>

//写css
<style scoped>
.red{
    color: red;
}
</style>

再在main.js里引入

import Demo from './Demo.vue'
new Vue({
  el: '#app',
  render(h){
    return h(Demo)
  }
});

但这样做HTML就只有一个div#app，内容空的，最后会被替换成.vue里的内容。SEO 不友好，curl之后是一堆js渲染进去的代码。无法得到主要内容和相关内容，怎么办呢？

SEO友好

SEO，搜索引擎优化

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

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

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

那怎么办？

很简单，给curl 一点内容

把title、description、keyword、h1、a 写好即可，可以看淘宝网页源代码怎么做的。

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

怎么让网页到第一名?浏览的人足够多即可，或者花钱

Google其实能获取JS创建的内容，但不要依赖它。

深入理解两种区别

完整版功能强，体积大。

运行时版功能弱，体积小，但是通过webpack可以让写的时候像是用完整版，但用户下载只下载运行时版。

用一个表再来看看两个版本的具体区别吧

	Vue完整版	Vue运行时版	评价
特点	有compiler	没有compiler	compiler占30%体积
视图	写在HTML里或者写在template选项	写在render函数里,用h来创建标签	h是尤大写好传给render的
cdn引入	vue.js	vue.runtime.js	文件名不同，生成环境后缀都为.min.js
webpack引入	需要配置alias	默认使用此版	尤大配置的
@vue/cli引入	需要额外配置	默认使用此版	尤大和蒋豪群配置的