关于vue的介绍请到vue的官网查看，这里我就不过多赘述，直接上手
目标一：创建一个vue的项目
-
使用vue-cli搭建项目，搜索vue-cli，打开vs code终端，复制图中的最后一句代码
yarn global add @vue/cli,global代表全局安装。安装完毕后输入vue --version可以查看版本，版本只要是4开头的版本就可以
vue-cli安装.png 把项目放在你想放到的目录下，然后用vs code的终端工具进入这个目录，只需进入即可
找到上面图中左边的 创建一个项目 ，在终端内复制下面的代码
vue create hello-world,注意，‘hello-world’是项目名称，不想用可以替换成其他的名字，然后回车
vue create.png
- 接下来就是对这个项目的配置，上下键进行移动，空格键表示选中或者取消，选好之后回车键进入下一个配置，第一个看下图，选择第二个（手动选择特性），第一个是默认的
1.png
- 如图，按照图中选择即可，
2.png
-
如图，想用哪种都行，就是别用第二种（node-scss)
3.png -
如图，直接回车
4.png -
这个选择第二个，用空格键选中，
5.png -
选择第二个
6.png -
直接回车
7.png -
下面这个比较重要，千万不要选错，你打y就代表以后直接用上面的配置，无需再选择配置，打n则相反，然后回车，
8.png -
看到下图，就代表成功了（vue-demo-2是项目名）
9.png -
成功了以后，在vs code中打开这个项目目录，再开启一个终端，运行
yarn server,会开启一个本地的预览服务器，如下图，复制网址，浏览器打开即可
10.png -
浏览器打开的内容如下图，至此，项目创建成功
11.png
目标二：如何在codesandbox.io网页里写vue代码
用谷歌打开上面的网址
点击右上角的' Create Sandbox '
-
出现像下面这样的样子，点击' vue '即可写vue代码
create.png -
如果你和下面的图类似，即可随意写vue代码了
vue.png 同时这个网站还支持代码下载
目标三：如何理解vue的两个版本
-
vue的两个版本可以在官网中看到，分为完整版vue.js和运行时版vue.runtime.js
vue的两个版本.png
完整版和运行时版有何区别
- 完整版有编译器，所以代码体积要大，支持template，template可以写在html或者vue代码中
- 不完整版没有编译器，不支持template，需要render，
以下是示例代码
完整版视图写在HTML标签或template中：
new Vue({
template: '<div>{{ hi }}</div>'
})
非完整版需要写在render函数里用h创建标签：
new Vue({
render (h) {
return h('div', this.hi)
}
})
