随想笔录

Appearance

官方文档: https://staging-cn.vuejs.org

1. 了解相关信息 ​

  • 2 年多开发, 100+位贡献者, 2600+次提交, 600+次 PR(Pulll Request)
  • Vue3 支持 vue2 的大多数特性
  • 更好的支持 Typescript

2. 性能提升 ​

  • 打包大小减少 41%
  • 初次渲染快 55%, 更新渲染快 133%
  • 内存减少 54%
  • 重写虚拟 DOM 的实现和 Tree-Shaking

3. Composition API ​

  • 也称组合 API
  • setup
  • ref 和 reactive
  • computed 和 watch
  • 新的生命周期函数
  • 自定义 hooks 函数

4. 其它新增特性 ​

  • Teleport - 瞬移组件的位置
  • Suspense - 异步加载组件的 loading 界面
  • 全局 API 的修改

创建 vue3 项目 ​

1. 使用 vue-cli 创建 ​

bash
## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create <project-name>

然后的步骤

  • Please pick a preset - 选择 Manually select features
  • Check the features needed for your project - 多选择上 TypeScript && Router && Vuex，特别注意点空格是选择，点回车是下一步
  • Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
  • Use class-style component syntax - 直接回车
  • Use Babel alongside TypeScript - 直接回车
  • Pick a linter / formatter config - 直接回车
  • Use history mode for router? - 直接回车
  • Pick a linter / formatter config - 直接回车
  • Pick additional lint features - 直接回车
  • Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
  • Save this as a preset for future projects? - 直接回车

2. 使用 vite 创建 ​

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。相比较 webpack 打包环境, 启动快很多

image-20220705112829318