diff --git a/.env b/.env new file mode 100644 index 00000000..fa204ea2 --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +# 变量需要以VITE开头 + +VITE_APP_TITLE=web-cli +VITE_APP_TITLE_LABEL=web脚手架 +VITE_BASE_URL=/ diff --git a/.eslintignore b/.eslintignore index e25b5e5b..5ee0fc7c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,5 +10,7 @@ lib /mock/ /public /docs +# /build .vscode .local +# vite.config.ts diff --git a/.eslintrc.js b/.eslintrc.js index 08dac4aa..4a106416 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,11 +3,7 @@ module.exports = { browser: true, es2021: true }, - extends: [ - 'plugin:vue/vue3-essential', - 'airbnb-base', - 'plugin:prettier/recommended' - ], + extends: ['plugin:vue/vue3-essential', 'airbnb-base', 'plugin:prettier/recommended'], parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', @@ -15,6 +11,9 @@ module.exports = { }, plugins: ['vue', '@typescript-eslint'], rules: { - 'no-unused-vars': 0 + 'no-unused-vars': 0, + 'import/extensions': ['error', 'never'], + 'import/no-extraneous-dependencies': [2, { devDependencies: true }], + 'import/no-unresolved': 0 } }; diff --git a/.prettierrc.js b/.prettierrc.js index 1a889e95..0aea8bf7 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,5 +1,5 @@ module.exports = { - printWidth: 180, // 超过最大值换行 + printWidth: 120, // 超过最大值换行 tabWidth: 2, // 缩进字节数 useTabs: false, // 缩进使用tab，不使用空格 semi: true, // 句尾添加分号 diff --git a/build/alias/index.ts b/build/alias/index.ts new file mode 100644 index 00000000..db539a9f --- /dev/null +++ b/build/alias/index.ts @@ -0,0 +1,5 @@ +import path from 'path'; + +export default { + '@': path.resolve(__dirname, '/src') +}; diff --git a/build/env/index.ts b/build/env/index.ts new file mode 100644 index 00000000..ca9fde26 --- /dev/null +++ b/build/env/index.ts @@ -0,0 +1,5 @@ +import dotenv from 'dotenv'; + +const { parsed: viteEnv } = dotenv.config(); // 加载环境 + +export default viteEnv; diff --git a/build/index.ts b/build/index.ts new file mode 100644 index 00000000..fb5c7104 --- /dev/null +++ b/build/index.ts @@ -0,0 +1,10 @@ +import alias from './alias'; +import viteEnv from './env'; +import plugins from './plugins'; + + +export { + alias, + viteEnv, + plugins +} diff --git a/build/plugins/html.ts b/build/plugins/html.ts new file mode 100644 index 00000000..05f9581b --- /dev/null +++ b/build/plugins/html.ts @@ -0,0 +1,12 @@ +import { minifyHtml, injectHtml } from 'vite-plugin-html'; // html插件(使用变量、压缩) +import viteEnv from '../env'; + +export default [ + minifyHtml(), + injectHtml({ + injectData: { + title: viteEnv.VITE_APP_TITLE, + appName: viteEnv.VITE_APP_TITLE_Label + } + }) +]; diff --git a/build/plugins/iconify.ts b/build/plugins/iconify.ts new file mode 100644 index 00000000..166de652 --- /dev/null +++ b/build/plugins/iconify.ts @@ -0,0 +1,16 @@ +import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'; // iconify图标 +import Components from 'vite-plugin-components'; // 从指定目录自动导入组件 + +export default [ + Components({ + customComponentResolvers: ViteIconsResolver({ componentPrefix: 'icon' }) // 组件名前缀 + }), + ViteIcons() +]; + +/** + * iconify用法(安装对应的vscode智能提示的插件: Iconify IntelliSense) + * 找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件 + * 确定图标名字：找到图标后复制名字 如：mdi:ab-testing 组件为: + * 样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小 + */ diff --git a/build/plugins/index.ts b/build/plugins/index.ts new file mode 100644 index 00000000..b44df49f --- /dev/null +++ b/build/plugins/index.ts @@ -0,0 +1,8 @@ +import WindiCSS from 'vite-plugin-windicss'; +import html from './html'; +import iconify from './iconify'; +import styleImport from './style-import'; + +const plugins = [...html, ...iconify, ...styleImport, WindiCSS()]; + +export default plugins; diff --git a/build/plugins/style-import.ts b/build/plugins/style-import.ts new file mode 100644 index 00000000..a039e482 --- /dev/null +++ b/build/plugins/style-import.ts @@ -0,0 +1,20 @@ +import styleImport from 'vite-plugin-style-import'; // 按需加载UI框架的组件样式 + +export default [ + styleImport({ + libs: [ + { + libraryName: 'element-plus', + esModule: true, + ensureStyleFile: true, + resolveStyle: name => { + name = name.slice(3); + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + resolveComponent: name => { + return `element-plus/lib/${name}`; + } + } + ] + }) +]; diff --git a/package.json b/package.json index 9a1fdc2b..52a3ed30 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,15 @@ "*.{vue,js,jsx,ts,tsx}": "eslint --fix" }, "dependencies": { + "element-plus": "^1.0.2-beta.44", + "nprogress": "^0.2.0", "vue": "^3.0.5" }, "devDependencies": { "@commitlint/cli": "^12.1.4", "@commitlint/config-conventional": "^12.1.4", + "@iconify/json": "^1.1.349", + "@types/nprogress": "^0.2.0", "@typescript-eslint/eslint-plugin": "^4.25.0", "@typescript-eslint/parser": "^4.25.0", "@vitejs/plugin-vue": "^1.2.2", @@ -24,6 +28,7 @@ "commitizen": "^4.2.4", "cz-conventional-changelog": "^3.3.0", "cz-customizable": "^6.3.0", + "dotenv": "^10.0.0", "eslint": "^7.27.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-config-prettier": "^8.3.0", @@ -33,9 +38,16 @@ "husky": "^6.0.0", "lint-staged": "^11.0.0", "prettier": "^2.3.0", + "sass": "^1.34.0", "typescript": "^4.3.2", "vite": "^2.3.4", - "vue-tsc": "^0.1.6" + "vite-plugin-components": "^0.10.2", + "vite-plugin-html": "^2.0.7", + "vite-plugin-icons": "^0.5.1", + "vite-plugin-style-import": "^0.10.1", + "vite-plugin-windicss": "^0.16.5", + "vue-tsc": "^0.1.6", + "windicss": "^3.0.12" }, "config": { "commitizen": { diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index 266468b5..178d1d40 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -1,6 +1,5 @@