从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

目录
  • 项目初始化
    • 安装router和pinia
    • 安装ESlint
    • eslint的vue规则需要切换
    • 安装prettier
    • 安装stylelint
    • 安装husky
    • 安装commitlint
  • 总结
  • 参考:

最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用。

项目初始化

本项目已vite开始,所以按照vite官方的命令开始。这里使用的命令行的方式来搭建基础项目:

yarn create vite my-vue-app --template vue

执行完之后的项目结构是这样的:

接下来就开始着手安装东西了(腥风血雨要开始了!)。

安装router和pinia

安装这两个的过程还是比较简单的,基本是可以按照官方文档就可以做完,接下来执行命令:

yarn add vue-router@4 

在根目录新建router文件夹,新建index.ts文件,代码如下:

import { createRouter,createWebHashHistory, RouteRecordRaw} from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

这时候需要在main.ts文件中引入

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

这时候你执行代码的时候,会发现控制台报错,如下:

这是因为vite不能识别@,这其实跟webpack的配置是一样的,重定向一下就可以了。打开vite.config.ts加入以下的内容:

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
+  resolve: {
+    alias: [
+    {
+       find: '@',
+       replacement: path.resolve(__dirname, 'src'),
+     },
+   ],
+  },
})

这时候还是不行的,因为是不能识别到path这个东西的,需要安装@types/node

yarn add @types/node -D

同时需要在tsconfig.node.json中添加compilerOptions.allowSyntheticDefaultImports: true,即如下:

"compilerOptions":{
+  allowSyntheticDefaultImports:true
}

这时候就可以解决之前的报错了。接下来就是pinia的安装:

yarn add pinia

pinia可以说是现在vuex的潮流,必须要尝尝鲜,新增store同时在文件新增index.ts文件

import { defineStore }from 'pinia'
const useStore = defineStore('main',{
    state:()=>{
        return {
            counter: 0,
            name:'RadiomM'
        }
    },
    actions:{
        reset(){
            this.$reset()
        }
    }
})
export default useStore

本人粗略的使用了一下里面的语法,非常的好用,这里只展示最简单的示例。在main.ts里面再引入一下即可。

import { createApp } from 'vue'
import router from './router'
import { createPinia}  from 'pinia'
import App from './App.vue'
createApp(App).use(createPinia()).use(router).mount('#app')

安装ESlint

安装eslint可以说一个比较麻烦的一件事,我是翻阅了不少文章,参考了别人文章的配置,但是途中还是踩了不少坑,有插件也只知道安装,并不知道为了解决什么问题而安装,所以这次我的展示会比较的长,目的是为了介绍每个插件的用途。开始!运行一下命令:

npx eslint --init

按照下面步骤选择,可以完成基本的eslint配置:

选择ESlint用途

什么模块引入方式

什么框架使用eslint

是否使用typescript

运用环境选择

选择流行规则

选择Airbnb规则

用什么类型文件做载体

是否开始安装

用什么工具安装

完成上面步骤后,可以看到项目里新增一个eslintrc.js文件,但是这仅仅是刚开始,接下来看各种坑吧。

eslint的vue规则需要切换

如下报错,在app.vue可以看到,这里提示需要一个根元素,实际上vue3已经不需要写一个根元素了。

这时候需要修改.eslintrc.js文件,如下:

module.exports = {
  env: {
    browser: true,
    es2021: true,
+   'vue/setup-compiler-macros': true, // 这是为了兼容defineProps这种API的
  },
  extends: [
-   'plugin:vue/essential',
+   'plugin:vue/vue3-recommended', // 兼容vue3语法规范
    'airbnb-base',
  ],
+ parser: 'vue-eslint-parser' // 这个插件其实已经安装了,用来解析template语法
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
  },
};

这时候,你去看其他文件的时候会有linebreak-style的错误,这是因为eslint默认是unit的也就是lr行尾,现在可以直接在.eslintrc.js文件中添加新规则:

 'linebreak-style':['error','windows']

注意,如果加了之后没有效果,需要重启vscode才能有效果,实际上很多新加的东西都需要重启才能有效果。这时候整个项目就不存在报错,接着进行下一步。

安装prettier

单纯安装eslint只会提示你代码的格式错误,并不会帮你自动修改,这时候就需要这个prettier来实现这个功能。执行下面的命令:

yarn add eslint-plugin-prettier eslint-config-prettier prettier -D

这时候需要重新修改.eslintrc.js文件,如下:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
+   'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
+    'prettier/prettier':'error',
+    'linebreak-style':['erro','window']
  },
};

这里解释一下这些插件:
eslint-plugin-prettier这个插件主要禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。
eslint-config-prettier不符合prettier规则的时候会报一个错误,同时可以用eslint --fix命令修复。
同时需要新增.prettierrc.js文件,写入下面东西:

module.exports = {
  printWidth: 80, // 每行代码长度(默认80)
  tabWidth: 2, // 每个tab相当于多少个空格(默认2)
  useTabs: false, // 是否使用tab进行缩进(默认false)
  singleQuote: true, // 使用单引号(默认false)
  semi: false, // 声明结尾使用分号(默认true)
  trailingComma: 'es5', // 多行使用拖尾逗号(默认none)
  bracketSpacing: true, // 对象字面量的大括号间使用空格(默认true)
  bracketSameLine: false,
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号(默认avoid)
  endOfLine: 'crlf', // 添加这个属性时,可以将eslint中的linebreak-style删除。
}

接着我们可以再package.json中新增一个命令:

"scripts":{
    "lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",
}

然后可以运行一下命令,感受一下双巨头的加持(啥代码的都没有,一点感受都没有):

yarn lint:script

当然这样也只能是在运行命令的时候才能修复,我们想要的是保存代码的时候就可以实现代码自动格式化,这时候需要在vscodesetttings.json文件中添加下面内容:

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
         },
    },

同时你的vscode需要安装两个插件,如下:

这时候在你保存的时候,就可以代码格式化了。当然,我们也可以在运行项目的时候就让这些错误格式报错。安装插件

yarn add vite-plugin-eslint -D

然后在vite.config.ts文件中添加:

import viteEslint from 'vite-plugin-eslint';
// 具体配置
{
    plugins: [
    // 省略其它插件
    viteEslint(),
    ]
}

现在你可以试着重新启动项目, ESLint 的错误已经能够及时显示到命令行窗口中了。

----------------------------------------补充----------------------------------------- 在你运行yarn lint:script命令的时候,会出现下面的错误:

这里需要一个个问题慢慢解决,首先是import/extensions问题,主要是airbnb规范中的配置是跟我们vue项目不一样的,所以在eslint规则中需要加入下面:

 'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],

而解决依赖位置报错问题import/no-extraneous-dependencies,其实他这个报错是错误的,但是同样解决,同样是新增规则:

 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],

接下来是比较麻烦的import/no-unresolved,这个参考的国外友人的配置解决的。
首先需要安装插件:

yarn add -D eslint-import-resolver-typescript

接下来需要在.eslintrc.js文件中添加如下(和rules同级):

  settings: {
    'import/resolver': {
      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
    },
  },

关于这个配置其实还有js版本的解决办法,可以参考这个网站 最后展示.eslintrc.js文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    'vue/setup-compiler-macros': true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:prettier/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'prettier/prettier': 'error',
    'linebreak-style': ['error', 'windows'],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+   'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
  },
+  settings: {
+    'import/resolver': {
+      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
+    },
+  },
}

安装stylelint

这个就是样式的格式化插件,不废话直接安装:

yarn add stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue -D

同样的需要新建.stylelintrc.js文件,写入以下内容:

module.exports = {
    // 注册 stylelint 的 prettier 插件
    plugins: ['stylelint-prettier'],
    // 继承一系列规则集合
    extends: [
      // standard 规则集合
      'stylelint-config-standard',
      // standard 规则集合的 scss 版本
      'stylelint-config-standard-scss',
      // 样式属性顺序规则
      'stylelint-config-recess-order',
      // 接入 Prettier 规则
      'stylelint-config-prettier',
      'stylelint-prettier/recommended',
      'stylelint-config-recommended-vue'

    ],
    // 配置 rules
    rules: {
      // 开启 Prettier 自动格式化功能
      'prettier/prettier': true,
      // "no-empty-source": null  // style不能是空
    }
  };

再次同样的,需要在settings.json文件中添加配置,目标同样是为了保存文件自动格式化。

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
+           "source.fixAll.stylelint": true
         },
    },
+    "stylelint.validate": ["css", "less", "scss","vue"], 

这时候可以在package.json文件添加命令:

script: {
  "lint:style": "stylelint --fix \"src/**/*.{css,scss}\""
}

其实跟上面的eslint的命令差不多。当然,同样有运行时报错的插件,如下:

yarn add @amatlash/vite-plugin-stylelint -D

然后在 Vite 配置文件中添加如下的内容:

import viteStylelint from '@amatlash/vite-plugin-stylelint'; 

{ plugins:
    [
    // 省略其它插件
    viteStylelint({
    // 对某些文件排除检查
    exclude: /node_modules/ }),
    ]
}

最后展示文件内容:

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import viteEslint from 'vite-plugin-eslint'
import viteStylelint from '@amatlash/vite-plugin-stylelint'

export default defineConfig({
  plugins: [
    vue(),
    viteEslint(),
    viteStylelint({
      // 对某些文件排除检查
      exclude: /node_modules/,
    }),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
})

同样的,可以在vscode中安装下面的插件。

安装husky

安装这个主要是为了卡点,在提交信息的时候,会校验代码格式,保证线上代码规范统一,执行下面命令:

yarn add husky -D
  • 紧接着初始化huskynpx husky install,并将husky作为项目启动前脚步,如下:
{
    "scripts": {
        // 会在安装 npm 依赖后自动执行
        "postinstall": "husky install"
    }
}
  • 添加 Husky 钩子,在终端执行如下命令:
npx husky add .husky/pre-commit "npm-run-lint"

注意window系统下双引号内容需要连接符,mac系统则不需要接着你将会在项目根目录的.husky目录中看到名为pre-commit的文件,里面包含了 git commit前要执行的脚本。现在,当你执行 git commit 的时候,会首先执行 npm run lint脚本,通过 Lint 检查后才会正式提交代码记录。但是会出现这样一种情况,就是我只修改了一个文件,这个检查还是全量检查,所以这个时候需要另外一个工具了。
lint-staged就是用来解决上述全量扫描问题的,可以实现只对存入暂存区的文件进行 Lint 检查,大大提高了提交代码的效率。

yarn add -D lint-staged

然后在 package.json中添加如下的配置:

  "lint-staged": {
    "**/*.{js,jsx,tsx,ts}": [
      "npm run lint:script",
      "git add ."
    ],
    "**/*.scss": [
      "npm run lint:style",
      "git add ."
    ]
  }

接下来我们需要在 Husky 中应用lint-stage,回到.husky/pre-commit脚本中,将原来的npm run lint换成如下脚本:

npx --no -- lint-staged

这样,我们便实现了提交代码时的增量 Lint 检查

安装commitlint

不知道你有没有遇到过,团队合作的时候,你的同事在提交代码的时候,提交信息只有提交二字!!根本不懂他改了什么功能或者是新增了什么需求,或者是改了什么bug!这时候我们就要规范起提交信息来!

yarn add commitlint @commitlint/cli @commitlint/config-conventional -D

接下来新建.commitlintrc.js

module.exports = { extends: ["@commitlint/config-conventional"] };

这个插件提交的规范主要由两部分组成,分别为<type>subject。常用的 type 值包括如下:

  • feat: 添加新功能。
  • fix: 修复 Bug。
  • chore: 一些不影响功能的更改。
  • docs: 专指文档的修改。
  • perf: 性能方面的优化。
  • refactor: 代码重构。
  • test: 添加一些测试代码等等。

接下来我们将commitlint的功能集成到 Husky 的钩子当中,在终端执行如下命令即可:

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

然后就可以完成提交信息的规范了,当提交的信息不符合规范时,会对提交操作的终止,并提示错误,至此我们就完成了这次的从零搭建项目了。

总结

这次的搭建过程中并没有安装css处理插件,但是在vite中安装诸如sass、less都是比较简单的,就举例子sass直接运行yarn add sass即可(本文其实很多插件都是以sass为模板安装的),那么这次的坑就踩到这里了,期待下次的踩坑之旅。 仓库地址

参考:

《深入浅出vite》

从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境

到此这篇关于从零搭建一个vite+vue3+ts规范基础项目的文章就介绍到这了,更多相关vite+vue3+ts项目搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用vue3+TS实现简易组件库的全过程

    目录 前置 组件编写 dropdown form 验证 总结 前置 首先下载vue-cli,搭建我们的环境,vue-create-luckyUi,选择vue3和TypeScript .在src目录下创建package作为组件目录.再安装bootstrap,用bootstrap里面的样式来完成我们的组件. 组件编写 dropdown 首先查看boorstrap文档,是这样用的 <div class="dropdown"> <button class="btn

  • Vue3项目中引用TS语法的实例讲解

    目录 基础语法 vue-router vuex##### elementPlus axios setup script 基础语法 定义data  //script标签上 **lang="ts"** <script lang="ts"> import { defineComponent, reactive, ref, toRefs } from 'vue'; //定义一个类型type或者接口interface来约束data type Todo = {  

  • 使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)

    目录 本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts 2.准备容器 3.实例化 echarts 对象 4.指定配置项和数据 5.给 echarts 对象设置配置项 二.开始绘制流线中国地图 第一步:先绘制一个中国地图 第二步:添加流线 第三步:添加立体投影 总结 本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm in

  • vite创建一个标准vue3+ts+pinia项目

    目录 [01]使用的 Yarn创建项目: [02]在项目中使用pinia [03]添加vue-router [04] 安装按需自动导入插件 [05] 添加element-plus组件库 [06]添加sass [07] 安裝prettier 和 eslint 1.安装依赖项 使用vite创建一个标准vue3+ts+pinia项目的实现示例 [01]使用的 Yarn创建项目: 1.执行命令 yarn create vite my-vue-app --template vue-ts 3.cd my-v

  • vue3中如何使用ts

    目录 如何使用ts app.vue header.vue list.vue listitem.vue footer.vue 如何使用ts 在创建vue脚手架的时候吧typescript选上 app.vue <template>   <!-- <div id="nav">     <router-link to="/">Home</router-link> |     <router-link to=&quo

  • 一个基于vue3+ts+vite项目搭建初探

    目录 前言 环境准备 使用Vite快捷搭建 使用npm 使用yarn 安装依赖 启动项目 修改vite配置文件 找到根目录vite.config.ts文件打开 集成路由 集成Vuex 添加element ui 集成axios 集成Sass Vue3 使用 总结 前言 基于Vue3已经成为默认版本,目前的项目暂时还没有使用过vue3开发和最近有一个全新的新项目的基础下,使用vue3开发项目,必然是未来的一个趋势 下面记录一下怎么使用Vue3 + ts + vite 从0开始搭建一个项目 环境准备

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • 如何搭建一个完整的Vue3.0+ts的项目步骤

    相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正式版本).所以Vue3.0的学习是我们必然的趋势,今天,主要分享一下Vue3.0的详细搭建过程,希望可以为初入Vue3的小伙伴有所帮助. 我们现在开始进入今天的主题啦~~ 一.安装 1. 安装nodejs 此处提供nodejs下载地址: https://nodejs.org/zh-cn/download/ 大家根据自己电脑的配置选择适配的 LTS(

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • vuex在vite&vue3中的简单使用说明

    目录 vuex在vite&vue3的使用 一.说明 二.使用 vue3.x之vite初体验 一.项目搭建 二.附项目结构 三.附项目启动成功图 vuex在vite&vue3的使用 注:本文只讲解vite打包vue3中vuex使用 一.说明 最近vite十分火爆,在构建项目过程中,想要用到vuex,但是在晚上搜索教程过程中,发现大都为vue2以下或者非vite版本的使用. 在这里总结一下vite打包中vue3下使用vuex的使用方式以及遇到的一些坑. 二.使用 1.创建项目(通过vite命令

  • 运用PyTorch动手搭建一个共享单车预测器

    本文摘自 <深度学习原理与PyTorch实战> 我们将从预测某地的共享单车数量这个实际问题出发,带领读者走进神经网络的殿堂,运用PyTorch动手搭建一个共享单车预测器,在实战过程中掌握神经元.神经网络.激活函数.机器学习等基本概念,以及数据预处理的方法.此外,还会揭秘神经网络这个"黑箱",看看它如何工作,哪个神经元起到了关键作用,从而让读者对神经网络的运作原理有更深入的了解. 3.1 共享单车的烦恼 大约从2016年起,我们的身边出现了很多共享单车.五颜六色.各式各样的共

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • 记一次用ts+vuecli4重构项目的实现

    项目背景: 一个以前的项目( 刚入职实习的时候写的,用的vuecli2 ),然后这次要添加修改东西,看着代码看的头大,冲动之下就重构了( 想打死自己,写的啥玩意 ),刚好用下最近刚学的typescript,从搭建开始,一步步更新记录下,怕自己之后忘了再回过头来看看.( 顺便说一句,用起来有点别扭,不过还是挺爽的,期待vue3.0... ) 一.项目搭建: 使用命令   vue create news 创建项目 配置自定义,贴一下我自定义的安装依赖 ts+vuex+router这几个肯定是要的,这

  • SpringBoot系列教程JPA之基础环境搭建的方法

    JPA(Java Persistence API)Java持久化API,是 Java 持久化的标准规范,Hibernate是持久化规范的技术实现,而Spring Data JPA是在 Hibernate 基础上封装的一款框架.JPA作为标准,实际上并没有说局限于某个固定的数据源,事实上mysql,mongo, solr都是ok的.接下来我们将介绍下springboot结合jpa 来实现mysql的curd以及更加复杂一点的sql支持 jpa系列教程将包含以下几块 环境搭建 基础的插入.修改.删除

随机推荐