--- theme: fancy highlight: atom-one-light --- > Hi~，我是[一碗周](https://juejin.cn/user/3350967174838701/posts "https://juejin.cn/user/3350967174838701/posts")，如果写的文章有幸可以得到你的青睐，万分有幸~ ## 🍍 写在前面 Nuxt3在今年的4月分发布RC版本，到现在也已经大半年了，估计用不了多久正式版也就该发布了，也该是时候体验一下Nuxt3了。这个项目模板已经包含了以下的内容 - 🎨 **使用Tailwind作为CSS组件库，并安装**[**daisyUI**](https://daisyui.com/)**插件**，关于daisyUI可以参考：[daisyUI快速上手](https://juejin.cn/post/7121355067357298696)； - 💪 ESlint和Stylelint代码检验； - 🐶 创建Git commit message规范校验； - 🎉 天然支持Vue3、Typescript、Vite等； - 🍍 集成Pinia作为状态管理； - 🥤 集成vueuse作为Hooks库； - 🎊文件式路由、componentsAPI自动导入、组件自动导入等；这里我使用pnpm作为包管理工具，其版本如下： - Node：v16.15.0 - pnpm：7.14.2 ## 🍓 安装Nuxt3 由于国内的网络环境访问Github经常挂，这里准备了三种安装方式，准确的说还是一种，只不过由自动变成了手动。 ### 🍕 脚手架方式安装通过脚手架方式安装也是官网中提供的，命令比较简单，如下所示： ```bash pnpm dlx nuxi init nuxt3-template ``` 这种方式经常会失败，失败后可以多次尝试，如果还不行可以选择下一种； ### 🧁 直接下载压缩包第二种方式比较简单粗暴，直接下载脚手架中使用的模板，下载地址【】，然后解压就可以了，与第一种方式得到的最终效果是一致的。 ### 🍬 复制粘贴如果第二种也不能下载的话，可以尝试第三种，就是复制粘贴模板中的代码，这个更无脑，直接依次在根目录下创建下面这些文件并粘贴即可： `package.json` ```json { "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "nuxt": "3.0.0-rc.13" } } ``` `.gitignore` ``` node_modules *.log* .nuxt .nitro .cache .output .env dist ``` `app.vue` ```vue ``` `nuxt.config.ts` ```ts // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ }) ``` `tsconfig.json` ```json { // https://v3.nuxtjs.org/concepts/typescript "extends": "./.nuxt/tsconfig.json" } ``` ### 🍗 安装依赖选择自己的包管理工具安装依赖 ```bash # yarn yarn install # npm npm install # pnpm pnpm install --shamefully-hoist ``` 然后执行`pnpm dev`即可看到下面这个页面： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9c3747a3bc043b2a27115840c43fecb~tplv-k3u1fbpfcp-watermark.image?) 到这我们的第一步就已经完成了。 ## 🍣 规范规范规范在一个项目中代码检查、统一代码风格肯定是不能少的，我们依次来看： ### 🥯 ESlint ESlint是什么我就不多说了，这里我代码格式化也是使用的ESlint，用的是[Anthony Fu](https://github.com/antfu)大佬的[ESlint](https://github.com/antfu/eslint-config)配置，为什么不用Prettier，看看大佬怎么说： [Why I don't use Prettier (antfu.me)](https://antfu.me/posts/why-not-prettier) 大佬的配置使用给了非常详细的步骤，这里我就在搬一下：安装依赖: ```bash pnpm i -D eslint @antfu/eslint-config typescript ``` 创建`.eslintrc`配置文件，并写入下面这段内容： ``` { "extends": "@antfu" } ``` 创建`.vscode/settings.json`配置文件，并写入下面这段内容 ``` { "prettier.enable": false, "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } ``` 简单几步就配置完成了，比自己安装各种包要省心的多，也不需要过多的考虑，而且可以轻松的覆盖各种规则。 ### 🌴 Stylelint 这里配置一下Stylelint，用于检测CSS是否规范，虽然这个项目中会安装TailwindCSS但是也不可能一行CSS不写，所以还是需要简单配置一下的。首先我们安装一下依赖： ```bash pnpm i -D stylelint stylelint-config-standard postcss-html stylelint-config-html stylelint-config-recess-order ``` - `stylelint`：核心库 - `stylelint-config-standard`：CSS规范 - `postcss-html`：`stylelint-config-html`中依赖这个包 - `stylelint-config-html`：可以格式化HTML、Vue中的style标签中的CSS - `stylelint-config-recess-order`：调整属性的顺序安装完依赖后我们需要创建一个`style.config.js`文件并写入下面这些内容： ``` module.exports = { /* 继承某些已有的规则 */ extends: [ 'stylelint-config-standard', // 配置stylelint拓展插件 'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化 'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件, ], overrides: [ // 扫描 .vue/html 文件中的