33.1 Vue入门-完整版vue和不完整vue的区别 vue完整版有compile, 不完整版没有, 所以不完整版大小

安装, 配置学习型的vue配置:

新建一个vue项目, 手动选择配置:

yarn global add vue
yarn global add @vue/cli
vue create hello-world

手动配置选项:

完整版与不完整版的vue

vue完整版有compile, 不完整版没有, 所以不完整版大小会少40%.
完整版可以通过html, template来写文件, 而不完整版, 只能通过h函数来写.
cdn引入完整版的名字是vue.js, cdn引入不完整版的名字是vue.runtime.js
一般来说, 我们直接在vue文件写template,然后让vue-loader转化成h函数版本

如何写vue单文件组件?

template标签写html, script写数据, style里面写css

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

<script>
export default {
 data(){
   return{
     n:0
   }
 },
  methods:{
   add(){
     this.n += 1
   }
  }
}
</script>

<style lang="scss">
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js的写法:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

seo友好

就是搜索引擎优化: 原理是: 搜索引擎根据curl结果猜测页面内容,

只要把: title、description、keyword、h1、a写好即可 原则上让curl能得到页面的信息，SEO就能正常工作