创建一个新的Vue 3项目可以通过多种方式,以下是基于Vue CLI(命令行界面)和Vue官方新的脚手架工具create-vue的详细步骤。
使用Vue CLI创建Vue 3项目
- 安装Vue CLI:
- 确保你已经安装了Node.js(建议使用LTS版本)。
- 在命令行工具中全局安装Vue CLI 4.5.0或以上版本,执行以下命令:
bash复制代码
或者如果你使用Yarn,可以执行:npm install -g @vue/cli
bash复制代码
yarn global add @vue/cli
- 检查Vue CLI版本:
- 安装完成后,可以检查Vue CLI的版本,确认安装成功:
bash复制代码
vue --version
- 安装完成后,可以检查Vue CLI的版本,确认安装成功:
- 创建Vue 3项目:
- 使用Vue CLI创建一个新的Vue 3项目。在命令行中输入:
bash复制代码
vue create my-vue3-project
- 当提示选择preset时,选择
Manually select features
来定制你的项目。 - 根据提示选择需要的特性,如Babel、TypeScript、Router、Vuex等。确保在选择Vue版本时,你选择了Vue 3。
- 使用Vue CLI创建一个新的Vue 3项目。在命令行中输入:
- 进入项目目录并安装依赖:
- 创建完成后,进入项目目录:
bash复制代码
cd my-vue3-project
- 安装项目依赖(虽然在创建过程中大部分依赖已经被安装,但此步骤确保所有依赖都已就绪):
bash复制代码
npm install
- 创建完成后,进入项目目录:
- 运行项目:
- 启动开发服务器,查看你的Vue 3应用:
bash复制代码
npm run serve
- 此时,你的应用应该已经在浏览器中打开,默认地址通常是
http://localhost:8080/
。
- 启动开发服务器,查看你的Vue 3应用:
使用create-vue创建Vue 3项目(底层基于Vite)
create-vue是Vue官方新的脚手架工具,底层切换到了Vite(下一代前端工具链),为开发提供极速响应。
-
安装create-vue(如果尚未全局安装):
bash复制代码
npm install -g create-vue
-
创建Vue 3项目:
- 在命令行中输入:
bash复制代码
create-vue my-vue3-project
- 根据提示选择配置或接受默认配置。
- 在命令行中输入:
-
进入项目目录并安装依赖:
- 类似于Vue CLI的步骤,使用
cd
命令进入项目目录,并执行npm install
或yarn
(如果项目中配置了yarn)来安装依赖。
- 类似于Vue CLI的步骤,使用
-
运行项目:
- 启动开发服务器,查看你的Vue 3应用:
bash复制代码
npm run dev
- 或如果使用yarn:
bash复制代码
yarn dev
- 此时,你的应用应该已经在浏览器中打开,默认地址通常是
http://localhost:3000/
(Vite的默认端口)。
- 启动开发服务器,查看你的Vue 3应用:
注意事项
- 在创建项目时,注意选择正确的Vue版本(确保选择Vue 3)。
- 如果你使用特定的npm镜像(如淘宝npm镜像),并且遇到证书过期等问题,可以考虑切换到官方npm镜像或更新npm配置。
- 在使用
--force
参数时要特别小心,因为它会绕过npm提供的一些安全或保护机制。