爬一手好线杆1. 为什么需要Vue脚手架？
作为一名2016年就开始使用Vue的前端开发者，我清楚地记得早期手动搭建Vue项目的痛苦过程。当时需要手动配置webpack、babel、eslint等工具链，一个简单的项目初始化就要耗费大半天时间。直到Vue CLI（俗称Vue脚手架）的出现，才彻底改变了这种局面。
Vue脚手架本质上是一个标准化项目生成器，它解决了以下几个核心痛点：
- 环境配置复杂：现代前端开发需要webpack、Babel、PostCSS、ESLint等众多工具的协同工作，手动配置极易出错
- 项目结构混乱：新手常因缺乏经验导致目录结构不合理，为后期维护埋下隐患
- 开发效率低下：重复搭建相似项目结构浪费大量时间
- 最佳实践缺失：团队项目难以保证统一的代码质量和工程规范
提示：Vue CLI 3.0+版本采用了"插件化"架构，这使得它比早期版本更加灵活和强大。这也是为什么现在几乎所有Vue项目都推荐使用脚手架创建。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备与安装
2.1 Node.js环境配置
Vue脚手架运行在Node.js环境上，因此首先需要安装Node.js。这里有几个关键注意事项：
-
版本选择：
- 推荐使用LTS版本（目前是18.x）
- 避免使用最新奇数版本，可能存在兼容性问题
- 可通过
node -v和npm -v验证安装
-
npm源优化：
bash复制# 设置淘宝镜像源 npm config set registry https://registry.npmmirror.com # 验证配置 npm config get registry -
权限问题处理：
- 在Linux/Mac下建议使用nvm管理Node版本
- Windows用户安装时不要使用默认路径（避免Program Files的权限问题）
2.2 Vue CLI安装详解
全局安装Vue CLI（现在官方推荐使用@vue/cli而不是vue-cli）：
bash复制npm install -g @vue/cli
# 或使用yarn
yarn global add @vue/cli
安装后验证版本：
bash复制vue --version
常见问题：如果出现"'vue'不是内部或外部命令"，通常是环境变量未正确配置。解决方案：
- 找到npm全局安装路径（npm config get prefix）
- 将该路径添加到系统环境变量PATH中
- 重新打开终端
3. 项目创建全流程
3.1 初始化新项目
使用以下命令创建项目：
bash复制vue create my-project
你会看到交互式命令行界面，这里有几个关键选择：
-
Preset选择：
- Default ([Vue 3] babel, eslint)
- Default ([Vue 2] babel, eslint)
- Manually select features（推荐）
-
功能选择（手动模式时）：
- Babel（必选）
- TypeScript（根据项目需求）
- Router（单页应用需要）
- Vuex（状态管理）
- CSS Pre-processors（推荐Sass/SCSS）
- Linter/Formatter（团队项目必选）
- Unit Testing（可选Jest）
- E2E Testing（可选Cypress）
-
配置选择：
- 选择Vue版本（2.x或3.x）
- 路由模式（history或hash）
- CSS预处理器类型
- ESLint配置（推荐Standard）
- 何时进行lint（推荐保存时）
- 测试方案
- 配置文件位置（推荐独立文件）
3.2 项目结构解析
创建完成后的标准目录结构：
code复制my-project/
├── node_modules/ # 依赖库
├── public/ # 静态资源
│ ├── favicon.ico
│ └── index.html # 入口HTML
├── src/ # 源代码
│ ├── assets/ # 静态资源
│ ├── components/ # 组件
│ ├── router/ # 路由（如果选择了）
│ ├── store/ # Vuex（如果选择了）
│ ├── views/ # 页面级组件
│ ├── App.vue # 根组件
│ └── main.js # 入口JS
├── .gitignore # Git忽略配置
├── babel.config.js # Babel配置
├── package.json # 项目配置
└── README.md # 项目说明
3.3 启动开发服务器
进入项目目录并启动：
bash复制cd my-project
npm run serve
启动后，开发服务器通常会运行在http://localhost:8080。现代Vue CLI项目支持：
- 热重载（保存自动刷新）
- 错误覆盖层（编译错误直接显示在页面上）
- ES6+语法支持
- 环境变量管理
- CSS自动前缀
4. 高级配置与优化
4.1 vue.config.js详解
虽然Vue CLI已经提供了合理的默认配置，但有时我们需要自定义webpack配置。这时可以在项目根目录创建vue.config.js文件：
javascript复制module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
// 输出目录
outputDir: 'dist',
// 静态资源目录
assetsDir: 'static',
// 是否启用eslint保存检测
lintOnSave: process.env.NODE_ENV !== 'production',
// webpack配置
configureWebpack: {
// 简单/基础配置，会与默认配置合并
plugins: []
},
// 链式配置(更灵活)
chainWebpack: (config) => {
// 修改loader选项
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
// 修改选项...
return options
})
},
// 生产环境sourceMap
productionSourceMap: false,
// CSS相关配置
css: {
// 是否提取CSS到单独文件
extract: true,
// 开启CSS source maps?
sourceMap: false,
// CSS预设器配置
loaderOptions: {
sass: {
// 向所有Sass样式传入共享的全局变量
additionalData: `@import "@/styles/variables.scss";`
}
}
},
// 开发服务器配置
devServer: {
open: true, // 自动打开浏览器
host: '0.0.0.0', // 允许外部访问
port: 8080,
proxy: {
'/api': {
target: 'http://your-api-server.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
4.2 环境变量管理
Vue CLI支持使用.env文件来管理环境变量：
.env- 所有环境都会加载.env.development- 开发环境.env.production- 生产环境
变量命名必须以VUE_APP_开头：
code复制VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=true
在代码中访问：
javascript复制console.log(process.env.VUE_APP_API_URL)
4.3 性能优化实践
-
代码分割：
javascript复制// 路由懒加载 const Home = () => import('./views/Home.vue') -
依赖优化：
javascript复制// vue.config.js module.exports = { configureWebpack: { externals: { // 将大库外部化 'element-ui': 'ELEMENT' } } } -
Gzip压缩：
安装插件：bash复制
npm install --save-dev compression-webpack-plugin配置：
javascript复制// vue.config.js const CompressionPlugin = require('compression-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new CompressionPlugin() ] } } -
图片优化：
- 使用WebP格式
- 实施懒加载
- 使用CDN托管静态资源
5. 常见问题与解决方案
5.1 安装依赖失败
问题现象：
- npm install时报错
- 依赖版本冲突
- 网络超时
解决方案：
- 清除缓存后重试：
bash复制npm cache clean --force rm -rf node_modules package-lock.json npm install - 使用yarn替代npm
- 检查node版本是否符合要求
- 尝试删除package-lock.json后重新安装
5.2 ESLint报错处理
常见错误：
- 缺少分号
- 使用了未定义的变量
- 组件命名不规范
解决方案：
- 临时禁用规则：
javascript复制/* eslint-disable-next-line no-console */ console.log('test') - 修改.eslintrc.js配置文件
- 使用--no-lint参数启动（不推荐）：
bash复制
npm run serve -- --no-lint
5.3 路由配置问题
常见问题：
- 路由跳转后页面空白
- 路由参数获取不到
- 嵌套路由不生效
解决方案：
- 确保正确安装vue-router：
bash复制
npm install vue-router - 检查路由配置：
javascript复制const routes = [ { path: '/user/:id', component: User, props: true // 将路由参数作为props传递 } ] - 使用命名视图处理复杂布局
5.4 跨域问题处理
解决方案：
- 开发环境配置代理：
javascript复制// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } } - 生产环境配置Nginx反向代理
- 后端设置CORS头
6. 插件系统与扩展
Vue CLI的强大之处在于其插件系统。官方和社区提供了大量插件来扩展功能：
6.1 常用官方插件
- @vue/cli-plugin-babel - Babel转译支持
- @vue/cli-plugin-router - Vue Router集成
- @vue/cli-plugin-vuex - Vuex状态管理
- @vue/cli-plugin-eslint - ESLint集成
- @vue/cli-plugin-typescript - TypeScript支持
6.2 社区优秀插件
- vue-cli-plugin-element - Element UI集成
- vue-cli-plugin-vuetify - Vuetify Material框架
- vue-cli-plugin-electron-builder - Electron桌面应用
- vue-cli-plugin-pwa - PWA支持
- vue-cli-plugin-apollo - Apollo GraphQL集成
6.3 插件管理命令
bash复制# 添加插件
vue add @vue/cli-plugin-eslint
# 查看已安装插件
vue inspect --plugins
# 升级插件
npm update @vue/cli-plugin-*
7. 项目构建与部署
7.1 构建生产版本
bash复制npm run build
构建完成后会在dist目录生成：
- 压缩后的JS/CSS
- 自动生成的HTML文件
- 处理过的静态资源
7.2 部署到不同环境
-
静态服务器：
- 直接将dist目录内容上传
- 配置基础路径（publicPath）
-
Node.js服务器：
javascript复制const express = require('express') const path = require('path') const app = express() app.use(express.static(path.join(__dirname, 'dist'))) app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')) }) app.listen(3000) -
Docker部署：
dockerfile复制# 构建阶段 FROM node:14 as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 生产阶段 FROM nginx:stable-alpine as production-stage COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
7.3 自动化部署
结合CI/CD工具实现自动化部署：
-
GitHub Actions示例：
yaml复制name: Deploy to Production on: push: branches: [ main ] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Install dependencies run: npm install - name: Build project run: npm run build - name: Deploy to server uses: easingthemes/ssh-deploy@v2.1.5 with: SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} SOURCE: "dist/" REMOTE_HOST: ${{ secrets.REMOTE_HOST }} REMOTE_USER: ${{ secrets.REMOTE_USER }} TARGET: "/var/www/html" -
Jenkins配置要点：
- 添加NodeJS插件
- 配置Git仓库
- 添加构建步骤（npm install && npm run build）
- 配置部署步骤（SSH或FTP传输）
8. 从Vue 2迁移到Vue 3
随着Vue 3的普及，许多项目需要考虑迁移。Vue CLI提供了相对平滑的迁移路径：
8.1 迁移步骤
-
升级Vue CLI到最新版：
bash复制
npm update -g @vue/cli -
在项目中升级Vue相关依赖：
bash复制
vue upgrade -
手动解决破坏性变更：
- 事件API变化（$on, $off移除）
- v-model语法变更
- 插槽语法变更
- 生命周期钩子名称变更
-
逐步迁移组件：
- 使用兼容构建（vue/compat）
- 逐个组件迁移
8.2 常见兼容问题
-
全局API变更：
javascript复制// Vue 2 Vue.prototype.$http = axios // Vue 3 const app = createApp(App) app.config.globalProperties.$http = axios -
过滤器移除：
javascript复制// 替代方案：使用方法或计算属性 -
v-model变化：
html复制<!-- Vue 2 --> <ChildComponent v-model="pageTitle" /> <!-- Vue 3 --> <ChildComponent v-model:title="pageTitle" />
8.3 组合式API实践
Vue 3引入了组合式API，这是对选项式API的重大改进：
javascript复制import { ref, computed, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
onMounted(() => {
console.log('component mounted')
})
return {
count,
doubleCount,
increment
}
}
}
9. 企业级项目实践
9.1 目录结构优化
对于大型项目，推荐采用领域驱动设计(DDD)的目录结构：
code复制src/
├── assets/ # 静态资源
├── components/ # 通用组件
│ ├── ui/ # 纯UI组件
│ └── business/ # 业务组件
├── composables/ # 组合式函数
├── constants/ # 常量定义
├── directives/ # 自定义指令
├── hooks/ # 自定义hooks
├── layouts/ # 布局组件
├── plugins/ # Vue插件
├── router/ # 路由配置
├── services/ # API服务层
├── stores/ # 状态管理
├── styles/ # 全局样式
├── types/ # TypeScript类型
├── utils/ # 工具函数
└── views/ # 页面组件
9.2 状态管理进阶
对于复杂状态管理，推荐使用Pinia（Vue官方推荐的状态管理库）：
-
安装：
bash复制
npm install pinia -
创建store：
javascript复制// stores/counter.js import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } }, getters: { doubleCount: (state) => state.count * 2 } }) -
在组件中使用：
javascript复制import { useCounterStore } from '@/stores/counter' export default { setup() { const counter = useCounterStore() return { counter } } }
9.3 微前端集成
使用qiankun等微前端框架集成Vue项目：
-
主应用配置：
javascript复制import { registerMicroApps, start } from 'qiankun' registerMicroApps([ { name: 'vue-app', entry: '//localhost:7101', container: '#subapp-container', activeRule: '/vue' } ]) start() -
子应用配置（vue.config.js）：
javascript复制module.exports = { devServer: { port: 7101, headers: { 'Access-Control-Allow-Origin': '*' } }, configureWebpack: { output: { library: 'vueApp', libraryTarget: 'umd' } } } -
子应用入口改造：
javascript复制let instance = null function render(props = {}) { const { container } = props instance = new Vue({ router, store, render: h => h(App) }).$mount(container ? container.querySelector('#app') : '#app') } // 独立运行时 if (!window.__POWERED_BY_QIANKUN__) { render() } export async function bootstrap() { console.log('vue app bootstraped') } export async function mount(props) { render(props) } export async function unmount() { instance.$destroy() instance = null }
10. 性能监控与优化
10.1 性能指标监控
-
使用web-vitals库监控核心Web指标：
javascript复制import { getCLS, getFID, getLCP } from 'web-vitals' getCLS(console.log) getFID(console.log) getLCP(console.log) -
集成Sentry错误监控：
javascript复制import * as Sentry from '@sentry/vue' import { Integrations } from '@sentry/tracing' Sentry.init({ dsn: 'your-dsn-here', integrations: [ new Integrations.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ['localhost', 'your-domain.com'] }) ], tracesSampleRate: 1.0 })
10.2 运行时性能优化
-
虚拟滚动优化长列表：
html复制<template> <RecycleScroller class="scroller" :items="items" :item-size="50" key-field="id" v-slot="{ item }" > <div class="item"> {{ item.name }} </div> </RecycleScroller> </template> <script> import { RecycleScroller } from 'vue-virtual-scroller' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' export default { components: { RecycleScroller }, data() { return { items: [] // 大数据数组 } } } </script> -
使用v-once优化静态内容：
html复制<div v-once> <h1>静态标题</h1> <p>这段内容永远不会改变</p> </div> -
合理使用计算属性缓存：
javascript复制computed: { filteredList() { // 只有当依赖项变化时才会重新计算 return this.list.filter(item => item.active) } }
10.3 构建时优化
-
分析构建体积：
bash复制
npm run build -- --report -
配置splitChunks：
javascript复制// vue.config.js module.exports = { configureWebpack: { optimization: { splitChunks: { chunks: 'all', maxSize: 244 * 1024 // 244KB } } } } -
使用动态导入：
javascript复制const Login = () => import(/* webpackChunkName: "login" */ './views/Login.vue')
11. 测试策略与实践
11.1 单元测试配置
Vue CLI默认支持Jest作为单元测试框架：
-
编写测试用例：
javascript复制import { mount } from '@vue/test-utils' import Counter from '@/components/Counter.vue' describe('Counter.vue', () => { it('increments count when button is clicked', async () => { const wrapper = mount(Counter) await wrapper.find('button').trigger('click') expect(wrapper.find('span').text()).toContain('1') }) }) -
运行测试：
bash复制npm run test:unit
11.2 E2E测试配置
推荐使用Cypress进行端到端测试：
-
安装：
bash复制
vue add @vue/cli-plugin-e2e-cypress -
编写测试：
javascript复制describe('My First Test', () => { it('Visits the app root url', () => { cy.visit('/') cy.contains('h1', 'Welcome to Your Vue.js App') }) }) -
运行测试：
bash复制npm run test:e2e
11.3 组件测试最佳实践
-
测试组件props：
javascript复制it('renders props.msg when passed', () => { const msg = 'new message' const wrapper = mount(Component, { propsData: { msg } }) expect(wrapper.text()).toMatch(msg) }) -
测试事件发射：
javascript复制it('emits an event when clicked', () => { const wrapper = mount(Component) wrapper.find('button').trigger('click') expect(wrapper.emitted().myEvent).toBeTruthy() }) -
测试异步行为：
javascript复制it('updates text after async operation', async () => { const wrapper = mount(AsyncComponent) await wrapper.vm.$nextTick() expect(wrapper.text()).toContain('Updated') })
12. 样式管理方案
12.1 CSS预处理器选择
Vue CLI支持多种CSS预处理器：
-
Sass/SCSS（推荐）：
bash复制
npm install -D sass-loader node-sass -
Less：
bash复制
npm install -D less less-loader -
Stylus：
bash复制
npm install -D stylus stylus-loader
12.2 CSS Modules配置
在vue.config.js中启用：
javascript复制module.exports = {
css: {
loaderOptions: {
css: {
modules: {
auto: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
}
}
}
使用方式：
html复制<template>
<div :class="$style.red">Text</div>
</template>
<style module>
.red {
color: red;
}
</style>
12.3 样式作用域控制
-
Scoped CSS：
html复制<style scoped> .red { color: red; } </style> -
深度选择器：
html复制<style scoped> /* 使用::v-deep或/deep/或>>> */ ::v-deep .child-component { color: red; } </style> -
全局样式与局部样式结合：
html复制<style> /* 全局样式 */ </style> <style scoped> /* 组件局部样式 */ </style>
13. 国际化方案实现
13.1 vue-i18n集成
-
安装：
bash复制
npm install vue-i18n -
配置：
javascript复制import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'en', messages: { en: { greeting: 'Hello!' }, zh: { greeting: '你好！' } } }) app.use(i18n) -
使用：
html复制<template> <p>{{ $t('greeting') }}</p> </template>
13.2 按需加载语言包
javascript复制// i18n.js
export function loadLocaleMessages() {
const locales = require.context(
'./locales',
true,
/[A-Za-z0-9-_,\s]+\.json$/i
)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
13.3 路由与国际化结合
javascript复制// router.js
router.beforeEach((to, from, next) => {
const locale = to.params.locale
if (!availableLocales.includes(locale)) {
return next(`/en${to.fullPath}`)
}
if (i18n.locale !== locale) {
loadLocaleMessages(locale).then(() => {
i18n.locale = locale
next()
})
} else {
next()
}
})
14. 安全最佳实践
14.1 常见安全风险
-
XSS攻击防护：
- 使用v-html时要谨慎
- 对用户输入进行转义
- 设置Content Security Policy
-
CSRF防护：
- 使用axios的CSRF token支持
- 确保敏感操作需要二次验证
-
依赖安全：
- 定期运行
npm audit - 使用Snyk监控依赖漏洞
- 定期运行
14.2 安全配置示例
-
CSP配置（vue.config.js）：
javascript复制module.exports = { devServer: { headers: { "Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-inline'" } } } -
安全HTTP头配置：
javascript复制// 生产服务器配置 app.use(helmet()) -
敏感信息保护：
javascript复制// 使用环境变量而非硬编码 const apiKey = process.env.VUE_APP_API_KEY
14.3 安全审计工具
- 使用vue-cli-service inspect检查webpack配置
- 运行npm audit检查依赖漏洞
- 使用OWASP ZAP进行渗透测试
- Lighthouse安全审计
15. 移动端适配方案
15.1 响应式布局
- 使用flex/grid布局
- 配置viewport meta：
html复制<meta name="viewport" content="width=device-width,initial-scale=1.0"> - 媒体查询断点：
scss复制@media (max-width: 768px) { .container { padding: 10px; } }
15.2 REM适配方案
-
安装postcss-pxtorem：
bash复制
npm install postcss-pxtorem -D -
配置（postcss.config.js）：
javascript复制module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, propList: ['*'] } } } -
动态设置根字体大小：
javascript复制// main.js function setRem() { const docEl = document.documentElement const width = docEl.clientWidth docEl.style.fontSize = width / 10 + 'px' } window.addEventListener('resize', setRem) setRem()
15.3 移动端组件库
-
Vant（推荐）：
bash复制
npm install vant -
配置按需加载：
javascript复制// babel.config.js module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] } -
使用示例：
html复制<template> <van-button type="primary">按钮</van-button> </template> <script> import { Button } from 'vant' export default { components: { [Button.name]: Button } } </script>
16. 服务端渲染(SSR)方案
16.1 Nuxt.js集成
Nuxt.js是Vue生态中最流行的SSR框架：
-
创建项目：
bash复制
npx create-nuxt-app my-project -
目录结构：
code复制├── assets/ # 未编译资源 ├── components/ # Vue组件 ├── layouts/ # 布局 ├── middleware/ # 中间件 ├── pages/ # 路由页面 ├── plugins/ # 插件 ├── static/ # 静态文件 └── store/ # Vuex -
部署：
bash复制
npm run build npm run start
16.2 自定义SSR实现
-
安装依赖：
bash复制
npm install @vue/server-renderer express -
服务端入口：
javascript复制// server.js const express = require('express') const { createSSRApp } = require('vue') const { renderToString } = require('@vue/server-renderer') const server = express() server.get('*', async (req, res) => { const app = createSSRApp({ template: `<div>Hello SSR</div>` }) const html = await renderToString(app) res.send(` <!DOCTYPE html> <html> <head><title>SSR App</title></head> <body>${html}</body> </html> `) }) server.listen(3000) -
客户端激活：
javascript复制// client.js import { createApp } from 'vue' const app = createApp({ template: `<div>Hello SSR</div>` }) app.mount('#app')
17. 桌面应用开发
17.1 Electron集成
-
使用vue-cli-plugin-electron-builder：
bash复制
vue add electron-builder -
项目结构变化：
code复制├── src/ │ ├── background.js # Electron主进程 │ └── main.js # Vue应用入口 -
开发命令：
bash复制
npm run electron:serve npm run electron:build
17.2 主进程与渲染进程通信
-
主进程（background.js）：
javascript复制import { ipcMain } from 'electron' ipcMain.handle('get-data', async () => { return 'data from main process' }) -
渲染进程（Vue组件）：
javascript复制import { ipcRenderer } from 'electron' export default { async mounted() { const data = await ipcRenderer.invoke('get-data') console.log(data) } }
17.3 打包与分发
-
配置（vue.config.js）：
javascript复制module.exports = { pluginOptions: { electronBuilder: { builderOptions: { appId: 'com.example.app', win: { target: 'nsis' }, mac: { target: 'dmg' }, linux: { target: 'AppImage' } } } } } -
构建命令：
bash复制
npm run electron:build -
构建产物：
- Windows: .exe安装包
- macOS: .dmg镜像
- Linux: .AppImage
18. 可视化与3D开发
18.1 ECharts集成
-
安装：
bash复制
npm install echarts vue-echarts -
全局注册：
javascript复制import ECharts from 'vue-echarts' import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { BarChart } from 'echarts/charts' import { GridComponent, TooltipComponent } from 'echarts/components' use([ CanvasRenderer, BarChart, GridComponent, TooltipComponent ]) app.component('v-chart', ECharts) -
使用示例：
html复制<template> <v-chart :option="chartOptions" /> </template> <script> export default { data() { return { chartOptions: { xAxis: { type: