Vue3：创建脚手架

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

• Vue3 运行性能是 Vue2 的 1.5 倍。
• Vue3 支持 tree-shaking，可以进行按需编译，编译后的文件体积比 Vue2 更小。
• Vue3 提供更先进的功能，teleport、suspense 等。
• Vue3 对 TypeScript 的支持更友好，对大型前端应用的支持更好。
• Vue3 组合式 API 使应用中的功能代码更聚合，使组件间公共逻辑的抽取更容易。
• Vue3 在 2022年2页左右
• 使用 Proxy 代替 defineProperty 实现响应式。

Vue3.0创建脚手架

• 支持 Vue 4.5.3 以上版本。

# yarn 命令
vue create 项目名称
1
2

工程目录

1. main.js

   引入的不再是Vue的构造函数了，引入的是一个名为 createApp 的工厂函数。

   • createApp(App)：创建应用实例对象。
   • mount('#app')：挂载。

   import { createApp } from 'vue'
   import App from './App.vue'
   
   createApp(App).mount('#app')
   1
   2
   3
   4

Vite 创建项目

Vite 新一代前端构建工具。

• 开发环境中，无需打包操作，可快速的冷启动。
• 轻量快速的热重载。
• 按需编译。

# yarn 命令 (只会提示安装 vue-ts)
yarn create @vitejs/app 项目名称

# npm 命令 (只会提示安装 vue-ts)
npm init @vitejs/app 项目名称
1
2
3
4
5

• npm安装会提示是否安装依赖

  # npm 命令（常用，会推荐安装常用第三方包）
  > npm init vue@3
  
  Vue.js - The Progressive JavaScript Framework
  
  √ Project name: ... vite-study-v3
  √ Add TypeScript? ... No
  √ Add JSX Support? ... No
  √ Add Vue Router for Single Page Application development? ... No
  √ Add Pinia for state management? ... Yes
  √ Add Vitest for Unit Testing? ... No
  √ Add Cypress for both Unit and End-to-End testing? ... No
  √ Add ESLint for code quality? ... Yes
  √ Add Prettier for code formatting? ... Yes
  
  Scaffolding project in ...
  
  Done. Now run:
  
    cd vite-study-v3
    npm install
    npm run lint
    npm run dev
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24

项目结构

| 项目名称
|-- node_modules
|-- public
|-- src
	|-- assets  # 静态资源
	|-- components	# 组件
	|-- App.vue	# 根组件
	|-- index.css	# 通用css样式
	|-- main.js	# 引入挂载
	|-- .gitignore	# 忽略文件
	|-- index.html	# 项目首页
	|-- package-lock.json	# 
	|-- package.json	# 版本统一
1
2
3
4
5
6
7
8
9
10
11
12
13

配置文件

• 在项目中引入组件或文件时，使用 @/ 别名引入文件路径报错问题。

  在 vite.config.js 配置文件中修改别名。

  const { resolve } = require('path')
  
  export default {
      // 别名
      alias: {
          '@': resolve(__dirname, './src')
      },
      server: {
          open: true,
      },
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  在 tsconfig.json 中配置 baseUrl，paths

  {
      "compilerOptions": {
          "baseUrl": ".",
          "paths": {
              "@/*": ["src/*"]
          },
      },
  }
  1
  2
  3
  4
  5
  6
  7
  8

  在项目中使用 /@/ 进行引入。

  <template>
  	
  template>
  
  <script setup lang='ts'>
  	import head from '@/components/head.vue'
  script>
  1
  2
  3
  4
  5
  6
  7