首页> 基础笔记 >Vue学习笔记 Vue学习笔记

使用node命令创建vue应用项目

作者:小萝卜 2024-03-08 浏览 83

简介前提条件 熟悉命令行 已安装 18.0 或更高版本的 Node.js

前提条件

  • 熟悉命令行

  • 已安装 18.0 或更高版本的 Node.js

      在本节中,我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置,并允许我们使用 Vue 的单文件组件 (SFC)。

      确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

#npm命令
npm create vue@latest

#pnpm
pnpm create vue@latest

#yarn 需要安装yarn依赖
yarn create vue@latest

#bun
bun create vue@latest
      这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
      如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
cd <your-project-name>
#npm
npm install
npm run dev

#pnpm
pnpm install
pnpm run dev

#yarn
npm install
yarn dev

#bun
bun install
bun run dev

      你现在应该已经运行起来了你的第一个 Vue 项目!请注意,生成的项目中的示例组件使用的是组合式 API 和 <script setup>,而非选项式 API。下面是一些补充提示:

  • 推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。如果使用其他编辑器,参考 IDE 支持章节。
  • 更多工具细节,包括与后端框架的整合,我们会在工具链指南进行讨论。
  • 要了解构建工具 Vite 更多背后的细节,请查看 Vite 文档。
  • 如果你选择使用 TypeScript,请阅读 TypeScript 使用指南。

      当你准备将应用发布到生产环境时,请运行:

#npm
npm run build

#pnpm
npm run build

#yarn
yarn build

#bun
bun run build

      此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。关于将应用上线生产环境的更多内容,请阅读生产环境部署指南。

很赞哦! (0)

相关文章

文章评论

    高端网站建设