写在前面
很多前端新人都听过Vue.js这个前端框架，但是具体怎么开始使用Vue确很茫然。本文就是带大家一起来学习一下，如何正确地创建一个Vue的demo。
正文
第一步：安装@vue/cli
首先，什么是@vul/cli ？
Vue CLI官方文档告诉我们，这是Vue.js开发的标准工具，也就是Vue开发的命令行工具，你只需要按照官网敲几行命令就可以新建一个基本的vue项目框架，对开发者来说非常方便。
此外，@vul/cli 里面包含了webpack， 并且配置好了基本的webpack打包规则。
那么，如何安装呢？
同样是跟着官网走就好了。
首先打开你的命令行工具，或者是webstorm或VScode的控制台
npm install -g @vue/cli
# OR
yarn global add @vue/cli
判断是否安装成功：
vue --version
安装成功后，就可以创建一个Vue-demo了。
第二步：创建demo
输入以下命令创建一个项目：
vue create hello-world
下面就是选择一些配置，为了帮助新人更快上手，大家可以参考我的配置选项，如果觉得麻烦也可以直接用默认配置。
- 第一步：选择自定义（上下键更换选项、回车键确认）
- 第二步（空格键选择、回车键确认）
- 第三步
- 第四步
- 第五步
- 第六步
- 第七步
- 第八步
等待几分钟后，@vue/cli工具就帮你创建好一个demo了。
接着运行下面的代码：
cd hello-world
yarn serve
接下来会出现这个选项：
随意选择一个地址，如果网页出现如下的样式说明就创建成功了。
好了，关于@vue/cli我们就讲到这里，由于@vue/cli的功能也很丰富，大家可以去官网仔细浏览。
第三步：选择Vue的开发版本
使用Vue来开发的时候，我们需要考虑用哪种版本来开发。
Vue.js官网对两种不同构建版本的解释是这样子的：
- 完整版：同时包含编译器和运行时的版本（编译器：用来将模板字符串编译为JS渲染函数的代码）
- 运行时：用来创建Vue实例，渲染并处理虚拟DOM等的代码，基本上就是出去编译器的其它一切。
那么我们到底要选择哪种版本呢，请看下面的分析。
官网中给出的解释是：
我的结论是：
最佳实践：总是使用非完整版，然后配合vue-loader 和 vue 来进行使用。
思路：
- 保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。
- 保证开发体验，开发者可直接在 vue 文件里面写 html 标签，而不写 h 函数
- 脏活累活让 loader 做，vue-loader 把 vue 文件里面的 html 转为 h 函数。
第四步：引入运行时版本的Vue
可以使用cdn或npm引入，我们这里使用cdn引入。
打开bootCDN官网，搜索Vue，找到如下链接：
一般选择带有.min.js的版本（体积较小），插入到index.html中即可。
第五步：手写第一个demo
我们现在终于开始写第一个demo了。我们这次实现一个只有加一功能的app。
手写创建一个名为Demo.vue的文件，我们发现Vue的文件主要由三部分组成：
//视图
<template>
</template>
//视图外的其它选项
<script>
export default {
}
</script>
//css
<style scoped>
</style>
这里由于我们使用的是非完整版，因此把视图放在了js文件中。如果是完整版，视图可以放在html中或写成字符串。
下面开始写代码：
//视图
<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>
//css
<style scoped>
.red {
color: red;
}
</style>
然后我们在main.js中引入Demo.vue。
import Vue from 'vue'
Vue.config.productionTip = false
import Demo from "./Demo";
new Vue({
el:'#app',
render(h){
return h(Demo)
}
})
index.html只需要一个空的id为app的div元素即可。
<body>
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
</body>
补充一下：
main.js中的render函数起到的是一个渲染作用，它接收一个参数h（也就是创建一个元素），对这个节点进行一些列操作后再返回这个节点。
Trick
这里给大家提供一个快速生成Vue文件的方法。
可以使用codesandbox.io中的vue生成工具，具体请看下面的介绍：
- 第一步
- 第二步
- 第三步
导出后就用webstorm或VScode打开就可以正常操作了。
总结
现在你可以自己尝试些一个demo了，相关的一些方法和插件可以去Vue.js官网查看，通过写demo的方式去了解每个功能的用法可以帮助你更好得掌握这个框架。
