Vue3 起步

Vue CLI（Vue Command Line Interface）是 Vue.js 官方提供的项目脚手架工具，用于快速初始化和开发 Vue3 应用。它通过命令行界面提供开箱即用的现代化项目结构、预配置的 Webpack 环境以及热重载等功能。Vue CLI 支持一键创建并自定义 Vue3 项目结构，集成了 Vue3 的新特性如 Composition API 等，并允许无缝升级和管理项目依赖，极大地提升了开发者的工作效率。

安装脚手架

huo-l@tsd-huo-l:~/Work/learning$ npm install -g @vue/cli

安装完成后，你可以通过运行 vue --version 来验证 Vue CLI 是否正确安装

huo-l@tsd-huo-l:~/Work/learning$ vue --version
@vue/cli 5.0.8

初始化项目

使用 Vue CLI，你可以通过以下命令创建一个新的 Vue3 项目。请将 vue3-project 替换为你想要的项目名称

huo-l@tsd-huo-l:~/Work/learning$ vue create vue3-project

# 选择Vue版本
Vue CLI v5.0.8
? Please pick a preset:
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

# 选择包管理工具
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use PNPM
  Use NPM

# 创建成功
Vue CLI v5.0.8
✨  Creating project in /home/huo-l/Work/learning/vue3-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

🚀  Invoking generators...
📦  Installing additional dependencies...

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue3-project.
👉  Get started with the following commands:

 $ cd vue3-project
 $ pnpm run serve

查看目录结构

huo-l@tsd-huo-l:~/Work/learning/vue3-project$ tree -L 1
.
├── babel.config.js
├── jsconfig.json
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── public
├── README.md
├── src
└── vue.config.js

运行项目

# 启动服务命令
huo-l@tsd-huo-l:~/Work/learning/vue3-project$ pnpm serve

 DONE  Compiled successfully in 736ms                                                                                                                                                 3:46:29 PM


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.170.6.78:8080/

  Note that the development build is not optimized.
  To create a production build, run pnpm run build.

将启动本地开发服务器，地址：http://localhost:8080/

构建生产版本

huo-l@tsd-huo-l:~/Work/learning/vue3-project$ pnpm build

> vue3-project@0.1.0 build /home/huo-l/Work/learning/vue3-project
> vue-cli-service build

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠏  Building for production...

 DONE  Compiled successfully in 2587ms                                                                                                                                                3:54:37 PM

  File                                 Size                                                                       Gzipped

  dist/js/chunk-vendors.b4a66035.js    77.39 KiB                                                                  28.83 KiB
  dist/js/app.71186e3d.js              13.08 KiB                                                                  8.45 KiB
  dist/css/app.2cf79ad6.css            0.33 KiB                                                                   0.23 KiB

  Images and other types of assets omitted.
  Build at: 2024-03-12T07:54:37.892Z - Hash: e2444085b1816bc7 - Time: 2587ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

这将创建一个优化过的、用于生产环境的版本在你的项目目录下的 dist 文件夹中。将该文件夹部署到 web 服务器上，其他人就可以访问该服务。

以上，Vue3 项目初始化完毕。