vue3.0+eslint+element-plus搭建项目_vue3 eslint

vue官网
1、创建项目
创建最新稳定版本

npm create vue@latest
1

如果卡住不动 查看npm代理

npm config get registry
1

更换代理

npm config set registry=https://registry.npmmirror.com
1

2、根据自己的需要选择当前的配置

3、打开项目看一下脚本

使用的是vite脚手架，不是我想要的 我想要的是vue-cli
vite和vue-cli的区别可以参考 这位博主滴
4、使用vue-cli脚手架创建vue3.0项目

vue create XXXX
1

回车，看一下配置，这下就对辣~~

5、安装路由和请求

npm install XXX
1

6、使用eslint代码自动检测，主要是保存的时候自动格式化、引入的组件没有使用警告、重复命名
(1)生成.eslintrc.js文件

npx eslint --init
1

(2)配置.eslintrc.js文件

module.exports = {
    'root': true,
    'env': {
        'browser': true,
        'es2021': true,
        'commonjs': true,
        'es6': true
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/vue3-essential'
    ],
    'parserOptions': {
        'ecmaVersion': 12,
        'sourceType': 'module'
    },
    'plugins': [
        'vue'
    ],
    'rules': {
        'no-cond-assign': 2,  // 禁止：在条件表达式中使用赋值语句
        'no-dupe-args': 2,  // 禁止：函数参数重名
        'no-unused-vars': 2,  // 禁止：未使用过的变量
        'semi': ['error', 'always'],  // 禁止：必须有分号
        // 'no-console': 1,  // 警告：代码中存在console.log
        'no-unreachable': 0,  // 警告：有无法执行的代码
        'quotes': ['warn', 'single'],  // 警告：字符串单引号
        'indent': ['off', 4],  // 关闭：缩进4个空格
        'linebreak-style': ['off', 'unix'] // 关闭：换行符
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

（3）vscode下载eslint插件

（4）修改vscode本地的setting.json

{
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "html",
    "vue"
  ],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

至此eslint配置结束，编辑一下看看效果，不起作用的话重启电脑！！！
安装element-plus

npm install element-plus --save
1

按照官网的步骤来，这里我们选择自动导入


项目中现在没有webpack.config.js文件，现在是使用vue.config.js中配置webpack

const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = defineConfig({
 
  // 打包时不生成.map文件 避免看到源码
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件
        threshold: 10240, // 对超过10k文件压缩
      }),
      new MiniCssExtractPlugin({
        filename: `css/[name].${Timestamp}.css`,
        chunkFilename: `css/[name].${Timestamp}.css`,
      }),
    ],
  
  },

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

运行项目：

npm run dev
1

报错：TypeError: AutoImport is not a function 为啥子呢？？因为安装的插件版本太高了，降版本

npm list unplugin-auto-import  
npm install unplugin-auto-import@0.16.1 
npm install unplugin-vue-components@0.25.2
1
2
3

elementUI配置完成~