关于vue3:vue3vitetselementplus搭建项目

一、装置 vite

vite 中武官网 https://vitejs.cn/

Vite 须要 Node.js 版本 >= 12.0.0。

npm 装置：

npm init vite@latest

yarn 装置：

 yarn create vite

装置的时候要求输出项目名称，本人命名一个即可，输完回车。

抉择 vue

应用 vue+ts 开发

而后依照提醒先进入我的项目，装置依赖。

启动我的项目

二、将代码提交到 git 上

在 github 上新建一个我的项目，填写本人项目名称和抉择我的项目共有或者公有等。

在 dos 命令窗口或者 vscode 命令窗口进入我的项目，输出 git init

查看 git status

增加所有文件 git add .

commit 到主分支

 git commit -m 'init'

将本地仓库和近程仓库连接起来

git remote add origin git@github.com:yourname/ 仓库名.git 

将代码推送到近程仓库

git push -u origin master

三、装置 eslint

应用 npm 装置

npm install eslint --save-dev

应用 npx 装置

npx eslint --init

装置时会有一些初始化配置，下图能够作为参考。

eslint 配置完之后在.eslintrc.js 文件中配置 vue3 应用的标准

在 node_modules -> eslint-plugin-vue -> lib -> configs -> 有个 vue3-strongly-recommended.js 文件，这个文件是强烈推荐应用的一个标准。

复制文件名称，批改下图中标识局部。

eslint 装置之后，如何在开发工具 vscode 中应用，首先开发 vue3，须要装置插件 volar，禁用 vue2 的 vetur，装置完之后在配置中进行设置。

设置门路：

 文件 -> 首选项 -> 设置 -> 扩大 -> eslint -> format:enable 打勾即可

而后在 vscode 开发的我的项目中右键格式化文档就行了。

设置完之后在 package.json 文件中设置 lint 命令

"lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix",

这样每次在提交代码前先跑一遍 npm run lint, 代码就会进行标准测验，然而每次都要执行很麻烦，也容易遗记就提交代码，造成 git 仓库格局不对立，所以咱们能够在每次提交代码前进行主动的格式化验证，这块能够装置依赖 lint-staged

npx mrm@2 lint-staged

装置实现之后在 package.json 文件中会新增一个 ”lint-staged” 配置项，批改配置项，每次提交代码会先进行 npm run lint 测验，而后 git add，具体配置如下：

好了，后期筹备工作做好了，下期持续。