Vue3 - 初步认识&创建项目

相关了解:

Vue3 支持 Vue2的大多数特性
更好的支持 Typescript

性能提升:

  • 打包大小减少41%
  • 初次渲染快55%, 更新渲染快133%
  • 内存减少54%
  • 使用Proxy代替defineProperty实现数据响应式
  • 重写虚拟DOM的实现和Tree-Shaking

新增特性:

  • Composition (组合) API

  • setup

      ref 和 reactive
      computed 和 watch
      新的生命周期函数
      provide与inject
      ...
    
  • 新组件

      Fragment - 文档碎片
      Teleport - 瞬移组件的位置
      Suspense - 异步加载组件的loading界面
    
  • 其它API更新

      全局API的修改
      将原来的全局API转移到应用对象
      模板语法变化
    

创建vue3项目

  1. 利用 vue-cli 官方脚手架创建:
## 卸载旧版本
	// npm uninstall -g vue-cli 
## 安装或者升级
	npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
	vue --version
	vue -V
## 创建项目
	vue create my-project

创建后的选项:

	Please pick a preset - 选择 Manually select features
	Check the features needed for your project - 选择上 TypeScript ,特别注意点空格是选择,点回车是下一步
	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? - 直接回车
  1. 使用 vite 创建

vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。

使用npm:

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页