Vue 丨 Vue-cli脚手架之开发版本（二）

搭建Vue项目

Vue 的搭建分为两个环境，开发和测试。

开发环境 @vue/cli

/安装@vue/cli
yarn global add @vue/cli
//查看版本号
@vue/cli --version
//创建 
vue create [项目名]
//手动选择配置/自动配置

测试

codesandbox.io

1. codesandbox.io
2. 登录codesandbox.io，
3. 点击 Create Sandbox 按钮（右上角），
4. 选择 Vue.js 模板
5. 测试完之后，
6. 点击 file 按钮，
7. 选择 Export to ZIP 即可下载。

直接引入cdn

直接在JS标签引入 cdn 地址即可，官方给了地址。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

也可以在bootcdn 上搜索 Vue.js

Vue两个版本

区别

vue.js-完整版
完整版可以从HTML里直接获取视图。
完整版有编译，可以将HTML里的特定语句编译成DOM节点，如v-if，v-for，@click，编译器比较复杂，因此会占用一定的代码体积。
完整版的Vue会比非完整版的Vue代码体积更大

vue.runtime.js-非完整版
非完整版时需要使用render函数渲染视图，但更加独立，不支持在HTML里写特定语句。可以利用webpack的Vue loader进行转译。

template 和 render

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

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