vite+vue3+TypeScript 搭建项目基本框架

vite+vue3+TypeScript 搭建项目基本框架

  • 1 参考文档
  • 2 所有步骤
  • 3 具体步骤
    • webstorm配置import/export代码有空格
    • 3.1 创建vue3项目
    • 3.2 配置src别名为@、src/components别名为@_c
    • 3.3 安装less/scss
    • 3.4 安装ESLint
    • 3.5 安装Prettier
    • 3.6 自动导入
    • 3.7 安装配置router
    • 3.8 安装Pinia
      • 3.8.1 Pinia的使用
      • 3.8.2 Pinia状态持久化
    • 3.9 安装配置axios
    • 3.10 自定义组件名setup语法糖
    • 3.11 安装element-plus组件库
    • 3.12 安装与使用Echarts
    • 3.13 安装Ant Design Vue组件库【可选】
  • 4 源码

1 参考文档

参考1:基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)
参考2:vite+vue3+ts 手把手教你创建一个vue3项目

2 所有步骤

  1. 创建vue3项目
  2. 配置src别名为@、src/components别名为@_c
  3. 安装less/scss
  4. 安装ESLint
  5. 安装Prettier
  6. 自动导入
  7. 安装router
  8. 安装pinia【vue-devtools插件、数据持久化插件 这两个先不装】
  9. 安装axios
  10. 自定义组件名setup语法糖
  11. 安装element-plus组件库
  12. 安装Ant Design Vue组件库【可选】
  13. 安装与使用Echarts

3 具体步骤

webstorm配置import/export代码有空格

vite+vue3+TypeScript 搭建项目基本框架_第1张图片

3.1 创建vue3项目

NPM方式

npm create vite@latest
  1. 填写项目名称
  2. 选择前端框架【选Vue】
  3. 选择开发语言【TypeScript】

3.2 配置src别名为@、src/components别名为@_c

在vite配置src别名为@、src/components别名为@_c,这能在开发时对路径看些来直观点。

  1. 打开 vite.config.ts 文件

    • 导入path模块
    • 加入 解析配置
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    //1、 导入 path 模块,帮助我们解析路径
    import { resolve } from 'path'
    
    // https://vitejs.dev/config/
    export default defineConfig({
        plugins: [
            vue(),
        ],
    
        //1、 ↓解析配置
        resolve: {
            // ↓路径别名
            alias: {
                "@": resolve(__dirname, "./src"),
                "_c": resolve(__dirname, "./src/components")
            }
        }
    })
    
  2. 打开 tsconfig.json 文件

    配置baseUrl,paths参数

    {
      "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": [
          "ES2020",
          "DOM",
          "DOM.Iterable"
        ],
        "skipLibCheck": true,
        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve",
        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        // 配置@别名 start
        "baseUrl": ".",
        "paths": {
          "@/*": [
            "src/*"
          ],
          "_c/*": [
            "src/components/*"
          ]
        }
        // 配置@别名 end
      },
      "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
      ],
      "references": [
        {
          "path": "./tsconfig.node.json"
        }
      ]
    }
    
  3. 使用方式

    重新运行一遍即可

3.3 安装less/scss

由于是使用vite,vite它提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持,但必须安装相应的预处理器依赖;
国内一般只使用 less 或 scss,所以我只写这两个安装。

Sass、SCSS、Less介绍
Sass (Syntactically Awesome StyleSheets):后缀名为.sass,是由ruby语言编写的一款css预处理语言。
SCSS (Sassy CSS):后缀名为 .scss。SCSS 是 Sass 3 引入新的语法,与原来的语法兼容,只是用{ }替代了原来的缩进。SCSS语法完全兼容 CSS3,并且继承了 Sass 的强大功能。
Less:后缀名为 .less。与Sass类似,也是一款css预处理语言。与Sass不同的是,Less是基于Javascript,是在客户端处理的。Less 既可以在客户端上运行(支持IE 6+,Webkit,Firefox),也可以运行在 Node 服务端。

区别

  • Scss功能较Less强大
    1、scss有变量和作用域
    2、scss有函数的概念
    3、进程控制
    4、数据结构
  • Scss和Less处理机制不一样
    1、前者是通过服务端处理的,后者是通过客户端处理,相比较之下前者解析会比后者快一点。
  • Scss和Less在变量中的唯一区别就是Scss用$,Less用@

安装scss或less即可,只安装一个,如有需要再安装另一个。

  1. 安装scss依赖【优先推荐】
npm add -D scss
  1. 安装less依赖【推荐】
 npm add -D less 
  1. 安装sass 依赖【不推荐】
npm add -D sass

3.4 安装ESLint

ESLint主要用于代码规范、统一代码风格。因为校验严格,所以这个不是必要的功能

  1. 安装ESLint依赖
npm install -D eslint
  1. ESLint的初始化
npm init @eslint/config

执行上述命令后,控制台中会有如下步骤:
1)需要安装 @eslint/create-config,问是否继续: 继续,直接回车;
2)使用ESLint来做什么:选最后一个 To check syntax, find problems, and enforce code style(检查语法、寻找问题、强制代码风格)
3)使用哪种模块化的方式:肯定选 JavaScript modules (import/export) (几乎我参与的 vue 项目都是 ESModule)
4)项目使用什么框架:Vue.js*
5)项目是否使用 TypeScript:Yes
6)项目运行在什么环境:Browser
7)如何定义项目的代码风格:Use a popular style guide 使用流行的风格
8)在流行的风格中选择其中一种:Standard
9)ESLint 配置文件的格式:JavaScript
10)根据上面选择的,提示需要安装一大堆依赖,是否安装?Yes
11)选择使用什么包管理工具安装:npm

接下来耐心等待安装依赖。

依赖安装完毕后,项目的根目录下会自动生成.eslintrc.cjs文件。

  1. 在package.json中配置,对代码进行校验和修复
    scripts下添加"lint:script": "eslint --ext .jsx,.vue,.tsx,.ts,.js --fix",完整代码:

    {
      "name": "vite-vue3-ts-project",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "vue-tsc && vite build",
        "preview": "vite preview",
        "lint:script": "eslint --ext .jsx,.vue,.tsx,.ts,.js --fix"
      },
      "dependencies": {
        "vue": "^3.3.4"
      },
      "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^6.7.2",
        "@vitejs/plugin-vue": "^4.2.3",
        "eslint": "^8.50.0",
        "eslint-config-standard-with-typescript": "^39.1.0",
        "eslint-plugin-import": "^2.28.1",
        "eslint-plugin-n": "^16.1.0",
        "eslint-plugin-promise": "^6.1.1",
        "eslint-plugin-vue": "^9.17.0",
        "scss": "^0.2.4",
        "typescript": "^5.2.2",
        "vite": "^4.4.5",
        "vue-tsc": "^1.8.5"
      }
    }
    
  2. 在根目录下的.eslintrc.cjs中按如下配置添加

    // eslint配置,用于校验代码
    module.exports = {
        // env指定环境 支持的环境: browser node commonjs es6 es2016~es2022...
        // 环境很多,详情查看文档https://zh-hans.eslint.org/docs/latest/use/configure/language-options
        "env": {
            "browser": true,
            "es2021": true,
            "node": true,
        },
        // 使用插件配置
        "extends": [
            "eslint:recommended",
            "plugin:vue/vue3-essential",
            "plugin:@typescript-eslint/recommended"
        ],
        // "overrides": [
        //     {
        //         "env": {
        //             "node": true
        //         },
        //         "files": [
        //             ".eslintrc.{js,cjs}"
        //         ],
        //         "parserOptions": {
        //             "sourceType": "script"
        //         }
        //     }
        // ],
        // 配置支持的js语言选项
        "parserOptions": {
            "ecmaVersion": "latest",
            "sourceType": "module",
            "parser": "@typescript-eslint/parser"
        },
        // eslint第三方插件配置
        "plugins": [
            "vue",
            "@typescript-eslint"
        ],
        // eslint规则配置,还有很多规则配置项,在官网查看 https://eslint.org/docs/latest/rules/
        "rules": {
            '@typescript-eslint/no-var-requires': 0, //解决报错:Require statement not part of import statement.
            'vue/multi-word-component-names': 'off', //关闭组件命名规则校验
            // => 前后有空格
            "arrow-spacing": [
                2,
                {
                    before: true,
                    after: true,
                },
            ],
            "block-spacing": [2, "always"],
            // 对象字面量项尾是否有逗号
            "comma-dangle": [2, "always-multiline"],
        }
    }
    
  3. WebStorm配置ESLint【可选】
    vite+vue3+TypeScript 搭建项目基本框架_第2张图片

3.5 安装Prettier

prettier 是代码格式化工具,用它可以统一代码格式,风格。

  1. 安装Prettier依赖
npm install -D prettier
  1. 依赖安装完毕后,在项目的根目录下创建.prettierrc.cjs配置文件,添加如下配置:
//.prettierrc.cjs
module.exports = {
    printWidth: 80, //一行的字符数,如果超过会进行换行,默认为80
    singleAttributePerLine: false, //每行强制换行,只能使用单个属性
    tabWidth: 2, // 一个 tab 代表几个空格数,默认为 2 个
    useTabs: false, //是否使用 tab 进行缩进,默认为false,表示用空格进行缩减
    singleQuote: true, // 字符串是否使用单引号,默认为 false,使用双引号
    semi: false, // 行尾是否添加分号,默认为true
    trailingComma: 'none', //行使用逗号分隔 可选值: es5 none all
    bracketSpacing: true, // 对象大括号直接是否有空格,默认为 true,效果:{ a: 1 }
    endOfLine: 'auto', // 文本文件中的行结束方式 可选值: lf crlf cr auto
    jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
    vueIndentScriptAndStyle: false, // 
                    
                    

你可能感兴趣的:(vue,vue)