vue cli 实现
Vue CLI 实现方法
Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速初始化和管理 Vue 项目。以下是使用 Vue CLI 实现项目的基本步骤和常见功能。
安装 Vue CLI
确保已安装 Node.js（建议版本 12+），然后通过 npm 或 yarn 全局安装 Vue CLI：
npm install -g @vue/cli
# 或
yarn global add @vue/cli验证安装是否成功：
vue --version创建新项目
通过以下命令创建新项目，按提示选择配置（如 Babel、Router、Vuex 等）：
vue create my-project进入项目目录：
cd my-project启动开发服务器
运行以下命令启动开发服务器，默认访问 http://localhost:8080：
npm run serve构建生产版本
生成优化后的生产版本文件，输出到 dist 目录：
npm run build添加插件或功能
通过 Vue CLI 添加官方或社区插件（如 Vue Router、Vuex）：
vue add router
vue add vuex配置修改
自定义项目配置（如 webpack、Babel）可通过 vue.config.js 文件实现：
module.exports = {
devServer: {
port: 3000,
},
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/styles/variables.scss";`,
},
},
},
};项目结构说明
典型 Vue CLI 生成的项目结构如下：
my-project/
├── node_modules/ # 依赖库
├── public/ # 静态资源（不经过 webpack 处理）
├── src/ # 主代码目录
│ ├── assets/ # 静态资源（经过 webpack 处理）
│ ├── components/ # 组件
│ ├── views/ # 页面级组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .gitignore # Git 忽略配置
├── package.json # 项目依赖和脚本
└── vue.config.js # 自定义配置集成其他工具
Vue CLI 支持与 TypeScript、单元测试（Jest）、E2E 测试（Cypress）等工具集成。创建项目时选择对应选项，或通过插件添加：
vue add typescript
vue add unit-jest
vue add e2e-cypress环境变量配置
在项目根目录创建 .env 文件定义环境变量，变量需以 VUE_APP_ 前缀命名：
VUE_APP_API_URL=https://api.example.com代码中通过 process.env.VUE_APP_API_URL 访问。
部署到生产环境
构建完成后，将 dist 目录内容部署到 Web 服务器（如 Nginx、Apache）。若需部署到 GitHub Pages 或 Netlify，可参考官方文档配置。
