Vue3 + Vite + vuex 项目配置

0 vue3开发者工具

1 vue3官网vite配置

$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

这里选择的是vue的js版本

npm i
npm run dev

2 安装 prettier 官网

npm install --save-dev --save-exact prettier

然后按照官网依次添加 .prettierrc.json .prettierignore 测试 成功。

3 git 初始化仓库 git init

4 安装lint-staged、husky 文档
配置 git hooks 让 prettier 能够随着 commit 自动运行
npx mrm@2 lint-staged
整完之后记得在package.json中lint-staged项的检查里添加上 .vue

  "lint-staged": {
    "*.{js,css,md,vue}": "prettier --write"
  }

5 安装 commitlint 并配置 husky
配置commitlint : 规则
npm install --save-dev @commitlint/config-conventional @commitlint/cli
echo module.exports = {extends: ['@commitlint/config-conventional']} > commitlint.config.js
配置自动运行commitlint
npx husky add .husky/commit-msg "npx commitlint --edit $1" 这行命令会失效,替代方法:
手动在.husky文件夹建立文件commit-msg,内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx commitlint --edit $1

6 安装 element-plus 文档 引入

7 添加 vue-router
npm install vue-router@4

N 添加 TIM
npm install tim-js-sdk --save

vue全局变量 window prototype vuex 参考链接:

https://segmentfault.com/q/1010000019252359/a-1020000019252544
https://blog.csdn.net/qq_40259641/article/details/90635778
https://blog.qianxiaoduan.com/archives/435

其他链接
基础总结:https://www.kancloud.cn/cyyspring/vuejs/944325

vuex资料:

https://zhuanlan.zhihu.com/p/356886441
https://github.com/weipxiu/Vue-vuex/tree/master/src/store
https://github.com/GitfishHub/vue.3.0easyencapsulation
https://blog.csdn.net/wu_xianqiang/article/details/110293672
https://juejin.cn/post/6845166891393105928#heading-5
http://www.zhongweipeng.cn/2019/02/23/vuex%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F/

你可能感兴趣的:(前端,vue3,vite)