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