vue cli 实现

Vue CLI 是 Vue.js 官方提供的标准脚手架工具，用于快速搭建 Vue 项目。以下是基于 Vue CLI 实现项目开发的详细方法：

安装 Vue CLI

确保已安装 Node.js（建议版本 ≥16.0），通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli
# 或
yarn global add @vue/cli

创建新项目

使用命令行初始化项目模板，按提示选择配置（如 Babel、Router、Vuex 等）：

vue create my-project

启动开发服务器

进入项目目录并运行开发模式，支持热重载：

cd my-project
npm run serve

项目结构说明

关键目录及文件作用：

• src/main.js：应用入口文件，初始化 Vue 实例
• src/App.vue：根组件
• src/components/：存放可复用组件
• public/index.html：HTML 模板文件

添加插件或依赖

通过 Vue CLI 扩展功能（如添加 Vuex、Axios）：

vue add vuex
# 或手动安装
npm install axios

构建生产环境代码

生成优化后的静态文件，输出至 dist 目录：

npm run build

配置覆盖

创建 vue.config.js 文件自定义 Webpack 配置（如代理、别名等）：

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  }
}

注意事项

• 使用单文件组件（.vue）时需遵循 <template>、<script>、<style> 的模块化结构
• 通过 npm update @vue/cli 定期更新工具版本
• 如需迁移旧项目，可使用 vue upgrade 命令