Get Started

1. 使用@vue/cli搭建项目
2. vue.js 与 vue.runtime.js
3. SEO(搜索引擎优化)

1. 使用@vue/cli搭建项目

命令行工具@vue/cli 是 Vue 提供了一个官方的 CLI，为单页面应用 快速搭建繁杂的脚手架。
按照官网给出的方法，先下载@vue/cli。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

然后选择创建项目的路径，使用vue create 项目名称，勾选所需特性，@vue/cli就会自己创建好这个项目文件。
使用vue --version检查其版本是否正确。
运行yarn serve开启webpack-dev-server。

2. vue.js 与 vue.runtime.js

vue.js 与 vue.runtime.js 是Vue的两个不同的版本。

2.1 vue.js

vue.js 是vue完整版，是同时包含编译器和运行时的版本。
运行时：用来创建Vue实例、渲染并处理虚拟DOM等的代码。基本上就是除去编译器的其它一切。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

• 在页面上从 CDN 包 引入vue.js或vue.min.js。
• 也可以通过import引用vue.js或者vue.min.js。
• 引入后生成一个全局变量Vue救可以使用Vue实例了

完整版可以直接从html文件中获取html元素，例如将html中的{{n}}变成1可以这么写。也可以使用template，将html变成字符串写入。

<!-- index.html -->
<div id="app">   
    {{n}}
</div>

/* main.js */
new Vue({
  el:'#app',
  data: {
    n:0
  }
})

或者

new Vue({
  data() {
    return {
      n: 0,
    }
  },
  template: `
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>
  `,
  methods: {
    add() {
      this.n += 1
    },
  },
}).$mount("#akane")

2.1 vue.runtime.js

vue.runtime.js 是运行时版本，没有编译器，使体积比完整版小大约30%。使用vue-cli创建的目录默认会使用这个vue.runtime.js。
这种方式不能直接从HTML页面里面获取数据，需要使用 render 函数。但是当页面变复杂的时候，就会很麻烦，因此，webpack 提供了 vue-loader ，将*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

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

<script>
export default {
  data(){  // 若使用vue-loader这里只支持函数
    return {
      n:0
    }
  },
  methods:{
    add(){
      this.n++
    }
  }
}
</script>

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

vue-loader 会把这个demo.vue文件变成一个对象，使用render函数渲染这个对象即可。这种形式也叫vue单文件组件。

new Vue({ 
  el:'#app',
  render(h) {     
    return  h(demo)
  },
})

image.png

但是这种方式是js渲染的页面，所以会引起SEO不友好的问题。

3.SEO(搜索引擎优化)

SEO（Search Engine Optimization）：搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
本质是搜索引擎不停的 curl 一个页面，然后根据 curl 的内容去分析页面内容。（标题、描述、关键字之类的）
优化的方式：

• 把title、description、keyword、h1、a 写好即可
• 原则:让curl能得到页面的信息，SEO就能正常工作
• 怎么让网页到第一名?浏览的人足够多即可

4.使用 codesandbox.io

这是一个可以在线创建前端项目的网站
https://codesandbox.io/
进入官网点击相应的框架图标即可创建项目，无需登录，可重复创建项目，也可以下载到本地。