参考文档

• vue官方文档
• vue@cli官方文档

项目搭建

方法一：vue官方cli

1. 安装vue cli: yarn global add @vue/cli
2. 进入项目根目录:cd /项目路径
3. 创建Vue项目：vue create vue-demo-1 (在当前目录内创建vue项目，文件夹名为vue-demo-01)
4. 配置

• 部分配置需手动选择，其他选择默认配置
• 手动选择配置如下：（根据项目实际需求配置）

5. 运行两行命令
   • 进入项目文件夹cd 项目名称
   • 开启项目在线预览 yarn serve
6. 创建项目文件夹成功，编辑器内打开即可开始后续开发

方法二：使用webpack或rollup搭建

• 说明：此方法适用于熟练使用Vue，具有一定开发经验的人员

方法三 ： codesandbox，在线编辑预览和导出

• 打开官网
• 新建项目→导出项目→package.json文件中查看运行方式

vue的两个版本

完整版

1. 引入方法
   • bootcdn引入：index.html文件中通过script标签，引入vue.min.js
   • weback引入
   • vue cli引入
2. 机制
   • 内置编译器（compiler）,将html字符串变成DOM节点，项目体积大
   • 视图：将视图字符串写在html文件或者在new vue构造选项template里

非完整版

1. • bootcdn引入：index.html文件中通过script标签，引入vue。runtime.min.js
   • weback引入
   • vue cli引入
2. 机制
   • 无编译器，体积小，用户端体量少
   • 视图：只能通过render函数里的h创建
3. 项目打包机制
   • 内置webpack，在打包时，vue—loader把vue文件翻译成带有render函数的一个对象，在main.js文件中引用
4. 缺点SEO（搜索引擎优化）不友好
   • SEO：搜索引擎会curl网页（.html文件）的内容，由于是非完整版，详细内容是写在JS文件里的，具体内容无法直接获取

总结

• 大多数使用非完整版， 原因：因为终端的体积更小，用户体验更佳；开发者可以在vue文件中直接写入标签，有更好的开发体验