Vue CLI 实际项目中的典型应用场景与案例分析
项目初始化与基础配置
在实际项目开发中，使用 Vue CLI 进行项目初始化是首要步骤。它为项目搭建了一个标准化的基础架构，使得开发者可以专注于业务逻辑的实现。
创建新项目
使用 Vue CLI 创建新项目非常简单。首先确保全局安装了 Vue CLI：
npm install -g @vue/cli
然后通过以下命令创建一个新项目：
vue create my - project
在创建过程中，Vue CLI 会提供一系列的选项，例如选择 Vue 版本、是否使用 TypeScript、选择需要的插件等。例如，如果选择手动配置项目，可以选择需要的特性，如 Babel、ESLint 等：
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, ESLint
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick an ESLint preset: Standard
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
这样就创建了一个包含 Babel 和 ESLint 配置的 Vue 2.x 项目。
配置文件
项目创建完成后，根目录下会生成 vue.config.js 文件（如果在创建项目时选择了相关配置），该文件用于对项目进行个性化配置。例如，修改项目的输出路径：
module.exports = {
outputDir: 'dist - my - project'
};
还可以配置代理，解决开发环境中的跨域问题。假设后端 API 地址为 http://api.example.com，可以在 vue.config.js 中配置如下：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
这样在前端代码中，发送到 /api 开头的请求都会被代理到 http://api.example.com，从而解决跨域问题。
多环境配置
在实际项目中，不同的环境（开发、测试、生产）可能需要不同的配置，Vue CLI 提供了很好的多环境配置支持。
环境变量文件
Vue CLI 使用以 .env 为前缀的文件来定义环境变量。常见的环境变量文件有：
.env: 所有环境都加载的环境变量。.env.development: 开发环境加载的环境变量。.env.production: 生产环境加载的环境变量。
例如，在 .env.development 文件中定义一个开发环境的 API 地址：
VUE_APP_API_URL = http://dev - api.example.com
在 .env.production 文件中定义生产环境的 API 地址：
VUE_APP_API_URL = http://api.example.com
在前端代码中，可以通过 process.env.VUE_APP_API_URL 来获取对应的 API 地址。例如在 src/api/index.js 文件中：
import axios from 'axios';
const api = axios.create({
baseURL: process.env.VUE_APP_API_URL
});
export default api;
这样在不同环境下，项目会自动使用对应的 API 地址，无需手动修改代码。
自定义环境
除了默认的开发和生产环境，还可以自定义环境。例如，创建一个测试环境，首先创建 .env.test 文件：
VUE_APP_API_URL = http://test - api.example.com
然后在 package.json 中添加一个脚本：
{
"scripts": {
"test:build": "vue - cli - service build --mode test"
}
}
这样通过 npm run test:build 命令就可以使用测试环境的配置进行项目构建。
插件集成
Vue CLI 使得插件集成变得非常方便，它可以帮助我们快速引入各种工具和库，提升开发效率。
ESLint 集成
前面在项目初始化时已经选择了 ESLint 插件。ESLint 可以帮助我们保持代码风格的一致性，提高代码质量。在项目根目录下的 .eslintrc.js 文件中，可以看到 ESLint 的配置。例如，配置代码风格为 Standard：
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard'],
parserOptions: {
parser: 'babel - eslint'
},
rules: {
'no - console': process.env.NODE_ENV === 'production'? 'warn' : 'off',
'no - debugger': process.env.NODE_ENV === 'production'? 'warn' : 'off'
}
};
在开发过程中，当保存文件时，ESLint 会自动检查代码是否符合配置的规则。如果不符合，会在终端输出错误信息，同时在编辑器中也会有相应的提示。
Prettier 集成
Prettier 是一个代码格式化工具，可以自动格式化代码，使其符合统一的风格。首先安装相关依赖：
npm install --save - dev prettier eslint - plugin - prettier eslint - config - prettier
然后在 .eslintrc.js 文件中添加 prettier 插件和配置：
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard', 'plugin:prettier/recommended'],
parserOptions: {
parser: 'babel - eslint'
},
rules: {
'no - console': process.env.NODE_ENV === 'production'? 'warn' : 'off',
'no - debugger': process.env.NODE_ENV === 'production'? 'warn' : 'off'
}
};
在 .prettierrc.js 文件中可以配置 Prettier 的格式化规则：
module.exports = {
semi: true,
singleQuote: true,
trailingComma: 'es5'
};
这样在保存文件时，ESLint 会先检查代码是否符合规则，然后 Prettier 会自动格式化代码。
组件库搭建与使用
在大型项目中，组件库的搭建可以提高代码的复用性和维护性。Vue CLI 可以帮助我们快速搭建和管理组件库。
创建组件库项目
使用 Vue CLI 创建一个专门用于组件库的项目：
vue create my - component - library
在项目中创建 components 目录，用于存放组件。例如，创建一个 Button 组件：
<template>
<button :class="['my - button', { 'is - primary': primary }]">{{ label }}</button>
</template>
<script>
export default {
name: 'MyButton',
props: {
label: {
type: String,
default: '按钮'
},
primary: {
type: Boolean,
default: false
}
}
};
</script>
<style scoped>
.my - button {
padding: 10px 20px;
border: none;
border - radius: 5px;
cursor: pointer;
}
.my - button.is - primary {
background - color: blue;
color: white;
}
</style>
发布组件库
为了让组件库可以在其他项目中使用，需要将其发布到 npm 仓库。首先在 package.json 文件中配置组件库的入口：
{
"main": "dist/my - component - library.umd.min.js",
"files": ["dist", "src/components"]
}
然后通过以下命令进行构建：
vue - cli - service build --target lib --name my - component - library src/components/MyButton.vue
构建完成后，在 dist 目录下会生成组件库的文件。将其发布到 npm 仓库：
npm publish
使用组件库
在其他 Vue 项目中使用该组件库，首先安装：
npm install my - component - library
然后在 main.js 文件中引入并注册组件库：
import Vue from 'vue';
import MyComponentLibrary from'my - component - library';
import'my - component - library/dist/my - component - library.css';
Vue.use(MyComponentLibrary);
new Vue({
render: h => h(App)
}).$mount('#app');
在模板中就可以使用 MyButton 组件了：
<template>
<div id="app">
<my - button label="自定义按钮" primary></my - button>
</div>
</template>
<script>
export default {
name: 'App'
};
</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 CLI 支持代码分割，通过 splitChunks 配置可以将代码按照一定规则进行分割，避免单个文件过大。在 vue.config.js 文件中配置如下：
module.exports = {
chainWebpack: config => {
config.optimization.splitChunks({
chunks: 'all',
minSize: 30000,
minChunks: 1,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
});
}
};
这样在构建时，会将来自 node_modules 的代码分割到 vendors 组，其他公共代码分割到 default 组，从而减少初始加载的文件大小。
压缩与优化
Vue CLI 在生产环境构建时会自动进行代码压缩。可以通过配置进一步优化压缩效果。例如，使用 terser - webpack - plugin 进行更精细的压缩配置：
const TerserPlugin = require('terser - webpack - plugin');
module.exports = {
configureWebpack: {
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
compress: {
drop_console: true
}
}
})
]
}
}
};
上述配置中，drop_console 选项会在压缩时移除所有的 console.log 语句，从而减小代码体积。
图片优化
对于项目中的图片，可以使用 image - webpack - loader 进行优化。首先安装：
npm install --save - dev image - webpack - loader
然后在 vue.config.js 文件中配置：
module.exports = {
chainWebpack: config => {
config.module.rule('images')
.use('image - webpack - loader')
.loader('image - webpack - loader')
.options({
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false
},
// the webp option will enable WEBP
webp: {
quality: 75
}
})
.end();
}
};
这样在构建时，图片会按照配置的规则进行压缩优化，减小图片文件大小，提高页面加载速度。
实际案例分析
电商项目案例
- 项目背景：这是一个面向消费者的电商平台，需要展示商品列表、商品详情、购物车、订单结算等功能。
- 使用 Vue CLI 的场景：
- 项目初始化：使用 Vue CLI 快速搭建项目基础架构，选择 Vue 2.x、Babel、ESLint 等必要的特性。
- 多环境配置：设置开发、测试、生产环境的 API 地址。在开发环境中，API 地址指向开发服务器；在测试环境中，指向测试服务器；在生产环境中，指向正式的生产服务器。
- 插件集成：集成 ESLint 和 Prettier 保证代码风格一致，同时集成 axios 用于 HTTP 请求。
- 组件库搭建：创建一些通用组件，如商品卡片组件、按钮组件等，方便在多个页面复用。
- 构建优化：通过代码分割将
node_modules中的代码和业务代码分开，减小初始加载文件大小。同时对图片进行优化，提高页面加载速度。
- 代码示例：
- 商品卡片组件：
<template>
<div class="product - card">
<img :src="product.imageUrl" alt="商品图片">
<div class="product - info">
<h3>{{ product.title }}</h3>
<p>{{ product.description }}</p>
<p class="price">价格: {{ product.price }}</p>
<button @click="addToCart(product)">加入购物车</button>
</div>
</div>
</template>
<script>
export default {
name: 'ProductCard',
props: {
product: {
type: Object,
required: true
}
},
methods: {
addToCart(product) {
// 调用购物车相关 API 将商品添加到购物车
this.$emit('add - to - cart', product);
}
}
};
</script>
<style scoped>
.product - card {
width: 300px;
border: 1px solid #ccc;
border - radius: 5px;
padding: 10px;
margin: 10px;
box - shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.product - card img {
width: 100%;
height: auto;
}
.product - info {
padding - top: 10px;
}
.price {
font - weight: bold;
color: red;
}
</style>
- **API 请求配置**：在 `src/api/index.js` 文件中：
import axios from 'axios';
const api = axios.create({
baseURL: process.env.VUE_APP_API_URL
});
export const getProducts = () => {
return api.get('/products');
};
export const addProductToCart = (productId) => {
return api.post('/cart', { productId });
};
后台管理系统案例
- 项目背景：用于企业内部的后台管理系统，包含用户管理、权限管理、数据统计等功能。
- 使用 Vue CLI 的场景：
- 项目初始化：同样使用 Vue CLI 快速搭建项目，选择 Vue 3.x、TypeScript、ESLint 等特性。
- 多环境配置：根据不同的环境配置数据库连接地址、日志级别等。
- 插件集成：除了 ESLint 和 Prettier，还集成了 Element Plus 组件库用于快速开发页面。
- 组件库搭建：开发一些自定义的组件，如权限控制组件，根据用户的权限显示或隐藏某些功能按钮。
- 构建优化：通过 Tree - shaking 技术去除未使用的代码，进一步减小包体积。同时优化 CSS，提取公共样式。
- 代码示例：
- 权限控制组件：
<template>
<template v - if="hasPermission">
<slot></slot>
</template>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
const permission = defineProps({
requiredPermission: {
type: String,
required: true
}
});
const hasPermission = computed(() => {
return userStore.permissions.includes(permission.requiredPermission);
});
</script>
- **使用权限控制组件**：
<template>
<div>
<PermissionControl requiredPermission="user:edit">
<button @click="editUser">编辑用户</button>
</PermissionControl>
</div>
</template>
<script setup lang="ts">
import PermissionControl from '@/components/PermissionControl.vue';
import { editUser as editUserApi } from '@/api/user';
const editUser = () => {
// 调用编辑用户 API
editUserApi();
};
</script>
通过以上典型应用场景和案例分析，可以看到 Vue CLI 在实际项目开发中发挥了重要作用，它帮助开发者快速搭建项目、管理环境配置、集成插件、优化构建等，大大提高了开发效率和项目质量。