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

目录

搭建Vue项目开发环境 @vue/cli测试 Vue两个版本

搭建Vue项目

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

开发环境 @vue/cli

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

测试

codesandbox.io

codesandbox.io登录codesandbox.io，点击 Create Sandbox 按钮（右上角），选择 Vue.js 模板测试完之后，点击 file 按钮，选择 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) } })