div设置高度 vue_Vue两个版本区别-优快云博客

本文详细介绍了如何使用@vue/cli创建和运行Vue项目，包括安装、创建目录、启动开发服务器等步骤。同时，文章对比了Vue完整版与非完整版的区别，完整版包含编译器，支持直接在HTML中编写模板，而非完整版不包含编译器，需借助vue-loader。建议在实际应用中结合vue-loader使用非完整版，以减小文件体积并优化开发体验。

一、@vue/cli用法

1.安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.创建目录：vue create 路径（路径可用.点）

3.选择使用配置

4.进入目录，运行yarn serve开启webpack-dev-server（npm run serve）

5.用webstorm或者VS code打开项目

ps:还可使用http://codesandbox.io 见 https://codesandbox.io/s/laughing-chaum-kb9gu

点开出现

二、vue完整版和非完整版区别

完整版是同时包含编译器和运行时的版本，文件名是vue.js，还有一个适合生产环境的完整版，文件名是vue.min.js

我们使用cdn引用一下vue的完整版

从HTML编程页面里的东西，完整版就智齿，元素可以写在template里或者HTML里

可直接在页面里将n变成0

或者

非完整版vue.runtime.js，就不支持从HTML里获取视图

h函数就是createElement的缩写

1.完整版对应文件名：从CDN引入vue.js ; vue.min.js 。可以从HTML或template直接得到视图,有compiler编译器可以将含有占位符{{}}或者条件语句变成真实的DOM节点，后面再修改会直接修改DOM节点无需再编译一遍，但compiler比较复杂会占用一定体积

2.非完整版对应文件名：vue.runtime.js ； vue.runtime.min.js。没有compiler,不能将HTML变成节点。webpack通过vue-loader(在yarn build里已设置)会调用compiler将html变成h('div',this.n)

3.vue完整版 template的使用方法：直接写在页面上或者JS上

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

4.vue非完整版 render的使用方法

render函数接收一个参数h，这个参数是vue传的；用这个参数去创建实例

render(h){ 
     return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])
 }

vue单文件组件例子

新建demo.vue

//视图
<template>
 <div class="red">
 {{n}}
 <button @click="add">+1</button>
 </div>
</template>

//视图之外其它选项
<srcipt>
export default{
data(){                        //函数
    return {
        n:0
    }
},
methods:{                     //对象
    add(){
        this.n +=1
    }
}
}
</srcipt>

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

在main.js引入

import demo from "./demo.vue"
new Vue({
  el: "#app",//渲染到app
  render(h) {
    return h(demo)
  }
})

vue-loader会将.vue的内容翻译成h构建方法变成一个对象，但这样做HTML就只有一个#div.app，SEO（搜索引擎优化）不友好，因此在HTML里把title、description、keyword、h1、a写好即可

三、总结

最佳使用方法：总是使用非完整版，然后配合使用vue-loader和vue文件

1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数

2.保证开发体验，开发者可直接在vue文件里写html标签，而不写h函数

3.vue-loader把vue文件里的html转化成h函数