初识Vue
1.项目搭建，使用vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 创建目录: vue create路径
- 选择使用哪些配置
- 进入目录，运行yarn serve开启webpack-dev-server
2.Vue的两个不同的版本 vue.js 与 vue.runtime.js
-
vue.js 完整版
这是一个同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
- 从 CDN引用vue.js或vue.min.js即可做到
- 也可以通过import引用vue.js或者vue.min.js
- 引入之后便暴露一个全局变量 Vue 就可以使用Vue实例了
这种方式可以直接从HTML文件里面进行数据的插值
<!-- index.html -->
<div id="app">
{{n}}
</div>
/* main.js */
new Vue({
el:'#app',
data: {
n:0
}
})
2. vue.runtime.js 运行时版本
使用vue-cli创建的目录默认会使用这个vue.runtime.js
用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
这种方式不能直接从HTML页面里面获取数据，需要使用 render 函数
new Vue({
el:'#app',
render(h) { // vue 会给 render 传一个参数这个参数是一个可以创建html的函数
return h('div',this.n)
},
data: {
n:0
}
})
这种方式更加的灵活独立，因为运行时版本相比完整版体积要小大约 30%，这样用户在使用产品时就会效果更好更好，所以应该尽可能使用这个版本。
但是这种使用 render 函数的方式显得很麻烦,因此 webpack 提供了 vue-loader
当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。
vue-loader 可以把 html模板编译成 render函数的js代码，这样在我们最后build的时候就会产生一个运行时的版本，从而使体积最小
只需要写成.vue文件
// demo.vue
<template>
<div class="red">
{{ n }}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){
return {
n:0
}
},
methods:{
add(){
this.n++
}
}
}
</script>
<style scoped>
.red{
color: red;
}
</style>
vue-loader 会把这个demo.vue文件变成一个对象 使用render函数渲染这个对象即可
new Vue({
el:'#app',
render(h) {
return h(demo)
},
})
这种形式也叫vue单文件组件
因为这种方式是js动态创建的dom，所以这种方式会引起SEO不友好的问题
3.SEO(搜索引擎优化)
所谓的搜索引擎优化就是搜索引擎不停的 curl 一个页面，搜索引擎根据 curl 的内容去分析猜测页面内容，
优化的方式
- 把title、description、keyword、h1、a 写好即可
- 原则:让curl能得到页面的信息，SEO就能正常工作
- 怎么让网页到第一名?浏览的人足够多即可
4.使用 codesandbox.io
这是一个可以在线创建前端项目的网站
进入官网点击相应的框架图标即可创建项目
无需登录，可重复创建项目，也可以下载到本地
