项目初始化
项目介绍： 本项目使用vite2.7.0和vue3.2.23 和 Typescript4.4.4（2021年12月初）最新的版本来实现后台管理项目。并会使用element-plus做UI库，axios做数据交互，vuex做状态管理，vue-router做路由管理, ESlint+Prettier做代码校验和格式化， Echarts做页面图表可视化， less来做css预编译。
初始化源码地址github
1. 准备工作
node -v # 14.17.5 要求要 node 12版本以上
npm -v
yarn -v # 1.22.17 当前最新版
本项目使用 **vscode**作为主编译器[vscode使用](https://www.jianshu.com/p/8e127a3aba55)
2. 初始化
- 参考vite的文档create-vite来做init: vite文档地址
yarn create vite my-demo-app --template vue-ts # 直接初始化vite+vue+ts
cd my-demo-app
yarn
yarn dev # 能看到localhost:3000的默认欢迎页面则初始化成功
此时的vite.config.js和tsconfig.js文件均已初始化默认选项。
vite.config.js的常用配置
tsconfig.json的常用配置
启动项目不能通过本地ip地址访问：解决办法
-
引用UI库:element-plus
yarn add element-plus使用方法更多方式参考：更多用法
// 这里仅展示完整引入 // 修改 main.ts文件 import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' createApp(App).use(ElementPlus, { size: 'small', zIndex: 100 }).mount('#app')<el-button type="primary"> 按钮 </el-button> /*如果页面上能看到蓝色的按钮，就说明引用成功了*/使用方式几乎和element-ui保持一致
-
使用 Less来做css预编译
yarn add less less-loader -D
然后再组件中使用less测试是否成功
<style scoped lang="less">
.text {
color: red;
}
</style>
- 修改一些默认目录结构，这个也可以后面什么时候用到什么时候再定义。
3. 使用 ESlint + Prettier 做代码校验和格式化
哪里不能用校验参考禁用[校验方法](https://www.jianshu.com/p/bb590f8e1c98)
- 引入eslint
yarn add eslint -D
yarn add @typescript-eslint/eslint-plugin -D
yarn add @typescript-eslint/parser -D
yarn add eslint-config-alloy -D
yarn add eslint-config-prettier -D
yarn add eslint-plugin-prettier -D
yarn add eslint-plugin-vue -D
yarn add vue-eslint-parser -D
yarn add vite-plugin-eslint -D
-
配置eslint， 在根目录创建.eslintrc.json文件，并写入以下内容：
// https://eslint.org/docs/user-guide/configuring module.exports = { extends: [ 'eslint:recommended', "plugin:vue/vue3-recommended", "prettier" ], // required to lint *.vue files plugins: [ 'vue' ], // add your custom rules here rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-labels': ['warn', {'allowLoop': true}], 'no-unused-vars': 'off', 'vue/no-mutating-props': 'off', 'vue/require-default-prop': 'off', 'vue/no-unused-vars': 'off', 'vue/prop-name-casing': 'off', 'vue/attribute-hyphenation': 'off', 'vue/no-template-shadow': 'off', 'vue/component-definition-name-casing': 'off' } } -
配置 .eslintignore文件
/build/ /config/ /dist/ /*.js /*.zip /*.rar /node_modules/ /test/unit/coverage/ -
引入Prettier来自动格式化代码
yarn add prettier -D -
配置 Prettier， 在根目录下创建 prettier.config.js文件，并写入以下内容：
// prettier.config.js or .prettierrc.js module.exports = { // 一行最多 100 字符 printWidth: 100, // 使用 2 个空格缩进 tabWidth: 2, // 不使用缩进符，而使用空格 useTabs: false, // 行尾需要有分号 semi: false, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号，而使用双引号 jsxSingleQuote: false, // 末尾不需要逗号 trailingComma: 'none', // 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数，只有一个参数的时候，也需要括号 arrowParens: 'always', // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 换行符使用 lf endOfLine: 'lf' } -
对应的vscode编译器也要安装 ESLint 和 Prettier 扩展
-
编辑 vscode 编辑器的settings.json文件。 ctrl+shift+p打开命令： Open Workspace Settings(JSON)选项，就会在根目录出现一个.vscode的文件夹，修改里面的 settings.json文件如下：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}
此时可以代码自动格式化啦！
初始化源码地址[github](Lzq811/vite-vue-ts-eslint at vite2+vue3+ts4+eslint项目初始化 (github.com))
网友评论