选择 "Manually select features": 可以选择包含 Vue Router 和视图组件。

• 安裝

npm install -g @vue/cli       # 安裝 Vue Cli

npm install element-plus      # 安裝 Element UI , for Vue3

• 創建 vue cli 專案

vue create my-project

• 啟動 serve

npm run serve   //適合開發 vue.js 應用，支持熱重載。

npx http-server  //簡單查看靜態文件或簡單項目，無需配置。

• 插入基本 html 元件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <button @click="handleClick">点击我</button>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue CLI 是一个强大的工具，用于快速创建和管理 Vue.js 应用程序。它提供了一种现代的前端开发体验，使得开发者能够轻松搭建、配置和管理项目。

• 项目生成：使用模板快速生成新的 Vue.js 项目，配置好基本结构和依赖。

• 插件系统：支持各种插件，可以在项目中轻松添加功能，比如路由、状态管理、CSS 预处理器等。

• 开发服务器：内置开发服务器，支持热重载，提升开发效率。

• 构建工具：提供生产环境构建配置，自动优化代码和资源。

• 配置选项：支持通过 vue.config.js 自定义项目配置。

在全局安装 Vue CLI：

npm install -g @vue/cli

使用 Vue CLI 创建新项目：

vue create my-project

在创建过程中，CLI 会询问你一些配置选项，比如选择预设（默认或手动选择特性）。

进入项目目录并启动开发服务器：

cd my-project
npm run serve

这会在本地启动一个开发服务器，通常是 http://localhost:8080，你可以在浏览器中访问。

使用 Vue CLI 可以方便地添加插件，比如 Vue Router 或 Vuex：(專案目錄下)

vue add router

这会自动安装并配置相关依赖。

当你准备将项目部署到生产环境时，可以运行：

npm run build

这会生成一个优化后的生产构建版本，通常在 dist 目录中。

• node_modules/：存放项目依赖的目录。
• public/：包含静态文件，index.html 是应用的入口文件。
• src/：存放源代码的目录。
  • assets/：存放静态资源，如图片和样式。
  • components/：存放可复用的 Vue 组件。
  • router/：存放路由配置文件。
  • store/：存放 Vuex 状态管理的配置文件。
  • views/：存放视图组件，通常与路由对应。
  • App.vue：根组件。
  • main.js：应用的入口文件，初始化 Vue 实例。
• .env：用于环境变量配置。
• .gitignore：指定 Git 忽略的文件。
• babel.config.js：Babel 的配置文件。
• package.json：项目的元数据和依赖列表。
• README.md：项目的说明文档。
• vue.config.js：Vue CLI 的配置文件。