【前端开发技巧】使用vite+vue3搭建一个生产级项目架构吧!

·  阅读 3717
【前端开发技巧】使用vite+vue3搭建一个生产级项目架构吧!

「这是我参与2022首次更文挑战的第N天,活动详情查看:2022首次更文挑战」。

前言

大家好,我是Asscre。

近期接手一个Web前端项目,通过对公司人员的技术栈和Javascript掌握程度分析决定选择Vue3框架进项目搭建。

在这里,总结一下本次技术选型后的架构搭建过程。

思路

之前一直使用的Vue2(long long ago),现在我们也通过之前的开发经验进行搭建。

下面,我们就对项目架构依次搭建起来。

撸一个基础项目出来

初始化项目,安装Vue3

npm create vite@latest
复制代码

image.png

// 安装依赖
npm i

// run
npm run dev
复制代码

image.png

api请求: Axios

npm install axios
复制代码

image.png

路由管理:Vue-router

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>
复制代码

效果展示:

image.png

状态管理: Vuex

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>
复制代码

效果:

image.png

Css库:Tailwind css

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
复制代码

添加tailwindcssautoprefixer到您的文件,或在您的项目中配置 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代码,效果:

image.png

UI组件库: 按需导入 Element UI

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()],
    }),
  ],
});

复制代码

代码格式化:Prettier

npm install --save-dev --save-exact prettier
复制代码

接下来我们将为 prettier 创建一个配置文件

因为 prettier 的目标是开箱即用的配置,所以该配置文件的内容可以只是一个空对象。我们只是添加它,因为一些 IDE 使用它的存在来检测更漂亮。如果您想配置 Prettier 确实提供的少数选项之一,请参阅配置选项的 Prettier 文档

echo {}> .prettierrc.json
复制代码

image.png

代码检查:Eslint

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格式规则冲突

最后,我们将关闭与 Prettier 冲突的 ESLint 格式规则。如果我们不执行此步骤,我们将在 2 之间进行一场永无止境的死亡比赛,看起来像这样:

prettier-eslint-battle.gif

如果您在设置 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 或仅用于在终端中手动测试。您可以通过运行相应的命令来快速查看其中的任何一个,但这不一定是您希望在整个开发过程中持续使用它们的方式。

使用 VS Code 为 Vue 3 设置 ESLint 和 Prettier

为了简化您的工作流程,您需要将这 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

ESLint 使用 VS Code 的屏幕截图,提供黄色波浪线以指示警告

所以为了解决这个问题,我们可以做两件事之一。

  1. 如果我们想允许没有默认值的道具,我们可以vue/require-default-prop在文件中关闭规则。.eslintrc.js
// Code/User/settings.json
rules: {
  //...
  "vue/require-default-prop": "off",
},
复制代码
  1. 或者我们通过提供默认值来更改代码以遵守规则,并且波浪线消失了!非常好!

通过使代码符合 ESLint 规则来修复错误的屏幕截图

现在我们已经让 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,然后将图像放在一张上并保存,它会自动弹回它应该在的位置!工作时更漂亮!

Prettier 重新格式化 App.vue 的 gif

如果您将图像更改为循环放置在key之前的虚构项目数组,则v-for如下所示:

<img :key="i" v-for="i in items" alt="Vue logo" src="./assets/logo.png" />
复制代码

您会看到 ESLint 将vue/attributes-order规则付诸实施,在保存时自动修复了问题。这太方便了!

ESLint 修复 vue 属性顺序

浏览器中的 ESLint 错误

对于大多数开发人员和团队来说,我们目前的设置可能足以提高生产力。但是,如果您想更进一步,您可以安装 Vite ESLint 插件以在浏览器中查看覆盖在您的应用程序上的 ESLint 问题。

使用 Vite 在浏览器中覆盖 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

附上项目模板

vite-vue3-template

我是Asscre,看到这里了,点个赞呗!

微信公众号关注: Asscrecn。 让我们一起成长。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改