安装@Vue-CLI

yarn global add @vue/cli
vue --version 查看版本

上面我们使用yarn构建了@vue/cli工具，这个工具是vue.js提供的命令行工具，可以帮助我们更快地构建项目脚手架、通过webpack搭建的server工具以及其他插件。 这个系统包含以下内容：

• cli命令
• cli服务，例如webpack配置、server等
• cli插件，插件名@vue/cli-plugin-或者vue/cli-plugin-

创建项目

mkdir vue-demo-1
cd vue-demo-1
vue create ./

上面的命令行我创建并进入一个目录，并且在当前目录下使用vue creat出一个vue的目录

后面将提示选取一个preset，可以选择默认，也可以选择手动配置。在选择手动配置后，会提示是否要设置为未来默认的preset，默认是no，如果这时候选了yes，那么可以通过preset对象来编辑，它在这里：

官方创建项目文档：cli.vuejs.org/zh/guide/cr…

进入目录

进入目录后可以使用yarn serve来运行webpack-dev-server

codesanbox

如果想更加快速地构建vue项目（学习向），可以使用代码沙盒，一秒钟完成搭建vue的配置

在网站codesandbox.io中点击 Create a Sandbox 创建沙盒，注意这里无需登录（登录后会有创建限制）

Vue的两个版本

• Vue有完整版Vue和runtime版两个版本。
• 完整版Vue对应的文件名为vue.js，完整版支持从HTML获取视图；
• runtime版（非完整版）对应的文件名为vue.runtime.js，此版本不支持从HTML获取视图，但可以用JS构建视图。
• 虽然很多人觉得完整版更好用，但是非完整版有一个优点，就是相对更独立。由于不完整版没有compiler，所以不能把HTML变成节点。可以用webpack的vue-loader把.vue文件翻译成 h 构建方法。但是这样做HTML就只有一个div#app，SEO（搜索引擎优化）不友好。

两个版本的区别

// 需要编译器 完整版
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器 runtime版本
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})