前端：Nuxt3 + Vuetify3 + Element Plus + 添加常用插件

想要开发一个网站，并且支持SEO搜索，当然离不开我们的 Nuxt ，那通过本篇文章让我们一起了解一下。让我们一起来构建下 Nuxt3 集成其它插件
目次
安装 Nuxt3，创建项目
一、搭建脚手架
二、添加 Vuetify 3
2.1、安装 Vuetify 3
2.2、创建 Vuetify 插件
2.3、在 nuxt.config.ts 中配置
三、添加 element-plus
3.1、安装 element-plus
3.2、在 nuxt.config.ts 中配置
四、添加常用插件
4.1、安装sass
4.1.1、增加 assets/css/common.scss 
4.1.2、增加 pages/index.vue
4.1.3、修改app.vue
4.1.4、运行项目，发布乐成如下
4.2、添加 autoprefixer
4.2.1、安装 autoprefixer
4.2.2、在 nuxt.config.ts 中配置
4.3、添加 tailwindcss
4.3.1、安装 tailwindcss
4.3.2、在 nuxt.config.ts 中配置
4.3.3、在根目次创建 tailwind.config.js
 4.3.4、修改 common.scss
4.3.5、测试一下
4.4、添加 pinia 
4.4.1、安装 pinia 
4.4.2、添加 @pinia/nuxt 
4.4.3、添加 pinia-plugin-persist
4.4.4、在 nuxt.config.ts 中配置
4.4.5、新建 store/index.ts 
 4.4.6、新建 store/user.ts 
 4.4.7、测试一下
4.5、添加 nuxt-icons
4.5.1、安装 nuxt-icons
4.5.2、在 nuxt.config.ts 中配置
4.5.3、新建 assets/icons
4.5.4、测试一下
4.6、添加 prettier + eslint
4.6.1 安装 prettier + eslint
4.6.2、新增 .eslintrc.js
4.6.3、新增 .prettierrc.js
4.6.4、新增 .prettierignore
4.6.5、格式化全部文件 
4.6.6、使用路径别名
4.6.7、应用全局样式
4.7、添加 TypeScript
4.7.1、安装 TypeScript
4.7.2、在 nuxt.config.ts 配置
4.7.3、在  tsconfig.json 配置
4.8、添加 less
4.8.1、安装 less
五、请求封装
5.1、安装 axios
5.2、创建 plgins/axios.ts 
5.3、在 nuxt.config.ts 中配置
六、公共方法
6.1 安装 js-cookie
6.2 安装 callapp-lib
七、多语言
7.1 安装 vue-i18n
7.2 安装 @nuxtjs/i18n
7.3、在 nuxt.config.ts 中配置
7.4、配置 /i18n/config.ts
7.5、创建国际化文件
7.5.1、en_us.json
7.5.2、zh_cn.json
7.6、测试一下
7.6.1、按钮直接当前页面变革
7.6.2、将el-select 与i18n进行绑定

---

安装 Nuxt3，创建项目

安装nuxt3， 必要node v18.10.0+，大家记得查看本身的node版本。构建脚手架这块我们参考官方文档来就可以了，nuxt快速搭建官方教程 nuxt中文站 || 主要步调如下：
确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：
一、搭建脚手架

创建的目次必须是空的，否则会构建失败的。 
  

1. npx nuxi@latest init <project-name>

复制代码

如果安装时候遇到异常
  

1. npx nuxi init nuxtst：Failed to download template from registry: https://raw.githubusercontent.com

复制代码

请参考 前端：npx nuxi init nuxtst：Failed to download template from registry: https://raw.githubusercontent.com-CSDN博客

​ 

​

访问  http://localhost:3000/ 乐成即发布乐成~~~~
二、添加 Vuetify 3

2.1、安装 Vuetify 3

1. npm add vuetify@next

复制代码

1. npm i -D vuetify vite-plugin-vuetify
2. npm i @mdi/font

复制代码

2.2、创建 Vuetify 插件

我们已经安装了 Vuetify,现在我们必要它来与 Nuxt 对话。我们将通过使用 Nuxt 的插件功能来做到这一点，创建一个 plugins文件夹，然后创建一个名为vuetify.js的文件
vuetify.js 文件中

1. // plugins/vuetify.js
2. import { createVuetify } from 'vuetify'
3. import '@mdi/font/css/materialdesignicons.css'
4. import 'vuetify/styles'
5. import * as components from 'vuetify/components'
6. import * as directives from 'vuetify/directives'
8. export default defineNuxtPlugin(nuxtApp => {
9.   const vuetify = createVuetify({
10.     components,
11.     directives,
12.     ssr: true,
13.   })
15.   nuxtApp.vueApp.use(vuetify)
16. })

复制代码

注意，我们使用的是 nuxtApp.vueApp.use(vuetify) 而不是 app.use(vuetify) 
2.3、在 nuxt.config.ts 中配置

1. import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
3. export default defineNuxtConfig({
4.   css: ['vuetify/lib/styles/main.sass'],
5.   build: {
6.     transpile: ['vuetify'],
7.   },
8.    modules:[
9.     (_options, nuxt) => {
10.       nuxt.hooks.hook('vite:extendConfig', (config) => {
11.         // @ts-expect-error
12.         config.plugins.push(vuetify({ autoImport: true }))
13.       })
14.     },
15. ],
16.   vite: {
17.     define: {
18.       'process.env.DEBUG': false,
19.     },
20.     vue: {
21.       template: {
22.         transformAssetUrls,
23.       },
24.     },
25.   },
26.   devtools: { enabled: true }
27. })

复制代码

三、添加 element-plus

是否添加element-plus主要根据本身需求可以参考前端：Element UI 与 Vuetify 的选择_vuetify和elementplus对比-CSDN博客
3.1、安装 element-plus

1. npm i element-plus @element-plus/nuxt

复制代码

3.2、在 nuxt.config.ts 中配置

 

四、添加常用插件

4.1、安装sass

1. npm i sass -D

复制代码

4.1.1、增加 assets/css/common.scss 

在根目次下，依次新建文件夹 assets 、css 以及文件common.scss，并加入样式

4.1.2、增加 pages/index.vue

nuxt 项目是自动生成路由的，无需使用 vue-router，全部的路径都放在 pages 文件夹下面，导入公共scss。

4.1.3、修改app.vue

4.1.4、运行项目，发布乐成如下

4.2、添加 autoprefixer

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用CanIUse（caniuse网站）的数据来决定哪些前缀是必要的
4.2.1、安装 autoprefixer

1. npm install autoprefixer -D

复制代码

4.2.2、在 nuxt.config.ts 中配置

1. postcss: {
2.     plugins:{
3.       autoprefixer: {}
4.     }
5. },

复制代码

4.3、添加 tailwindcss

windicss 与 tailwindcss 他们两个其实差不多，有部分语法不通，但是 tailwindcss 的社区更加强大，你想用啥都行。
4.3.1、安装 tailwindcss

1. npm i tailwindcss -D

复制代码

4.3.2、在 nuxt.config.ts 中配置

1. postcss: {
2.     plugins:{
3.       autoprefixer: {},
4.       tailwindcss:{},
5.     }
6. },

复制代码

4.3.3、在根目次创建 tailwind.config.js

 4.3.4、修改 common.scss

1. @tailwind base;
2. @tailwind components;
3. @tailwind utilities;
5. .main{
6.   color: blue;
7. }

复制代码

4.3.5、测试一下

修改 pages/index.vue 使用 tailwind 语法设置样式

4.4、添加 pinia 

4.4.1、安装 pinia 

1. npm i pinia

复制代码

4.4.2、添加 @pinia/nuxt 

1. npm i @pinia/nuxt

复制代码

4.4.3、添加 pinia-plugin-persist

pinia本身不提供持久化存储状态，这里我们使用插件 pinia-plugin-persist 进行持久化存储。

1. npm i pinia-plugin-persist

复制代码

4.4.4、在 nuxt.config.ts 中配置

1.   modules: ['@pinia/nuxt'],

复制代码

4.4.5、新建 store/index.ts 

1. import { createPinia} from 'pinia'
2. import piniaPluginPersist from 'pinia-plugin-persist';
4. // 创建
5. const pinia = createPinia();
6. pinia.use(piniaPluginPersist);
8. // 导出
9. export default pinia;

复制代码

 4.4.6、新建 store/user.ts 

1. import {acceptHMRUpdate, defineStore} from "pinia";
3. export const useStore =  defineStore("user", {
4.     state: () => {
5.         return {
6.             token: "",
7.             name: 'old name'
8.         };
9.     },
10.     actions: {
11.         // 用户登录
12.         login(data: any) {
13.             this.setToken(data);
14.         },
15.         // 单独更新或写入token
16.         setToken(data: any) {
17.             this.token = data;
18.         }
19.     },
20.     persist: {
21.         enabled: true,
22.         strategies: [
23.             {
24.                 key: "USER-INFO",
25.                 storage: process.client ? localStorage : null,
26.             },
27.         ],
28.     },
29. });
31. if (import.meta.hot) {
32.     import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
33. }

复制代码

 4.4.7、测试一下

4.5、添加 nuxt-icons

4.5.1、安装 nuxt-icons

1. npm i nuxt-icons

复制代码

4.5.2、在 nuxt.config.ts 中配置

1. modules: ['@pinia/nuxt', 'nuxt-icons'],

复制代码

4.5.3、新建 assets/icons

注意：icons目次是固定的。
 

4.5.4、测试一下

4.6、添加 prettier + eslint

背面的 typescript 一定要安装，nuxt3 项目初始化后默认没有 typescript 插件
4.6.1 安装 prettier + eslint

1. npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-vue typescript -D

复制代码

4.6.2、新增 .eslintrc.js

4.6.3、新增 .prettierrc.js

4.6.4、新增 .prettierignore

1. /dist
2. /node_modules
3. *.yml
4. *.yaml
5. tsconfig.json
6. *.svg
7. *.png
8. *.jpg
9. *.jpeg
10. *.scss
11. *.gif
12. *.webp
13. *.ttf
14. index.html
15. *.md

复制代码

4.6.5、格式化全部文件 

重启下编译器即可(因为我使用的是IDEA)
4.6.6、使用路径别名

将路径 ../ 修改为 @
4.6.7、应用全局样式

把 common.scss 配置在 nuxt.config.ts 中，这样全部文件都可以用里面的全局样式了

1.   css: ['vuetify/lib/styles/main.sass', '@/assets/css/common.scss'],

复制代码

项目必要用到的根本框架都搭建完成了，本项目集成 Vuetify 以是根本不消写什么样式，上述应用common.scss 主要是让大家知道必要个性化样式的时候如何创建引用。
4.7、添加 TypeScript

在开发过程中启动运行或项目构建时启用类型查抄，那么我们必要执行如下命令安装安装 TypeScript 
4.7.1、安装 TypeScript

1. npm i -D vue-tsc@1 typescript

复制代码

4.7.2、在 nuxt.config.ts 配置

1. typescript: {
2.   // 启用项目启动运行或构建时自动类型检查
3.   typeCheck: true,
4.   // 开启严格模式
5.   strict: true
6. }

复制代码

4.7.3、在  tsconfig.json 配置

1. {
2.   // https://nuxt.com/docs/guide/concepts/typescript
3.   "compilerOptions": {
4.     "target": "esnext",
5.     "useDefineForClassFields": true,
6.     "module": "esnext",
7.     "moduleResolution": "node",
8.     "strict": true,
9.     "jsx": "preserve",
10.     "sourceMap": true,
11.     "resolveJsonModule": true,
12.     "esModuleInterop": true,
13.     "lib": ["esnext", "dom"],
14.     "baseUrl": ".",
15.     "allowJs": true,
16.     "forceConsistentCasingInFileNames": true,
17.     "allowSyntheticDefaultImports": true,
18.     "strictFunctionTypes": false,
19.     "noUnusedLocals": true,
20.     "noUnusedParameters": true,
21.     "experimentalDecorators": true,
22.     // 对于在表达式和声明上有隐含的 any 类型时是否报错
23.     "noImplicitAny": true,
24.     "skipLibCheck": true,
25.     "allowImportingTsExtensions": true,
26.     "paths": {
27.       "/@/*": ["./src/*"]
28.     },
29.     "types": [],
30.     "typeRoots": ["./node_modules/@types/", "./types"]
31.   },
32.   "extends": "./.nuxt/tsconfig.json",
33.   "include": ["dist", "node_modules","src/**/*", "types/**/*.d.ts", "mock/**/*.ts", "auto-imports.d.ts"]
34. }

复制代码

启用项目启动运行或构建时自动类型查抄 
4.8、添加 less

将全部的公用颜色自界说
4.8.1、安装 less

1. npm i -d less

复制代码

五、请求封装

5.1、安装 axios

1. npm i axios

复制代码

5.2、创建 plgins/axios.ts 

1. export default function ({ $axios, redirect }) {
2.   $axios.onRequest(config => {
3.     console.log('Making request to ' + config.url)
4.   })
5.   $axios.onResponse(response => {
6.     // console.log(response)
7.     if(response.status == 200) {
8.       return response.data;
9.     }
10.   })
11.   $axios.onError(error => {
12.     const code = parseInt(error.response && error.response.status)
13.     if (code === 400) {
14.       redirect('/400')
15.     }
16.   })
17. }

复制代码

5.3、在 nuxt.config.ts 中配置

1. modules: [
2.   '@nuxtjs/axios'
3. ],
4. plugin: [
5.   '~/plugins/axios'
6. ]

复制代码

关于 axios常用类 大家可以去网上看下，有很多模版，根据本身实际情况进行封装
六、公共方法

6.1 安装 js-cookie

用来记任命户信息或者偏好设置等信息

1. npm i js-cookie

复制代码

6.2 安装 callapp-lib

vcallapp 是一个方便通过 vue 指令唤起 APP 的解决方案

1. npm i callapp-lib

复制代码

七、多语言

7.1 安装 vue-i18n

1. npm i vue-i18n

复制代码

7.2 安装 @nuxtjs/i18n

1. npm i @nuxtjs/i18n -D

复制代码

7.3、在 nuxt.config.ts 中配置

1. //nuxt.config.ts
2. export default defineNuxtConfig({
3.   modules: [
4.     '@nuxtjs/i18n',
5.   ],
6.   i18n: {
7.     strategy: 'prefix_and_default',  // 添加路由前缀no_prefix
8.     locales: ["en","zh"],            // 配置语种
9.     defaultLocale: 'zh',             // 默认语种
10.     vueI18n: './i18n/config.ts',     // 通过vueI18n配置
11.   },
13. })

复制代码

7.4、配置 /i18n/config.ts

1. // i18n/config.ts
2. import en from "assets/lang/en_us.json";
3. import zh from "assets/lang/zh_cn.json";
4. export default defineI18nConfig(() => ({
5.     legacy: false,  // 是否兼容之前
6.     fallbackLocale: 'en',  // 区配不到的语言就用en
7.     messages: {
8.         en,
9.         zh
10.     }
11. }))

复制代码

7.5、创建国际化文件

7.5.1、en_us.json

1. {
2.   "user": {
3.     "name": "hello"
4.   }
5. }

复制代码

7.5.2、zh_cn.json

1. {
2.   "user": {
3.     "name": "姓名"
4.   }
5. }

复制代码

7.6、测试一下

7.6.1、按钮直接当前页面变革

7.6.2、将el-select 与i18n进行绑定

达到改变i18n语言的目标并且语言改变时触发方法进行页面跳转

1. <template>
2.      ...
3.      <el-select v-model="locale" placeholder="Select" @change="changeLang">
4.         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
5.      </el-select>
6.      ...
7. </template>
8. <script setup lang='ts'>
9. ...
10. const route = useRoute()
11. const { locale } = useI18n()
13. // 语言切换跳转页面
14. const localeRoute = useLocaleRoute()
15. const changeLang = async () => {
16.     // 用于把当前页面生成对应的语言前缀的路由,例如:/zh/,/zh/about
17.     const routePath = localeRoute({ path: route.fullPath, query: { ...route.query } })
18.     if (routePath) {
19.         return navigateTo(routePath.fullPath)
20.     }
21. }
22. </script>

复制代码

到这里我们就完成了Nuxt3 + Vuetify3 + Element Plus + 添加常用插件的搭建
如果有什么问题可以联系我，相互交流。.Eamil:dingcho@kingbal.com/QQ:346327002/WX:tinwiy

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。