Vue3：项目创建

Vue 3 相对于 Vue 2 带来了许多改进和优点，这些改进主要是为了提高性能、开发体验和可维护性。但是对于创建项目，Vue3也可以采用跟Vue2相同的方式。

使用CLI创建

1. 安装Vue CLI

首先，确保你已经安装了Node.js（建议使用LTS版本）。然后，在命令行工具中全局安装Vue CLI 4.5.0或以上版本，执行以下命令：

npm install -g @vue/cli

或者如果你使用Yarn，可以执行：

yarn global add @vue/cli

2. 检查Vue CLI版本

安装完成后，可以检查Vue CLI的版本，确认安装成功：

vue --version

3. 创建Vue 3项目

接下来，使用Vue CLI创建一个新的Vue 3项目。这里我们将手动选择特性以定制项目。在命令行中输入：

vue create my-vue3-project

当提示选择preset时，你可以选择Manually select features来定制你的项目。之后，你可以根据提示选择需要的特性，如Babel、TypeScript、Router、Vuex等。确保在选择Vue版本时，你选择了Vue 3。

4. 进入项目目录并安装依赖

创建完成后，进入项目目录：

cd my-vue3-project

然后，安装项目依赖（虽然在创建过程中大部分依赖已经被安装，但此步骤确保所有依赖都已就绪）：

npm install

5. 运行项目

最后，启动开发服务器，查看你的Vue 3应用：

npm run serve

此时，你的应用应该已经在浏览器中打开，默认地址通常是 http://localhost:8080/。

使用pnpm创建

Pnpm 是新一代的 nodejs 包管理工具。第一个 “P” 意为 Performance，代表着更佳的性能。

它的主要优点有两个，一是采用了 hard-link 机制，避免了包的重复安装，节省了空间，同时能提高项目依赖的安装速度。二是对 monorepo 的支持非常友好，只需要一条配置就能实现。Monorepo 是一种新的仓库管理方式。过去的项目，大多采用一个仓库维护一个项目的方案。对于一个庞大复杂的项目，哪怕只进行一处小小的修改，影响的也是整体。而采用 monorepo 的形式，我们可以在一个仓库中管理多个包。每个包都可以单独发布和使用，就好像是一个仓库中又有若干个小仓库。

1. 安装pnpm

首先，全局安装pnpm，如果你还没有安装的话：

npm install -g pnpm

注：Node.js至少v16.14！！！

2. 创建Vue 3项目

pnpm create vue

会提示你给项目命名：?Project name ，默认为vue-project。然后允许你定制你的项目，可以根据提示选择需要的特性，如TS、JSX、Router、Pinia、Vitest、ESLint、Prettier等。

3. 进入项目目录并安装依赖

然后需要进入新创建的Vue 3应用目录：

cd vue-project
pnpm install

4. 运行项目

安装依赖后，你可以像使用npm或yarn一样运行Vue应用：

pnpm dev