Vue起手式

构建一个Vue项目

方法一：使用@Vue/cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建
vue create hello-world

选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。进入目录后运行yarn serve 可以打开webpack-dev-server

使用图形化界面
通过 vue ui 命令以图形化界面创建和管理项目

方法二：从零搭建一个Vue项目

使用webpack或者rollup，适合有经验者

方法三：使用codesandbox.io

点击create sandbox

截屏2022-08-19 09.43.06.png
选择Vue3
截屏2022-08-19 09.45.27.png
即可快速得到一个配置好的vue项目，如果想转到本地编辑，选择导出源码压缩包，解压后即可在本地编辑。在package.json里可以看到如何运行
截屏2022-08-19 09.47.02.png

Vue的两个版本

vue.js和vue.runtime.js

方法一：从HTML里直接得到视图
（完整版）
从CDN引用vue.js或者vue.min.js可以做到
也可以通过import引用vue.js或者vue.min.js，MVC的视图没有写在js里面，直接写在页面里

方法二：使用JS构造视图（非完整版）
引入vue.runtime.js

二者的区别

截屏2022-08-19 11.53.37.png

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

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

tips：最佳实践:总是使用非完整版，然后配合vue-loader和vue文件。

1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数。

2.保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数。

3.脏活让loader做，vue-loader把vue文件里的HTML转为h函数。 这样你就可以不写h函数也能得到h函数。