Vue 3 + TypeScript + Vite项目创建

一、项目搭建 

1、创建项目前请先确保vue-cli在4.0版本及以上

2、创建项目

当然如果选择简单模式记得先查看npm版本

简单模式：

您还可以通过其他命令行选项直接指定项目名称和要使用的模板。

vite官网的这句话，我就简单粗暴的理解成简单的搭建模式 ，命令如下，当然因为npm版本不同，命令略有差异，建议您先查看npm版本

npm -v

# npm 6.x
npm init @vitejs/app [项目名] --template vue-ts
# npm 7+（需要额外的双横线）
npm init @vitejs/app [项目名] -- --template vue-ts

详细模式：

npm init @vitejs/app
? Project name: » vite-project[项目名]
√ Project name: ... [项目名]
? Package name: » [项目名]
√ Package name: ... [项目名]
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
 >  vue
    react
    preact
    lit
    svelte
√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
    vue
>   vue-ts
√ Select a variant: » vue-ts
Scaffolding project in [项目路径/项目名]...

Done. Now run:

  cd arcoDemo
  npm install
  npm run dev

3、运行最后三行命令，启动项目。

二、项目简单配置

此部分只做简单配置，后续可能的会陆续更新，毕竟创建这个demo的初衷不在这里。

//配置vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'//path模块报错，因此需要安装一下命令：npm i @types/node -D
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // 设置 `@` 指向 `src` 目录
    },
  },
  base: './', // 设置打包路径
})

三、安装eslint和pretty插件

安装eslint插件

//本地安装eslint
npm install eslint --save-dev
//int报错
$ eslint --init
bash: eslint: command not found
//于是运行了./node_modules/.bin/eslint --init命令
$ ./node_modules/.bin/eslint --init
You can also run this command directly using 'npm init @eslint/config'.
npx: installed 40 in 8.926s
? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style


//下面是选择的一些具体配置
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Which framework does your project use? · vue
? Does your project use TypeScript? » No / Yes
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? » No / Yes

安装pretty插件

//安装prettier
npm i -D --save-exact prettier
//安装eslint-config-prettier插件（禁用 eslint 风格校验）
npm i -D eslint-config-prettier
//安装eslint-plugin-prettier插件（使eslint采用prettier的风格校验）
npm i -D eslint-plugin-prettier

配置文件eslint

//.eslintrc.js
module.exports = {
    root: true,// 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
    env: {// 设置eslint所处的环境，避免检查一些全局变量，环境可以选多个,比如你去掉es2021,就会报一些变量undefined的错
        'node': true,
        'browser': true,
        'es2021': true,
        'vue/setup-compiler-macros': true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    parser: 'vue-eslint-parser',//默认ESlint使用Espree作为解析器,目前使用vue-eslint-parser
    parserOptions: {// 解析器的配置
        ecmaVersion: 12,
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],// // eslint的一些插件
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-unused-vars': ['error', { vars: 'all', args: 'after-used' }],
        'operator-linebreak': ['error', 'after'],
        'no-var': 'error',
        'array-bracket-spacing': ['error', 'never'],
        'camelcase': 'error',
        'quotes': ['error', 'single'],
        'no-multiple-empty-lines': ['error', { max: 2 }],
        'no-trailing-spaces': 'error',
        'prettier/prettier': 1,
        'arrow-parens': [2, "as-needed", { "requireForBlockBody": true }],
        // Vue: Recommended rules to be closed or modify
        'vue/require-default-prop': 0,
        'vue/singleline-html-element-content-newline': 0,
        'vue/max-attributes-per-line': 0,
        // Vue: Add extra rules
        'vue/custom-event-name-casing': [2, 'camelCase'],
        'vue/no-v-text': 1,
        'vue/padding-line-between-blocks': 1,
        'vue/require-direct-export': 1,
        'vue/multi-word-component-names': 0,
    },
};

//新建.eslintignore
/*.json
/*.js
dist

配置文件pretty

//新建.prettierrc.js
module.exports = {
  tabWidth: 2,//缩进长度
  semi: true,//句末使用分号
  printWidth: 240,//单行长度
  singleQuote: true,//使用单引号
  quoteProps: 'consistent',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: true,
  eslintIntegration: true,
  endOfLine: "lf",
};
//新建文件 .prettierignore

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

安装UI框架，我安装的是字节的UI框架

npm install --save-dev @arco-design/web-vue