搭建vue框架(二)：项目配置

关注

原创最新推荐文章于 2026-07-07 09:19:47 发布 349 阅读 AI 写同款· GEO 优化 ›

WebStorm 零起点搭建Vuejs项目 - 全程篇 WebStorm进行Vue.js项目的零起点、搭建、开发、浏览器测试近几个月一来，一直在研究vuejs的高级用法，无意中发现自己用的开发工具，已经无法满足自己的开发需求，严重阻碍了开发进程。索性抛弃了旧IDE，研究了一下webstorm这款新的编辑器。果然是事半功倍啊！为了更好更有价值的给大家提供参考，这里我们零起点开始，说明 “如何使用WebStorm进行Vue.js项目的零起点、搭建、开... 阅读详情

项目配置

使WebStorm识别路径别名

使用WebStorm时，别名@符号无法识别，ctrl+鼠标左键无法跳转

在这里插入图片描述
解决方法

使WebStorm跳转关联ElementUI

使用WebStorm时，ctrl+鼠标左键无法从标签跳转到Eelment内部

解决方法： 添加element库
在这里插入图片描述

安装ElementUI

npm i element-ui -S

main.js中使用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import './assets/css/theme-green/index.css'; // 浅绿色主题

Vue.use(ElementUI)

安装babel

ie9和一些低版本的高级浏览器对es6新语法并不支持
使用babel可以解决

npm i babel-polyfill -D

// main.js中引入
import 'babel-polyfill';

禁用ESLint

在vue.config.js中配置 (重启生效)
配置后，还是会检查，会有红线，但是不影响启动

module.exports = {
  lintOnSave: false 
}

配置ESLint规则

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    semi: ['error', 'always'], // 强制有分号，没有就报错
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};