从头起项目01：项目初问世

2024-04-30

VueVue3前端

项目创建

vue2 与 vue3 起项目的区别

Vue2 一般用 vue-cli 来起项目。vue-cli 基于 webpack 构建。因其需要编译整个项目，冷启动和热更新会慢些，随着项目增大，速度会越来越慢。

Vue3 不再使用 vue-cli，而是使用 vite。vite 利用了浏览器原生支持的模块系统，按需给浏览器提供源码，无须编译，热更新时又能精准更新，速度会快很多，一般情况下，秒开秒更新。

包管理工具

此项目用 pnpm 作为包管理器。按官方说法，pnpm 比 npm 快两倍，且更省空间。

pnpm 安装命令：

bash

npm install -g pnpm

npm 与 pnpm 命令区别：

操作	npm	pnpm
初始化安装	`npm install`	`pnpm install`
安装	`npm install <包>`	`pnpm add <包>`
运行	`npm run <命令>`	`pnpm <命令>`
卸载	`npm uninstall <命令>`	`pnpm remove <命令>`

命令后面带的参数，诸如 -D -g，与 npm 大差不差。

Vue3 起项目方法参见 Vue 官方文档。

pnpmnpmyarn

bash

pnpm create vue@latest

bash

npm create vue@latest

bash

yarn create vue@latest

根据命令行提示，此项目选装了：

vue-router 用来路由
pinia 用来状态管理，也就是 vue2 中的 vuex
eslint 用来代码质量检测并自动格式化
不使用 ts

装好之后，可以看到，与 vue2 项目结构稍有不同，入口 HTML 文件从 public 目录移到了根目录下，vue.config.js 变成了 vite.config.js。

index.html 可做如下修改：

html

<!doctype html>
<html lang="en">
<html lang="zh-CN">
  <head>
    <!-- ... -->
    <title>Vite App</title>
    <title>Vue3 后台管理系统模板</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

将语言设置为中文，这样浏览器就不会弹出翻译弹框了。还可以给项目起个标题。