创建项目：
使用@vue/cli
1、安装：yarn global add @vue/cli
2、创建项目：vue create vue-demo-1（目录名） 、vue create .（在当前目录创建）
需要设置选项（一般默认即可）
- default（默认）
- Manually select features(手动选择特性)
出现
cd vue-demo-1
yarn serve
运行一下，即成功。
使用codesandbox创建项目。
vue 实例
我们看到jQuery的实例
const $div = new jQuery('#xxx')
const $div = $('#xxx')
返回一个封装对象$div
封装了对xxx的所有操作
vue-main.js中
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false//用来取消一些提示的
const vm = new Vue({
render: h => h(App),
}).$mount('#app')
那这个vm干了什么？同样
封装了实例对内容的所有操作，如事件绑定、数据、更新等
vue的两个版本
完整版
从HTML得到视图
从CDN引用vue.js或vue.min.js即可做到
也可通过import引用vue.js或vue.min.js
完整版支持写在template中，和index.html中
index.html 在index.html中引入完整版的vue CDSN
<div id="app">{{n}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.13/vue.min.js"></script>
main.js中只有这个了
new Vue({
el:'#app',
data:{
n:1
}
})
也支持
new Vue({
el:'#app',
data:{
n:1
},
template:`
<div>{{n}}</div>
`
})
如果此时我们引用的CDN是runtime版本的vue
会报错You are using the runtime-only build of Vue vue不支持这样写
运行时版
不支持从HTML得到视图
用JS构建视图
从CDN引用vue.runtime.js
运行版必须这样写：实现点击按钮+1
el:'#app',
data:{
n:1
},
render(createElement){
const h = createElement
return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
}
methods:{
add(){
this.n+=1
}
}
})
写一个render接收一个createElement（vue传的），用这个参数即可创建。
采用此版本你必须要用createElement方式去吧所有元素构造出来。
两者区别
完整版的思路：
- 你有一段html+{{n}}等等，vue需要把这个东西变成html 和 0
- 怎么变呢？直接替换不行，因为以后会更加复杂@click v-if v-for 等，直接正则替换是做不到的。
- 于是vue需要写一个编译器叫compiler,可以把含有占位符，或条件语句的东西变成真实的dom节点。
- 下次写this.n+=1的时候他就知道你要改的是n，直接改dom节点，而不是再编译一遍
- 编译器占用代码体积，runtime版本小百分之三十
runtime版的思路：
- runtime版本没有编译器 所以没有办法把html变成节点
- 那我可以写 <div>{{n}}</div>
- 用到了webpack 通过webpack 的 vue loader
- 转化成 h('div',this.n)
- 所以我们还可以写html，用户下载的是h，中间通过webpack vue loader 翻译过来
- 用户对vue的依赖就可以使用少百分之三十的runtime版
我们写完代码 <div>{{n}}</div>
通过yarn build ，把编译器放到build里，这个build vue loader 会调用 compiler
得到用户用的 h('div',this.n)+ runtime版
单文件组件
那我们要怎么写runtime版的文件呢？
- 新建vue的文件
在src中新建一个demo.vue
叫做vue单文件组件
<template>视图
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script lang="ts">除了视图之外其他的选项注意 如果你用vue loader，写的文件 data必须是一个函数
export default {
name: 'Demo'，
data(){
return {
n:0
}
},
methods:{
add(){
this.n+=1
}
}
};
</script>
<style lang="scss" scoped> 样式
</style>
之后vue loader 就把这些东西变成一个对象 然后就可以使用它了
怎么使用呢？
main.js
import Demo from './Demo.vue'
console.log(Demo)我们可以看看vue loader 把他变成什么了
new Vue({
el:'#app',//放到哪？会把它里面东西替换掉
render(h){
return h(Demo)
}
})
就可以把demo展示到页面上了
seo友好
通过单文件组件index.HTML中就只有一个叫app的div且里面的东西会被vue替换掉（vue会替换之前的节点） 导致seo不友好。
SEO 搜索引擎优化
你可以认为搜索引擎就是不听的crul
搜索引擎根据curl的结果猜测页面内容
如果你的页面都是用JS创建div的
导致用curl命令无法得到主要内容
如何解决？
你可以给curl加点内容
把title h1 a description keyword写好即可 让curl得到页面关键信息 SEO就正常工作
<meta name = 'keyword' content = 'xxx'> <meta name = 'description' content = 'xxx'>
<a href = "xxx">详情</a>
会告诉他这个网页是详情 会继续curl后面的网页
你去搜索的时候他就根据这些关键信息来提供给用户
你看到的一个网页是JS渲染的
通过右键 查看源代码 可以查看网站写给curl的结果
Google可以获取JS创建的内容 但是没用
