Vue3 项目搭建指南：从零开始快速入门

Vue3 项目搭建指南：从零开始轻松上手

搭建 Vue3 项目

踏入 Vue3 的精彩世界之前，确保你的计算机已安装 Node.js 和 npm。准备好后，让我们开始吧！

通过 create-vue 搭建 Vue3 项目

create-vue 是搭建 Vue3 项目的快捷方式。只需打开终端，导航到项目目录，然后运行：

npx create-vue my-project

按照提示选择模板和选项，然后安装项目依赖项：

cd my-project
npm install

最后，启动项目：

npm run serve

利用 Vite 搭建 Vue3 项目

Vite 是一款现代化的构建工具，可简化 Vue3 项目的构建。在终端中，前往项目目录并运行：

npx vite init my-project

选择模板和选项，安装依赖项：

cd my-project
npm install

启动项目：

npm run dev

Vite + Vue 项目的优势

Vite + Vue 结合了两者的优势，提供快速的构建和卓越的 Vue3 开发体验。要创建这样的项目，请运行：

npx @vitejs/create-app my-project --template vue

按照提示操作，安装依赖项，然后启动项目：

npm run dev

Vite + Vue 项目目录结构

一个典型的 Vite + Vue 项目目录结构如下：

my-project
├── node_modules
├── package.json
├── package-lock.json
├── src
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── .gitignore
├── .prettierrc
├── README.md
└── vite.config.js

Vite.config.ts 配置

Vite.config.ts 是 Vite 项目的配置文件。默认配置如下：

export default defineConfig({
  plugins: [],
  server: {
    host: 'localhost',
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    sourcemap: true,
    minify: false,
  },
});

可根据需要修改此文件，例如，更改服务器地址和端口。

常见问题解答

• 如何更新 Vue3 版本？
  使用 npm：npm install -g @vue/cli

• 如何配置路由？
  在 src/router.js 中定义路由规则。

• 如何使用 TypeScript？
  在 Vite 项目中，安装 @vitejs/plugin-vue-jsx 和 typescript，然后在 vite.config.ts 中启用 TypeScript 支持。

• 如何部署 Vue3 项目？
  使用 Vite 的 npm run build 命令构建项目，然后部署到服务器。

• 有哪些 Vue3 资源可用？
  查阅 Vue3 文档和社区论坛以获取更多支持。

踏上 Vue3 开发之旅，享受其强大的功能和无缝的体验。无论你选择哪种搭建方法，你都能轻松创建令人惊叹的 Vue3 项目！