★ FEATURED ARTICLE 用了这么多年Vue我见过太多人在环境这一步就栽了跟头。命令行窗口里一堆报错英文提示看不懂依赖版本对不上装了半天连vue create都跑不起来。其实很多人不知道Vue官方自带的图形化界面vue ui才是最适合新手的创建方式——它把项目模板、插件安装、依赖管理、任务运行全部变成可视化操作点鼠标就能搞定。而且创建出来的项目结构干净规范直接就能导入IntelliJ IDEA跑起来。这篇文章我就把这条完整的链路拆开讲清楚从环境准备到图形化创建从IDEA导入到运行调试每一步该怎么做、会遇到什么坑、怎么解决全部是我实际反复操作过的经验。1. 为什么我推荐走图形化界面这条路1.1 命令行创建看着简单实际劝退了太多人先聊一个现象。很多人一搜创建Vue项目出来的教程清一色是npm install -g vue/cli然后vue create project-name。看着确实简单但实际操作起来问题一大堆vue create后面要选预设Preset默认只有三项选完还得手动配置Router、Vuex、ESLint、单元测试每一步都是英文交互提示很多人根本不知道该选什么。选错了后面项目跑起来报错又得回头查。更别说某些环境下npm源特别慢卡在fetching template那里半天不动最后超时失败挫败感直接拉满。我在某次带新人做前端项目时就碰到过这种情况。A同学照着教程敲命令光是vue create就把项目建了三次——因为第一次没选Router第二次ESLint选错了规则集第三次是网络超时。最后我让他删掉重来改用vue ui图形化界面整个过程五分钟不到所有需要的功能勾选一下就能看到直观结果。1.2vue ui真正解决的痛点是可视化反馈图形化界面的优势不是不用敲命令这么简单而是它把原来隐藏的逻辑变成了可视化反馈。创建项目时你可以实时看到项目模板来自哪里、哪些依赖会被装进去、当前安装进度是多少、有没有报错。配置功能项时Router、Vuex、CSS预处理器、Linter这些每一项都有中文描述和说明链接选完之后还能实时预览生成的配置文件内容。这种即时反馈给到了确定性你不需要靠猜也不需要反复回滚重来。另外图形化界面还自带了一个项目仪表盘Dashboard创建完之后你能在同一个窗口里管理依赖、安装插件、修改配置、跑任务甚至直接看到编译输出。这意味着从创建到运行再到后续的日常维护你都可以在浏览器里完成不需要打开一堆终端窗口来回切。所以我觉得对于刚开始接触Vue生态、或者被命令行搞到崩溃的开发者图形化创建是最好的起点没有之一。1.3 什么情况建议还是用命令行当然我不否认命令行的价值。实际工作中我也经常直接敲命令因为快、可脚本化。比如在CI/CD流水线里自动化创建项目或者做多个同构项目批量初始化命令行模式是唯一选择。还有就是要玩高级玩法——比如自定义Preset、用vue create --preset拉取远程预设——图形化界面就做不到了。所以我的建议是学习阶段先用图形化界面把Vue项目的结构、配置项含义摸清楚等到你看着那些配置文件能秒懂每行是什么的时候再回到命令行效率会高很多。2. 动手前先把环境收拾干净Node、npm与Vue CLI的版本匹配2.1 Node版本是第一个坑也是最容易忽略的坑我接触过不少项目最后跑不起来的原因居然是Node版本不对。Vue CLI 5要求Node.js版本在12.13.0以上官方推荐使用长期支持版LTS。但很多人装上的是某个激进的新版本或者是历史遗留的旧版本两者都会出问题。新版本问题尤其隐蔽——比如Node 17以上版本调整了OpenSSL策略跑老项目时经常报Error: error:0308010C:digital envelope routines::unsupported这个报错估计很多前端都见过就是典型的Node版本和Webpack版本兼容性问题。所以第一步先检查版本。我的做法是在命令行里执行node -v npm -v看到版本号之后对照一下如果node -v显示的是v10.x或者v8.x这种老版本直接去官网下载LTS版本重装如果显示的是v18.x、v20.x这种太新的版本也不推荐直接拿来用——最稳妥的方式是用nvm这类版本管理工具装一个LTS版本切过去。输入标题里提的是Vue项目配合IDEA运行IDEA内部对Node的支持会自动检测环境变量里的Node路径所以Node装好之后要确保node -v在任意新开终端里都能正常输出否则IDEA可能识别不到解释器。2.2 npm源加速别在第一步就卡成马拉松安装Vue CLI之前强烈建议先换npm源。国内直连npm官方仓库的速度懂的都懂装个几十MB的包能等上十分钟。用淘宝镜像源是最简单的方案npm config set registry https://registry.npmmirror.com换完执行npm config get registry确认一下。这一步很重要因为后面创建项目时vue ui要下载大量模板文件和依赖包源的速度直接决定你等两分钟还是等半小时。另外还要注意如果公司网络有特殊要求可能需要配置代理那就在.npmrc文件里单独配proxy不要影响镜像源的设置。2.3 安装Vue CLI并确认核心路径环境准备好之后全局安装Vue CLInpm install -g vue/cli装完检查版本vue --version如果正常输出版本号比如vue/cli 5.0.8说明安装成功。如果提示找不到命令大概率是npm的全局bin目录没有加进系统的PATH。Windows下可以通过npm config get prefix找到npm全局目录把这个路径配进PATH环境变量macOS或Linux下通常是/usr/local/bin或者~/.npm-global/bin。这一步配好后面IDEA识别Vue CLI命令时也省心。提示Vue CLI 5.x是目前稳定版本安装时如果看到警告提示vue/cli需要node 12.13.0说明你的Node版本还是偏低先升级Node再回来继续。2.4 顺手装好IDEA侧的两个插件正式进入图形化创建之前建议把IntelliJ IDEA的Vue支持插件先装好。打开IDEA进入Settings - Plugins搜索Vue.js安装官方插件。再搜一个JavaScript and TypeScript包新版本IDEA里默认内置了但老版本需要手动确认。这两个插件提供Vue单文件组件的高亮、模板语法提示、$refs等API补全和跳转没有它们直接导入Vue项目代码高亮和智能提示都是残缺的你会以为项目环境有问题其实只是插件没装。IDEA版本方面我建议用2021.3以上的版本对Vue单文件组件和Node.js调试的支持比较完整。版本太老的话后面配置npm脚本运行会有各种小毛病。3.vue ui图形化界面创建项目的完整操作流程3.1 启动图形化界面一条命令进入浏览器控制台命令行里输入vue ui正常情况下会自动打开浏览器进入http://localhost:8000的项目管理器界面。我第一次用的时候还愣了一下——这界面完全不像一个命令行工具倒像一个正经的网页应用有左侧导航栏、项目卡片、创建向导整体设计还算清爽。启动后界面上主要分两大块本机已存在的Vue项目列表和创建新项目的入口。有一点要注意vue ui启动的本地服务是常驻的终端窗口不能关。如果你用了IDEA自带的Terminal跑vue ui关掉这个终端Tab服务也会断。所以我习惯单独开一个终端窗口专门跑它或者用nohup vue ui的方式放后台。在正式教学场景里我会让A同学单独开一个cmd窗口放在角落里别管它。3.2 项目创建向导逐项拆解每个配置选项点击创建按钮进入新项目创建向导。第一步是选择项目存放目录这个没什么好说的用一个全英文路径的目录。第二步是填写项目名和包管理器选择——这里有个细节项目名会自动带上vue-cli前缀选项但实际上你只需要填一个合法的npm包名小写字母、数字、短横线不能以数字开头。包管理器我默认选择npm如果你电脑上装了yarn或者pnpm也可以选但讲实话为了跟大多数教程保持一致npm是最不容易出错的选择。建议勾选初始化Git仓库这样项目一创建就自动完成git init后面在IDEA里提交代码会方便很多。第三步是预设Preset选择。这是新手最懵的一步。界面上会提供几个默认预设比如Default (Vue 3 Preview)、Default (Vue 2)。我的建议是——不要选默认预设直接选手动配置项目功能。为什么因为默认预设只带Babel和ESLint不会给你Router、Vuex这些实际项目几乎必用的核心依赖。后面你还要手动去加反而多绕一圈。手动配置才能一次到位。点击手动配置之后界面上会出现一个巨大的功能勾选列表。根据我实际项目的经验核心要勾选的功能如下Babel必选。Vue CLI的编译核心负责把ES6语法转译成浏览器能识别的JS。Router做多页面应用几乎必选。如果不勾后续搭建路由需要自己手动装vue-router并写一堆初始化代码。Vuex全局状态管理。不做中大型项目也可能用不上但如果项目有多页共享数据的需求建议勾上。CSS Pre-processors推荐选Sass/SCSS现在更推荐Dart Sass写嵌套样式和变量会舒服很多。Linter / Formatter必选推荐ESLint Prettier组合团队协作时代码风格统一。Unit Testing如果不是公司要求写单测可以先不选。单测框架Jest比较重会拖慢首次安装时间。E2E Testing同理独立做E2E端到端测试的项目才需要新手可以先忽略。接下来是几个向导问答配置路由模式选History Mode还是Hash Mode。如果部署环境不求兼容老IE、能配置服务器重写规则选History模式URL更干净但如果部署环境不可控建议选Hash模式。ESLint规则集我一般选ESLint Prettier组合警告级别自己选推荐把Lint on save勾上保存时代码自动检查问题早暴露早改。这些选项全走完之后向导最后一步会显示你要装的依赖清单确认后点击创建项目界面进入依赖安装阶段。这里会有一个进度条实时显示安装状态如果前面npm源配好了一两分钟就能装完。3.3 创建完成后先逛一圈这个可视化仪表盘项目创建完成后主界面会自动跳转到这个项目的Dashboard。左侧导航栏有四个核心模块仪表盘Dashboard展示项目基本信息、npm任务serve/build/lint等、当前依赖数量、git状态相当于一个项目总览。插件Plugins可视化安装和管理Vue CLI插件比如你要装vue-cli-plugin-element点一下搜索、安装全程鼠标操作。依赖Dependencies分生产依赖和开发依赖两块能看到当前安装的每个包及版本号支持在线更新。配置Configuration可视化编辑Vue CLI生成的配置文件比如vue.config.js、babel.config.js、eslintrc.js。你可以直接在这个页面里改代码改完保存比用编辑器手动改更不容易出错。任务Tasks查看项目所有可执行的npm脚本点击运行可以看到实时日志输出比如serve任务跑起来后界面会直接显示编译日志、本地访问地址甚至有一个预览按钮能在浏览器里打开应用。很多教程创建完项目就直接跳到用IDEA打开了很少提这个Dashboard的作用。但其实它才是真正决定图形化创建上限的地方——所以我的建议是创建完成后别急着关浏览器先在Dashboard里把serve任务跑一次确认项目能正常启动、页面能正常打开再关掉去IDEA里操作。这样后面如果出问题你能清楚地知道到底是建出来的项目本身有问题还是IDEA环境配置有问题。3.4 我实际怎么填这些配置项一份可以直接照抄的模板如果你不想在配置选择上花时间纠结我直接给你一份我多次用于实际前端项目的模板项目名一个英文小写短横线形式的名称例如my-vue-app包管理器npm初始化Git仓库勾选预设手动配置项目功能核心功能Babel、Router、Vuex、CSS Pre-processors、Linter / FormatterCSS预处理器Sass/SCSS (with dart-sass)不要选node-sass它在很多新环境里编译容易出问题Linter / FormatterESLint Prettier额外配置勾选Lint on save单元测试跳过配置存放位置选In dedicated config files独立配置文件这样每个配置项都单独一个文件IDEA里查看方便按这套配置创建出来的项目代码规范已经预置、路由/状态管理/样式方案齐全基本可以直接上手写业务。4. 把图形化创建的项目干净地导入IntelliJ IDEA4.1 正确的导入姿势不是Import Project而是Open Folder很多人用IDEA长时间做Java开发导入Vue项目时很自然地去找File - New - Project from Existing Sources结果发现IDEA弹出一堆Maven/Gradle相关选项一脸懵。从IDEA 2020版本之后前端项目的推荐导入方式其实很简单直接File - Open选择刚才创建的项目根目录包含package.json的那一层然后IDEA会弹窗问你是New Window还是This Window。选New Window打开IDEA会自动识别出这是一个npm项目——可以看到package.json上出现一个绿色的npm标志侧边栏也能正常展开src目录下的Vue文件。这里有个操作上的区别要说明不要在Open时选了Open as Existing Project之类的方式去走传统导入向导那个路径是为后端工程设计的。前端项目没有.iml文件、没有.idea目录最干净的方式就是直接Open目录IDEA会自动把它做成一个项目并创建.idea配置目录。4.2 导入后先等IDEA做三件事打开项目后不要急着点运行先让IDEA干完三件事第一索引。IDEA要扫描整个node_modules目录建立代码索引这个过程在首次打开时可能会持续几分钟尤其在Windows机械硬盘上会非常明显。你可以观察底部状态栏有没有进度条同时建议在Settings - Editor - File Types忽略掉node_modules进去索引但IDEA其实默认就会跳过它。等状态栏不转圈了再继续操作。第二确认Node解释器。经验不足的人经常会卡在这里。IDEA检测npm脚本时需要知道你的Node.js路径。正常来说IDEA会从系统PATH里自动检测到如果检测不到就需要手动配置Settings - Languages Frameworks - Node.js在Node interpreter下拉框里选择你的node路径比如C:\Program Files\nodejs\node.exe下面的npm路径会自动带出来。这一步没配好后面运行配置会报Cannot find Node interpreter之类的错误。第三确认Vue.js插件对当前文件生效。打开任意一个.vue文件看右侧有没有出现Vue单文件组件的高亮标识。如果没有检查Settings - Plugins里Vue.js插件是否启用。这一步确认好后面写模板和脚本才有提示。4.3 常见导入问题路径不对、项目空壳、颜色图标不生效导入过程里有一个很容易让人怀疑人生的情况打开项目之后侧边栏里能看到文件夹结构但所有图标都灰着完全没有代码高亮这几个问题通常在导入这一环就能排查完图标不亮多半是插件没装或者没启用到Plugins里重新安装Vue.js插件重启IDEA。侧边栏只有最外层结构src目录打不开这是IDEA把项目误识别成了普通文件夹没有把它标记为前端项目。解决办法是右键项目根目录的package.json选择Add as npm projectIDEA会重新识别。IDEA一直提示Node.js环境无效按上面说的去Node.js设置里手动指向node.exe路径确认版本号能正常显示。有个容易被忽略的点IDEA项目里的.idea目录和workspace.xml会记录你本机Node路径和npm配置如果这些文件被提交到了Git仓库换一台电脑拉下来可能会出现IDE环境路径对不上的问题。所以.idea目录需要通过.gitignore排除掉。Vue CLI创建项目时生成的默认.gitignore其实已经包含.idea了但如果你是自己手动创建的Git仓库记得加上。5. 在IDEA里跑起来npm脚本的配置、调试与常见报错5.1 用运行配置启动开发服务器双击一次热更新自动接管IDEA识别出npm项目后右上角的运行配置下拉框里应该会出现项目自带的一些npm脚本比如serve、build、lint。没有的话也可以手动新增一个npm运行配置步骤如下点击顶部Add Configuration- 左上角号 - 选npm。在弹出窗口里配置package.json选择项目根目录的package.json文件路径Command选择runScripts选择serveArguments可以留空或者加一行-- --port 8081来修改端口注意前面要留一个空格再写双横线参数Node interpreter确认是正确版本的Node路径Node options一般留空不要乱加调试参数配置完成后点右上角的绿色三角运行按钮IDEA下方的Run窗口会输出编译日志。看到Compiled successfully的标志浏览器打开http://localhost:8080项目就活了。此时Vue CLI自带的Webpack会启动热更新Hot Module Replacement你在IDEA里改任何源码文件保存后浏览器要做的就是配一次源映射在Settings - Build, Execution, Deployment - Debugger - Source Maps里把JavaScript的源映射选项勾上对应的模式这样断点才能落在.vue文件里的正确行号。然后把查看地址改成http://localhost:8080重新attach。实际体验是Vue单文件组件里的script代码能正常命中断点但template里的表达式断点有时会有偏差原因不复杂——Vue编译器会把template编译成render函数原始行号映射需要一个sourcemap链IDEA对这条链的支持不算完美。所以我的建议是实打实的逻辑断点写在script部分的函数里尽量少在template表达式里加断点。熟悉Vue调试的人都知道真到了要调试v-for循环里的状态变化时用Vue Devtools配合IDEA断点双管齐下才是最舒服的。5.3 逛一遍IDEA的Vue开发辅助自动补全、重构与代码检查项目跑起来之后还有几个IDEA的辅助功能值得你在实际编码中好好利用。最直观的是模板自动补全——在template里写v-if、v-for、click这些指令时IDEA会根据当前项目的Vue版本提供完整的指令提示和参数补全。比如你输入v-bind:它会提示你绑定class、style、id等常用属性输入完自动生成对应的双引号占位符。写样式时也有SCSS变量的跳转和颜色预览。另一个很实用的功能是重构里的Rename。如果你要改一个组件名或一个变量名IDEA的Vue插件可以识别到script里的定义、template里的引用以及对应style里的scoped类名一键全局改名且比手动CtrlH替换要安全得多。这一点在项目文件多、变量反复调整时节省的时间非常可观。ESLint的实时检查也值得一提。在项目创建阶段如果勾选了Lint on saveIDEA保存文件时会自动跑ESLint检查问题行会在编辑区右侧标红。你还可以在Settings - Languages Frameworks - JavaScript - Code Quality Tools - ESLint里配置Run eslint --fix on save这样保存时自动修复格式类问题。这样配合Prettier代码风格基本不用手动调团队协作时少很多battle。5.4 我遇到过的几个运行报错及解决方案跑serve任务时最常撞见的报错我把典型的几个拉出来逐个拆解过这里直接列成表格方便你按图索骥报错现象根本原因解决方式端口被占用Error: listen EADDRINUSE :::80808080被其他进程占用比如之前开着的node服务、某个前端项目要么关掉占用的进程要么在运行配置里改-- --port 8081digital envelope routines::unsupportedNode版本太新17与Webpack4/旧版依赖不兼容切换到Node 16 LTS版本或升级依赖到兼容Webpack5的版本Cannot find module node-sass创建时选了node-sass而该依赖没有安装成功重新安装node-sass建议改为dart-sass浏览器打开页面空白控制台报[Vue warn]: Failed to resolve component: xxx某个组件没注册或导入路径写错检查import路径和组件的name字段拼写npm run 提示vue-cli-service 不是内部或外部命令项目依赖没装完整或者node_modules/.bin下没有对应的命令先在项目根目录执行npm install再重新跑serve这些报错里端口占用最频繁解决方案也最简单但最容易忽略。我在带新人的时候他们的习惯是把整个IDEA关了重来其实只要换个端口或者杀掉占用进程就行。在这张表的基础上补充一个Windows环境的技巧按Win R输入netstat -ano | findstr 8080注意这是系统命令不是npm命令就能查到占用8080端口的进程PID然后taskkill /PID 进程号 /F把这个进程结束掉再重跑serve。6. 图形化创建的项目结构长什么样为什么这套骨架经得起用6.1 逐步走一遍项目核心文件和目录很多教程跑完项目就结束但我认为看懂图形化创建出来的骨架是什么比会跑更重要不然你只是会用后面加功能、加页面时还是发懵。以我推荐的配置为例创建出来的核心目录结构大致如下my-vue-app/ ├── node_modules/ # 依赖包文件夹几万个文件夹不用管 ├── public/ # 公共静态资源目录 │ ├── favicon.ico # 站点小图标 │ └── index.html # 唯一的HTML入口页vue挂载到#app ├── src/ # 核心源码目录日常开发主战场 │ ├── assets/ # 静态资源如图片、全局样式 │ ├── components/ # 通用组件如HelloWorld.vue │ ├── router/ # 路由配置文件 │ │ └── index.js # 定义URL和组件对应关系 │ ├── store/ # Vuex状态管理 │ │ └── index.js # 全局store配置模块划分入口 │ ├── views/ # 页面级组件 │ │ ├── HomeView.vue # 首页 │ │ └── AboutView.vue # 关于页 │ ├── App.vue # 根组件单页应用的最外层结构 │ └── main.js # 应用入口负责创建Vue实例、挂载路由和store ├── .eslintrc.js # ESLint规则配置文件 ├── .gitignore # Git忽略规则 ├── babel.config.js # Babel转译配置不用动 ├── jsconfig.json # 给编辑器提供路径别名的配置 ├── package.json # 项目依赖和脚本管理最核心文件之一 ├── package-lock.json # 当前依赖版本锁定文件保证不同机器版本一致 └── vue.config.js # Vue CLI的可选配置文件默认不存在需要时自己建不需要背目录结构但有几个点值得理解到位。第一package.json是项目的户口本和说明书你安装的每一个依赖、能跑的所有脚本都在这里登记。打开它你能看到scripts字段里有serve、build、lint三大默认脚本这就是IDEA运行配置下拉框的脚本来源。第二src/main.js是真正的入口起点。打开看会发现三行核心代码createApp(App).use(router).use(store).mount(#app)其中createApp创建Vue实例use把Router和Vuex注入mount(#app)把实例挂载到public/index.html里的div idapp上。理解这个顺序你以后想给应用增加自定义插件比如UI库就知道该在哪个位置插代码。第三vue.config.js默认像outputDir、publicPath、devServer、proxy这些都是在里面配置的。如果创建项目时没有自动生成不要慌自己手动在根目录新建一个即可Vue CLI会自动识别。6.2 图形化创建的项目和命令行创建的项目到底有没有区别答案是核心项目结构完全一致。因为不管是命令行还是图形化背后调用的都是Vue CLI同一套模板生成器。区别只在于初始配置项的选择——用图形化的方式你可以在创建阶段就一步到位选好Router、Vuex、Sass、ESLint而命令行你需要逐个按回车选择。所以如果你看到的教程讲的是命令行创建的项目结构讲解部分对图形化创建的项目同样适用。当然有个很小的差异图形化界面创建项目时会额外生成一个.vue-cli-service相关的状态文件存放在node_modules/.cache里但这个文件基本不用管。另外如果你通过图形化Dashboard里的插件页面安装了额外插件那些插件配置会写进package.json的vuePlugins字段——这些在纯命令行创建的默认项目里是看不到的。6.3 可视化配置面板的实际项目管理价值改配置不再靠翻文档这个Dashboard我在3.3里提过这一节再展开聊聊它的实际价值。日常开发中需要调整项目配置是很常见的事换端口、改编译输出目录、配代理、调整ESLint规则。命令行时代你要么打开vue.config.js手动改要么去翻Vue CLI文档有一说一官方文档英文偏多中文社区资料又经常过时。而图形化Dashboard的配置Configuration页面把这些常用配置变成了表单预览的模式。比如你不想用8080端口在Dashboard的Configuration - devServer里填个8081点保存Vue CLI会自动把配置写到vue.config.js里同时页面右下角会弹出一个配置文件已更新的提示。尤其适合需要跟后端联调时快速改代理配置的场景——以前我都得打开vue.config.js看proxy语法现在直接在表单里把target地址填上保存完事。不过这里要提醒一句Dashboard改配置虽然方便但它会覆盖你手动写在vue.config.js里的同键值内容。如果你在vue.config.js里自己写了复杂的自定义配置又去Dashboard里动了同一个字段后者会直接覆盖前者造成我明明改了配置怎么没生效的错觉。所以我个人习惯是简单配置端口、代理用Dashboard复杂配置自定义loader、多环境变量注入直接编辑器手写两种方式别混着用。7. 几条用熟了之后才总结出来的实战经验最后我忍不住要把一些走了弯路才发现的经验单独拎出来聊一下这些内容不在任何官方文档里但随便一条都能帮你省半小时。第一IDEA里跑vue ui有个终端陷阱如果你最初是用IDEA自带的Terminal执行vue ui创建完项目后千万不要关这个Terminal否则浏览器里的Dashboard会断开正在跑的任务也会中断。我之前就犯过这个错创建完在Dashboard里跑serve觉得日志滚动太占地方就随手关了个Tab结果整个开发服务器被一起带崩了。后来我的做法是把vue ui的终端窗口固定成一个独立的Windows Terminal窗口放在另一个桌面它跑它的我改我的代码。第二node_modules是杀毒软件的重点关照对象。在Windows上某些安全软件实时扫描node_modules里的数万个文件会让首次安装和IDEA首次索引变得异常缓慢。如果你发现npm install明显比别人慢、IDEA打开项目要等几分钟可以在安全软件里把项目的node_modules目录加进排除列表每个人的软件界面不一样具体路径自己找。这个优化在大型老项目上效果尤其明显能让IDE索引时间从五分钟缩到三十秒。第三把常见的运行配置导出成模板团队新成员入职时直接点一下就用。IDEA运行配置支持Store as project file存成项目文件把npm run serve的配置存到.idea/runConfigurations目录下并提交到Git仓库每个克隆项目的同事拉下来都能直接用配置好的启动项不用自己从头配Node解释器、选脚本。这个实践在大团队协作时价值很大新人从配环境半小时变成点运行就完事。第四配色方案和代码风格也是影响开发效率的因素但这是题外话说回正题——创建项目时勾选的Prettier在IDEA里一定要记得开启ESLint --fix on save之外还要在Settings - Tools - Actions on Save里勾上Reformat code。不然保存的时候只见ESLint的波浪线报错但代码格式并没有被自动整理后面提交代码时diff乱七八糟review也心累。这几个配置一次性设置好全项目都受益。这套链路如果你跟着完整走一遍从图形化界面创建项目到IDEA里跑起来半小时以内肯定能完成。而一旦你熟悉了Dashboard对依赖、插件、配置的管理方式你会发现维护一个Vue项目的日常负担比想象中小得多——至少不用再为了装一个组件库去手动翻安装文档、找CSS引入路径。这就是工具可视化带来的确定性前期把环境搭顺了后面你才有精力真正去写业务逻辑而不是天天和环境缠斗。
阅读完成 · 觉得有帮助？
