项目基本配置
这篇文章我们随着上一篇文章继续往下叙述，主要是将element和windicss等开发配置进项目中，以及基本的一些页面和组件给他完成。
1. 安装element plus
运行： npm install element-plus --save
这里我们是按需引入(自动)：可以减少打包后项目的大小，加快项目的启动速度
运行：npm install -D unplugin-vue-components unplugin-auto-import
接着在vite.config.ts中添加代码：
能显示出来则代表我们安装成功了。
2. 安装windicss
windicss是一个新的css框架，它提供了许多富有原子性样式的样式属性。
运行：npm i -D vite-plugin-windicss windicss
配置vite.config.ts文件：
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [
WindiCSS(),
],
}
最后在main.ts中添加:
import 'virtual:windi.css'
贼完成安装
3. 安装配置eslint
Vue 团队维护着 eslint-plugin-vue 项目，它是一个 ESLint 插件，会提供 SFC 相关规则的定义。
1. 安装
运行：npm install -D eslint eslint-plugin-vue
2. 初始化
运行：npm init @eslint/config
选择适配你项目的选项：
修改.eslintrc.js文件
3. vite配置eslint
运行安装：npm install vite-plugin-eslint --save-dev
修改vite.config.ts文件：
export default defineConfig({
plugins: [
...
eslint(),
],
})
4. 配置prettier
创建.prettierrc
添加你需要的配置：
{
"tabWidth": 4,
"useTabs": false,
"semi": false,
"singleQuote": false,
"TrailingCooma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid"
}
5. element plus 主题定制以及黑暗模式
在src下创建目录design，创建三个文件：
-
index.scss：存放项目中需要用到的样式文件
-
elementPlus/theme.scss：定制elementplus样式文件
-
elementPlus/dark-theme.scss：定制elementplus暗黑模式样式文件
-
vite.config.ts配置：
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/design/elementPlus/theme.scss" as *;`,
},
},
},
plugins: [
vue(),
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: "sass",
}),
],
}),
Components({
resolvers: [
ElementPlusResolver({
importStyle: "sass",
}),
],
}),
WindiCSS(),
eslint(),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"@c": fileURLToPath(new URL("./src/components", import.meta.url)),
},
},
})
