坐忘道

Appearance

创建项目 ​

先确认电脑上已经配置了 Node 环境

基于 vue-cli 创建 ​

创建流程 ​

  • 安装升级@vue/cli
bash
# 查看 @vue/cli 版本, 确保 @vue/cli 版本在 4.5.0 以上
vue --version

# 安装或升级 @vue/cli
npm install -g @vue/cli
  • 创建项目
bash
# 执行创建命令
vue create [project-name]

# 选择 3.x 版本

# 进入项目目录
cd [project-name]

# 安装依赖
npm install

# 启动
npm run serve

注意

目前vue-cli已经处于维护模式, 官方推荐基于vite创建项目

基于 vite 创建(推荐) ​

vite是新一代的前端构建工具

官网地址: https://vitejs.cn/vite3-cn/

vite的优势:

  • 轻量快速的热重载HMR, 能实现极速的服务启动
  • 对TypeScript, JSX, CSS等支持开箱即用
  • 真正的按需编译, 不再等待整个应用编译完成
  • webpack构建示意图

Webpack

  • vite构建示意图

Vite

创建流程 ​

  • 创建项目
bash
# 创建命令
npm create vue@last
  • 具体配置
bash
# 配置项目名称
√ Project name: [project-name]

# 是否添加 TypeScript 支持
√ Add TypeScript?  Yes

# 是否添加 JSX 支持
√ Add JSX Support?  No

# 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No

# 是否添加 pinia 环境
√ Add Pinia for state management?  No

# 是否添加单元测试
√ Add Vitest for Unit Testing?  No

# 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No

# 是否添加 ESLint 语法检查
√ Add ESLint for code quality?  Yes

# 是否添加 Prettiert 代码格式化
√ Add Prettier for code formatting?  No

# 进入项目目录
cd [project-name]

# 安装依赖
npm install

# 启动
npm run dev

项目目录 ​

  • 目录结构
bash
project/
├── .vscode/ # 配置了 VS Code 开发插件
├── public/ # 脚手架根目录
│   └── favicon.ico # 网站页签图标
├── src/
│   ├── assets/ # 资源文件
│   ├── components/ # 组件
│   ├── App.vue # 根组件
│   └── main.js # 项目的入口文件
├── .gitattributes # 定义路径(文件或目录)的属性
├── .gitignore # Git 忽略文件
├── env.d.ts # 声明文件格式类型
├── index.html # 入口文件
├── package-lock.json # 包锁定文件, 锁定版本号, 提升包安装速度
├── package.json # 包说明文件
├── tsconfig.json # TS 配置文件
├── tsconfig.app.json # 
├── tsconfig.node.json # 
├── vite.config.js # vite 配置文件
└── READEME.md # 说明文档

总结

  • vite项目中, index.html是项目的入口文件, 在项目的最外层
  • 加载index.html后, vite解析<script type="module" src="./src/main.ts">指向的JavaScript
  • Vue3中是通过createApp函数创建一个应用实例