Vue入门两种版本Vue渐进式JavaScript框架搭建vue项目配置vue，不选择默认配置Vue实例创建实例(bo

Vue 渐进式JavaScript 框架

Vue是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用
Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

Vue不是mvvm框架,1.0版是mvvm框架;2.0看起来是，实际不是

搭建vue项目

yarn global add @vue/cli@4.1.0 -beta.0
全局安装Vue cli 

vue --version
查看版本

vue create vue-demo-1
创建文件

yarn serve
运行本地预览（webpack-dev-server）

配置vue，不选择默认配置

Manually select fatures
手动选择特性

CSS Pre-processors
css预处理

Unit Testing
单元测试

Sass/SCSS (with dart-sass)
选择哪种css

EsLint with error PreVention only

Lint and fix on Commit
在提交是运行Lint（看错误）

Jest
单元测试方案（Pick a unit testing solution）

In dedicated configfiles
配置文件分开存放

Save this as a preset for future projects？ (y/n)
是否设置成默认配置,n每次从新设置

yarn serve
运行本地预览

根据具体需求，每次配置不同功能

Vue实例

const vm = new Vue({
    render: h => h(App),
}).$mount('#app')

vm封装了这个实例对于组件(内容)的所有操作(数据,事件,绑定,更新等等)

创建实例(bootcdn.cn)

完整版 vue.js

new vue({})

<template>
    <div id="app">      
        {{n}}
        <button @click="add">+1</button>   
   </div> 
</template>
可以直接从html里获取元素

非完整版 vue.runtime.js

render(h){
    return h('div', this.n)
}

render(creatElement){
    const h = creatElement
    return h("div",[this.n, h("button", {on:{click: this.add}},'+1')])
}
不支持从html里获取视图

实现vue 实例

方法一:从HTML 得到视图
使用完整版vue
从CDN 引用 vue.js 或 vue.min.js 即可
也可以通过 import 引用vue.js 或者 vue.min.js
import Demo from './Demo.vue'

方法二:用JS构建视图
使用非完整版vue.runtime.js
h函数

方法三:使用 vue-loader
可以把.vue文件翻译成 h构建方法

两个版本的区别

完整版里有compiler（编译器），非完整版里没有，compiler占40%的体积

完整版视图写在HTML或template选项，非完整版写在render函数里，用h来创建标签

文件名不同，完整版vue.js;非完整版vue.vue.runtime.js;生产环境文件后缀为.min.js

使用哪个版本

使用非完整版，配合vue-loader 和 vue文件

保证用户体验，用户下载的JS文件体积更小，但只支持h函数
保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
让vue-loader翻译，把vue文件里的HTML转为h函数

Vue 练习代码

详细资料点击：Vue 文档

Vue入门 两种版本

创建实例(bootcdn.cn)

Vue入门两种版本