完整版与非完整版区别
- 完整版vue.js：同时包含编译器和运行时的版本，视图写在HTML里或者写在template选项
- 非完整版vue.runtime.js：只包含运行时的版本，视图写在render函数里用h来创建标签
- 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。约占百分之四十代码体积
- 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切
使用@vue/cli 创建Vue项目
- 进入官网Vue CLI
- 全局安装
yarn global add @vue/cli
vue --version // 查看版本
- 创建一个新项目
vue create 路径
-
选择使用配置 // 根据实际开发需要选择
-
进入目录, 运行
yarn serve开启webpack-dev-server -
用WebStorm或者VSCode打开项目
-
用bootcdn提供的链接在index.html引入vue(完整版或非完整版)
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
使用codesandbox.io 创建Vue项目
- 进入 codesandbox.io
- 不要登陆，免费创建一个沙盒（登陆后将限制创建次数）
- 选择vue模板
- 开始写代码
两种版本使用方法
- 直接下载并用 标签引入，Vue 会被注册为一个全局变量
- CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
- @vue/cli引入默认使用非完整版，使用完整版需要另外配置
- vue.js错用成vue.runtime.js，无法将HTML编译成视图
- vue.runtime.js错用成vue.js，代码体积会变大，因为多了编译器
template 和 render 怎么用
- 在Vue文件中以template标签创建HTML // 完整版vue.js
new Vue({
el: '#app',
template: '<div>{{ hi }}</div>'，
data: {
hi: "你好"
}
})
- 在js中以render函数渲染元素 // 非完整版vue.runtime.js
import Vue from 'vue'
new Vue({
el: '#app',
render(h) {
return h('div', this.hi)
},
data: {
hi: "你好"
}
})
- 使用vue-loader
可以把.vue文件翻译成h构建方法，但这样做HTML就只有一个div#app，SEO不友好
import Demo from "./Demo.vue"
new Vue({
el: '#app',
render(h) {
return h(Demo)
},
})
<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>
