VUE3项目配置

汤姆不是猫 ... 2021-12-02

VUE
VUE3
工程化
项目配置

大约 1 分钟

# 创建vue3工程化项目：

查看自己本地的vue-cli版本，保证在4.5.*以上

vue -V  →  @vue/cli 4.5.15

如果没有安装则需要全局安装

npm install @vue/cli -g

如已安装，但版本低需要先卸载

npm uninstall vue-cli -g    // 3.0以前的卸载方式

npm uninstall @vue-cli -g   // 3.0以后的卸载方式

如果安装了nvm，可能造成旧版vue-cli无法卸载的情况

nvm list

nvm use system

npm uninstall -g vue-cli

创建vue项目

vue create project-test

以下可根据个人实际开发需要进行配置

? Please pick a preset: 
    Manually select features

? Check the features needed for your project:
    Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter

? Choose a version of Vue.js that you want to start the project with 
    3.x

? Use class-style component syntax?
    No

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
    Yes

? Use history mode for router? (Requires proper server setup for index fallback in production) 
    No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
    Less

? Pick a linter / formatter config: 
    Standard

? Pick additional lint features: 
    Lint on save

? Where do you prefer placing config for Babel, ESLint, etc.?
    In dedicated config files

# ESLint设置：

ESLint是JavaScript代码规范检测工具，默认缩进为2，本人代码习惯为4缩进，那么可进行如下配置

.editorconfig 
    indent_size = 4

.eslintrc.js 
    rules: {
        'indent': [2, 4],
    }

1
2
3
4
5
6
7

Webstorm系列的IDE可以设置保存自动按ESLint规范进行格式化

MAC：快捷键 command + , 
> Languages & Frameworks
> JavaScript
> Code Quality Tools
> ESLint
> Manual ESLint configuration  &&  Run eslint --fix on save

VUE3项目配置

# 创建vue3工程化项目：

# ESLint设置：

详情