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

好文链接

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。