| theme |
|---|
channing-cyan |
大家好，我是 Asscre。
近期接手一个 Web 前端项目，通过对公司人员的技术栈和 Javascript 掌握程度分析决定选择 Vue3 框架进项目搭建。
在这里，总结一下本次技术选型后的架构搭建过程。
之前一直使用的 Vue2（long long ago）,现在我们也通过之前的开发经验进行搭建。
- 框架： Vue3
- api 请求： Axios
- 路由管理： Vue-router
- 状态管理：Vuex
- Css 库：Tailwind css
- UI 组件库：Element UI
- 代码检查： Eslint
- 代码格式化： Prettier
下面，我们就对项目架构依次搭建起来。
npm create vite@latest// 安装依赖
npm i
// run
npm run devnpm install axios
npm install vue-router@4创建 3 个页面
// home page
<template>
<div>home page</div>
<button @click="toAbout">toAbout</button>
</template>
<script setup>
import router from '../routes';
const toAbout = () => {
router.push('./about');
};
</script>
// about page
<template>
<div>about page</div>
<button @click="toHome">toHome</button>
</template>
<script setup>
import router from '../routes';
const toHome = () => {
router.push('/');
};
</script>
// 404 page
<template>
<div>404</div>
</template>初始化路由
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/home.vue';
import About from '../pages/about.vue';
import NotFound from '../pages/not-found.vue';
const routes = [
{
path: '/',
component: Home,
meta: { title: 'Home' },
},
{
path: '/About',
component: About,
meta: { title: 'About' },
// example of route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// component: () => import('./views/About.vue')
},
{ path: '/:path(.*)', component: NotFound },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
// 路由全局前置守卫
router.beforeEach((to, from, next) => {
// console.log("路由全局前置守卫", to, from);
next();
});
// 路由全局后置守卫
router.afterEach((to, from, next) => {
console.log('路由全局后置守卫', to, from);
next();
});
export default router;注册路由
/main.js
import { createApp } from 'vue';
// import './tailwind.css';
import App from './App.vue';
import router from './routes';
createApp(App).use(router).mount('#app');src/App.vue
<template>
<router-view />
</template>效果展示：
npm install vuex@next --save初始化 vuex,src/store/index.js
import { createStore } from 'vuex';
const store = createStore({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
state.count++;
},
},
});
export default store;挂载：
import { createApp } from 'vue';
import App from './App.vue';
import router from './routes';
import store from './store';
createApp(App).use(router).use(store).mount('#app');使用：
<template>
<div>home page</div>
<p>{{ store.state.count }}</p>
<button @click="toAbout">toAbout</button>
<button @click="increment">+</button>
</template>
<script setup>
import router from '../routes';
import store from '../store';
const toAbout = () => {
router.push('./about');
};
const increment = () => {
store.commit('increment');
console.log(store.state.count);
};
</script>效果：
Tailwind CSS 的工作原理是扫描您的所有 HTML 文件、JavaScript 组件和任何其他模板以查找类名，生成相应的样式，然后将它们写入静态 CSS 文件。
生成的样式是原子级的 Css。
- 安装 Tailwind css
因为我们使用的 vite 创建的工程项目，既然要便于开发者快速响应开发，我们就要使用到PostCSS 帮助我们快速监听生成 css 样式。
通过 npm 安装
tailwindcss及其对等依赖项，并创建您的文件。tailwind.config.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init添加
tailwindcss和autoprefixer到您的文件，或在您的项目中配置 PostCSS 的任何位置。postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};在文件中添加所有模板文件的路径
tailwind.config.js。
module.exports = {
content: ['./src/**/*.{html,js,vue}'],
theme: {
extend: {},
},
plugins: [],
};
@tailwind将 Tailwind 的每个层的指令添加到您的主 CSS 文件中。 /index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
npm run dev使用文件中配置的命令或任何命令运行构建过程package.json。
npm run dev/main.js 中引入 tailwindcss
import './tailwindcss.css';修改一下 home page 代码，效果：
npm install -D unplugin-vue-components unplugin-auto-import
在 vite.config.js 中导入 element
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
});
npm install --save-dev --save-exact prettier
接下来我们将为 prettier 创建一个配置文件。
因为 prettier 的目标是开箱即用的配置，所以该配置文件的内容可以只是一个空对象。我们只是添加它，因为一些 IDE 使用它的存在来检测更漂亮。如果您想配置 Prettier 确实提供的少数选项之一，请参阅配置选项的 Prettier 文档。
echo {}> .prettierrc.json
npm install --save-dev eslint eslint-plugin-vue
接下来，我们将通过创建.eslintrc.js具有以下配置的文件来配置 ESLint，以便将其配置为使用 ESLint 推荐规则以及 Vue 3 的推荐规则。
module.exports = {
env: {
node: true,
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
],
rules: {
// override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error'
}
}
如果需要，请访问 eslint-plugin-vue 文档以查看可用于 Vue 3 的其他配置，以获得不太严格的选项。不同的配置对应Vue.js 3 style guide中的 3 个不同的优先级。
最后，我们将关闭与 Prettier 冲突的 ESLint 格式规则。如果我们不执行此步骤，我们将在 2 之间进行一场永无止境的死亡比赛，看起来像这样：
如果您在设置 Prettier 和 ESLint 时没有意识到这一步，那么您可能再也不想使用这两个工具了！幸运的是，它很容易修复。
我们只需要安装eslint-config-prettier配置。 这将禁用 Prettier 将负责处理的 ESLint 中的格式化规则。
npm install eslint-config-prettier --save-dev
.eslintrc.js并在 extends 下的文件中注册配置。确保它是在扩展数组中定义的最后一个配置，因为配置的顺序决定了处理不同配置中的重复规则（以后的配置会覆盖以前的配置）！
//.eslintrc.js
extends: [
'eslint:recommended',
"plugin:vue/vue3-recommended",
"prettier"
],
此时，我们应该设置为让 ESLint 报告并纠正可修复的错误，并让 Prettier 重新格式化我们的源代码。让我们将以下两项添加到scriptspackage.json 的部分。
"scripts":{
//...
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write"
}
此处定义的lint命令非常适合在 CI/CD 管道中运行 lint 或仅用于在终端中手动测试。您可以通过运行相应的命令来快速查看其中的任何一个，但这不一定是您希望在整个开发过程中持续使用它们的方式。
为了简化您的工作流程，您需要将这 2 个工具与您的 IDE 集成。这样做可以让您实时为错误添加下划线，并提供 ESLint 错误的自动修复和文件保存时更漂亮的格式。谈论节省时间！由于 VS Code 是一个免费且流行的 IDE，也是我使用的 IDE，让我们看看如何将 ESLint 和 Prettier 与 VS Code 集成到您的 Vite 驱动的 Vue.js 3 项目中。
首先，您需要为 Prettier 和 ESLint 安装 2 个相应的插件。如果您还没有安装 Vetur ，您还需要安装它，因为它为 .vue 文件提供语法高亮和更多功能。
接下来，在您的 VS 代码设置中，您应该提供以下内容以关闭 Vetur 对模板的验证，并让 ESLint 根据.eslintrc.js文件中的规则处理它。
// Code/User/settings.json
"vetur.validation.template": false
现在，如果您打开 HelloWorld 组件，您可以看到 ESLint 正在运行。你可以看到下面的黄色波浪线msg: String，如果你将鼠标悬停在它上面，你会看到更多关于为什么 ESLint 会警告你的信息。在这种情况下，这是因为规则vue/require-default-prop。
所以为了解决这个问题，我们可以做两件事之一。
- 如果我们想允许没有默认值的道具，我们可以
vue/require-default-prop在文件中关闭规则。.eslintrc.js
// Code/User/settings.json
rules: {
//...
"vue/require-default-prop": "off",
},
- 或者我们通过提供默认值来更改代码以遵守规则，并且波浪线消失了！非常好！
现在我们已经让 ESLint 直接在文件中报告错误，但我们没有任何自动设置让 Prettier 重新格式化代码或让 ESLint 自动更正可修复的问题。我们可以通过将以下内容添加到我们的 VS 代码设置中来告诉 VS 代码在保存时执行这两项操作。
// Code/User/settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
我们还应该确保我们的 vue 和 js 文件已配置为具有以下设置的默认格式化程序更漂亮：
// Code/User/settings.json
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
现在，如果你打开 App.vue，然后将图像放在一张上并保存，它会自动弹回它应该在的位置！工作时更漂亮！
如果您将图像更改为循环放置在key之前的虚构项目数组，则v-for如下所示：
<img :key="i" v-for="i in items" alt="Vue logo" src="./assets/logo.png" />
您会看到 ESLint 将vue/attributes-order规则付诸实施，在保存时自动修复了问题。这太方便了！
对于大多数开发人员和团队来说，我们目前的设置可能足以提高生产力。但是，如果您想更进一步，您可以安装 Vite ESLint 插件以在浏览器中查看覆盖在您的应用程序上的 ESLint 问题。
这使得那些无法自动修复的 ESLint 错误无法被忽略。我知道一些喜欢这个的开发人员和其他人觉得它超级烦人，所以如果你愿意就安装它，否则只要确保你特别注意你的 IDE 中的那些红色曲线。
vite-plugin-eslint通过运行安装
npm install vite-plugin-eslint --save-dev
然后通过导入插件注册插件并将其添加为插件vite.config.js
import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
plugins: [eslintPlugin()],
});
就是这样，任何 ESLint 错误现在都会在浏览器中报告！如果它不适合您，请尝试重新启动development server。