Vue 起手

项目搭建

npm install -g @vue/cli yarn global add @vue/cli 你还可以用这个命令来检查其版本是否正确： vue --version

自己搭建Vue项目

vue create vue-demo-1 或者使用codesendbox

目标1:实现+1

<template>
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import { METHODS } from 'http';

export default {
  name: "app",
  data(){
    return {n:0};
  },
  methods:{
    add(){
      this.n+=1
    }
  }
};
</script>

完整版vue.js vue.runtime.js

**Bootcdn: ** <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> c 完整版,min.js完整去注释版,runtime.js运行时版

vue.min.js

从html中获得视图 从cdn引用vue.js或者vue.min.js即可 也可以通过import 引用 vue.js或者vue.min.js 链接

new Vue({
  el: '#app',
  data() {
    return {
      n: 0
    }
  }
})

runtime.js

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

new Vue({
  el: '#app',
  render(h) { 
    return h('div', [this.n, h('button', { on: {click:this.add}},'+1')])
  },
  data: {
    n:0
  },
  methods: {
    add() { 
      this.n+=1
    }
  }
})

vue-loader 单文件组件

可以帮.vue文件翻译成h构建方法 但这样HTML就只有一个div#app,

SEO不友好

解决方法:直接在index.html中写入title , meta,后面render会替换新的

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+=1
        }
    }
}
</script>

<style scoped>
.red{
    color: red;
}
</style>

main.js

import demo from './demo.vue'
console.log(demo)
console.log(demo.render.toString()) //得到loader后的html

new Vue({
  el:'#app',
  render(h) {
    return h(demo)
  },
});

区别

最佳实践：总是使用非完整版，然后配合vue- loader和vue文件 思路： 1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数 2.保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数 3.脏活让 loader做，vue- loader把vue文件里的HTML转为h函数 真TM聪明，这就是工程师干的事

CodeSendBox

codesendbox是在线代码编辑器, 使用快速进行开发,codesendbox