![932f860b0be3db44cac1027b45c5bf6a.png](https://i-blog.csdnimg.cn/blog_migrate/e57a574831e353539bada73988e81d7c.png)
搭建项目
可以在命令行使用@vue/cli进行项目搭建,具体的内容在vue的官方文档都可以查到
这里也给新手介绍另一种方式:通过http://codesandbox.io搭建项目
https://codesandbox.io/s/codesandbox.io注意:不要登录,不登录可以创建无数个项目,登陆了就只能创建50
步骤:
Sandbox--->创建vue--->导出zip
![b8fa56c97e37d75a862e61c7ba1645e8.png](https://i-blog.csdnimg.cn/blog_migrate/590b65031d0dac8cdb5ee46ecade1ae7.jpeg)
![25eb9a68462c97e899c60371cc9179ce.png](https://i-blog.csdnimg.cn/blog_migrate/85661b83e11130cfd68fce80fccdd04b.png)
![a5c510b54a2b21096f258a13ae288d9e.png](https://i-blog.csdnimg.cn/blog_migrate/f18699e374f83e555be6d9ccfb4cbb0d.jpeg)
直接下载下来就可以用了
vue.js 和 vue.runtime.js
如何使用vue实例
1.从HTML中得到视图
- 也就是官方文档里说的 完整版Vue
- 从CDN引用vue.is或vue.min.is即可做到
- 也可以通过import引用Vue.js或者vue.min.js
2.用JS构建视图
- 还是看官方的文档链接,引用vue.runtime.js
- 这种方法很不方便,但实际上是对的
- vue.js 与 vue.runtime.js区别在于:完整版的vue(vue.js)需要complier编译器把html的内容变成DOM节点,增加了代码体积,大概比不完整版多占了40%的代码体积
3.使用vue-loader
- 利用webpack,可以吧.vue文件翻译成h构建函数
- 这样我们在写代码的时候好像在用完整版,但是用户下载的就是h()+'不完整版的vue',减少代码体积
- template 和 render:render会把<template><div></div></template>自动翻译成h('div')
![a025376dbb88a2fdf80eba6701f0eb9d.png](https://i-blog.csdnimg.cn/blog_migrate/0b0a3b988387f2389c6880a40352c66f.png)
![36fe1138f11412c208b6396d14a33225.png](https://i-blog.csdnimg.cn/blog_migrate/6387310d7b15ae6e57eebb3d76456144.png)
![194103679efb4519341ae6d951eaa768.png](https://i-blog.csdnimg.cn/blog_migrate/996c45c7c225264d05fee842d0f17f3c.jpeg)
最佳实践:总是使用非完整版,然后配合vue-loader和vue 文件