Vue 初识一、搭建项目（1）方法一：使用@vue/cli1. 全局安装2.创建项目hello-world是项目名，可根

一、搭建项目

（1）方法一：使用@vue/cli

官网cli.vuejs.org/zh/guide/in…

1. 全局安装

2.创建项目

hello-world是项目名，可根据实际情况更改

3.选择配置

根据实际开发情况选择

提交时运行linter

使用什么单元测试

配置文件存放在哪

进入文件，运行

（2）方法二：使用webpack

(二）vue版本

官方文档cn.vuejs.org/v2/guide/in…

1.使用CDN安装

①完整版 vue.min.js

从html中拿到视图，

www.bootcdn.cn/vue/

在index.html添加链接

在main.js上控制

或者直接添加template

②非完整版

用js构建视图，vue.runtime.js

在main.js上控制

添加按钮事件

使用vue-loader

Vue单文件组件

1.新建demo.vue

// 在template中写视图
<template>
    <div>
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>


// 在script中写逻辑关系,data写数据，methods写方法等
<script>
export default {
   data() {
      return {
          n:0
      }
   },
   methods:{
       add(){
           return this.n+=1
       }
   }
}
</script>

//在style中写样式
 <style scoped>
 </style>

2.在main.js中引入

import Vue from 'vue'
import demo from './demo.vue'

new Vue({
    el: '#app',     //表示内容渲染到该页面
    render(h) {
        return h(demo)
    }
})

使用loader对SEO不友好

SEO基本原理

简单说就是搜索引擎优化，curl就是网页不断得到页面的主要内容，搜索引擎通过curl猜到页面内容。解决方法就是在页面中将title,description,keyword,h1,a等主要内容写好

非完整版和完整版的区别

html{{n}} ==> html 0
this.n+=1 ==> html1

完整版体积大，功能强，是用compiler编译器将含有v-if,v-for的变量转换成真实的DOM节点，当第二次使用n时（this.n+=1），DOM节点直接更改n的值不完整版没有compiler，体积小，会把html认为是字符串，需要借助外部工具，如webpack

Vue 初识