1. @vue/cli
- 全局安装@vue/cli
npm install -g @vue/cli
- 如果已经安装过，需要升级全局的@vue/cli
npm update -g @vue/cli
- 创建项目
vue create [项目路径]
vue create .//当前文件夹为项目文件夹
vue create demo // 当前路径下的demo文件夹为项目文件夹
PS：vscode 插件 Vetur（支持.vue文件的语法高亮显示）
2. 运行时 VS 完整版
main.js
new Vue({
el: "#app",
template: `
<div>
<span>{{n}}</span>
<button @click="add">+1</button>
</div>
`,
data: () => {
return {
n: 0,
};
},
methods: {
add() {
this.n += 1;
},
},
// render: h => h(App),
})
控制台会报错：
上面错误提示，代码中有template需要编译，但项目正在使用runtime-only版本，不支持编译，可以选择使用render函数预编译，或者使用完整版本（自带编译功能）
2.1 不同构建版本的差别
完整版：同时包含编译器和运行时的版本
编译器：用来将模板字符串编译成javaScript渲染函数的代码
运行时：用来创建Vue实例、渲染并处理虚拟DOM等的代码，基本上就是除去编译器的一切
UMD：UMD 版本可以通过 <script> 标签直接用在浏览器中
new Vue({
...
template: `
<div>
<span>{{n}}</span>
<button @click="add">+1</button>
</div>
`,
})
上述例子中，需要在客户端编译模板（比如传入一个字符串给template选项，或者挂载到一个元素上并以其DOM内部的HTML作为模板），就需要使用完整版，进行编译。由于@vue/cli默认安装的是运行时版本，所以会报错
2.2 解决方案如下：
- 根据建议，使用render函数，而不是template选项
render(createElement) {
const h = createElement;
return h("div", [h("span", this.n), h("button", { on: { click: this.add } }, "+1")])
}
createElement(
‘div’,
// {String | Object | Function} 主要是用于提供dom中的html内容，类型可以是字符串、对象或函数。
// 第二个参数 {object}用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类的，可选
[h("span", this.n), h("button", { on: { click: this.add } }, "+1")]
// 子级虚拟节点，主要用于设置分发的内容，如新增的其他组件，可选
)
createElement()，通过传入createElement参数，创建虚拟节点，然后再将节点返回给render返回出去。
总的来说，render函数的本质就是创建一个虚拟节点。
template 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽
注意： Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
- 这种实现比较麻烦，还可以采用单文件组件
demo.vue
<template>
<div>
<span>{{ n }}</span>
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
name: "vueDemo",
data() {
return {
n: 0,
};
},
methods: {
add() {
this.n += 1;
},
},
};
</script>
<style>
</style>
main.js
import Vue from 'vue'
import Demo from './components/demo.vue'
Vue.config.productionTip = false
new Vue({
el: "#app",
render: (h) => {
return h(Demo)
}
})
- 也可以通过CDN引入vue的完整版，代替，
import Vue，这样也可以继续使用template
2.3 区别
为什么官方推荐使用运行时版本而不是完整版？
因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本
当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。所以在最终打好的包里实际上是不需要编译器的，只用运行时版本即可
3. 简单了解codesandbox.io的使用
使用@vue/cli可以迅速创建项目，除此之外，我们也可以使用codesandbox.io，无需安装，直接就可以使用vue
- 打开codesandbox.io
- 选择首页右上角的
create sandbox - 进入模板选择页面，选择vue，立马就创建了在线的vue项目
-
可以上传文件，或者完成导出文件
