Get Started
- 使用@vue/cli搭建项目
- vue.js 与 vue.runtime.js
- 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)
},
})
但是这种方式是js渲染的页面，所以会引起SEO不友好的问题。
3.SEO(搜索引擎优化)
SEO（Search Engine Optimization）：搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
本质是搜索引擎不停的 curl 一个页面，然后根据 curl 的内容去分析页面内容。（标题、描述、关键字之类的）
优化的方式：
- 把title、description、keyword、h1、a 写好即可
- 原则:让curl能得到页面的信息，SEO就能正常工作
- 怎么让网页到第一名?浏览的人足够多即可
4.使用 codesandbox.io
这是一个可以在线创建前端项目的网站
https://codesandbox.io/
进入官网点击相应的框架图标即可创建项目，无需登录，可重复创建项目，也可以下载到本地。
