Vue安装及两个版本区别

1.Vue的安装

@vue/cli用法

• Vue本质上是一个JS库，通常都是直接使用VUE脚手架Vue-cli来直接安装Vue
• 全局安装：在WebStorm或VSCode打开终端输入命令 yarn global add @vue/cli
• 创建目录：vue create 路径
• 使用默认配置或自定义配置
• 运行yarn serve 开启预览

直接用script标签引入

• 网址：www.bootcdn.cn/vue/
• 完整版：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.min.js"></script>

• 非完整版(runtime运行时版)

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.runtime.global.js"></script>

2.Vue两个版本的区别

区别	Vue完整版	Vue非完整版(runtime版)	备注
特点	有compiler（编译器）	没有compiler	compiler占40%体积
视图	写在HTML里或写在template选项	写在render函数里用h来创建标签	h是开发者写好传给render，是createElement方法，可以换成任何名字
cdn引入	vue.js	vue.runtime.js	文件名不同，生成环境后缀为.min.js（压缩过的精简版本）
webpack引入	需要配置alias	默认使用此版	开发者配置的
@vue/cli引入	需要额外配置	默认使用此版	开发者配置的

• 最佳实践：总是使用非完整版，然后配合webpack的vue-loader和vue文件
• 思路：
• (1)保证用户体验，使用只支持h函数的非完整版，用户下载的js文件体积更小；
• (2)保证开发体验，开发者可直接在vue文件里写更直观更语义化的HTML标签和template而不写h函数；
• (3)编译h函数的活让loader做，vue-loader把vue文件里的HTML转为h函数。
• 启发：工程师要做的就是封装
• 额外问题：关于SEO优化。如果页面都是JS创建而非HTML，搜索引擎进行curl就会很困难。
• 解决：把title、description、keyword、h1、a标签写好即可让curl得到页面信息

3.template 和 render 的用法

• 两种写法

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

• template标签和JS里的template选项

//vue文件中的template标签
  <template>
      <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
     </div> 
  </template>

//js中的template
    template : `
        <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
        </div> 
    `

• render函数

//不完整版在js中构建视图
  render(h){ 
       return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])
   }

//不完整版使用vue-loader

//先创建一个demo.vue文件，在里面构建视图
    import demo from "./demo.vue"
     new Vue({
       el: "#app",
       render(h) {
         return h(demo)
       }
     })

4.介绍一个在线使用Vue无需安装的网站

• 使用codesandbox里在线写Vue的代码，不用任何本地的安装依赖
• 网址：codesandbox.io/s/vue
• 使用File菜单-Export to ZIP 选项 导出