Leafage的诞生（3.Nuxt.js配置及页面自动引入组件）

本文个人博客地址：https://www.leafage.top/posts/detail/21310GTY2上篇文章记录了两者functions在nuxtjs中的使用，本文将继续介绍nuxtjs的相关使用以及我在开发Leafage过程中遇到的问题及解决方法。我们先来看看nuxt.config.js。这个配置文件是nuxtjs的核心配置文件。Nuxtjs会根据这个配置文件中的配置项在.nuxt目录下生成文件。exportdefault{//全局头配置(https://go.nuxtjs.dev/config-head)head:{title:'leafage-ui',meta:[{charset:'utf-8'},{name:'viewport',content:'width=device-width,initial-scale=1'},{hid:'description',name:'description',content:''},//这里可以添加网站验证码信息{name:'google-site-verification',content:'xxx'},//测出百度无法通过验证，未解决此问题{name:'baidu-site-verification',content:'code-xxx'},],link:[{rel:'icon',type:'image/x-icon',href:'/favicon.ico'}],},//全局css(https://go.nuxtjs.dev/config-css)css:['~/node_modules/highlight.js/styles/github.css'//例如：导入highlight.js的github样式],//配置完成后将在页面呈现之前加载(https://go.nuxtjs.dev/config-plugins)plugins:['~/plugins/mock','~/plugins/axios'],//自动导入组件(https//go.nuxtjs.dev/config-components)//components:true,//nuxtjs2.15版本之前的方法//2.15版本之后使用这个方法components:['~/components/global'//扫描这个路径，全局目录下的.vue文件组件，作为组件，可以自动导入，使用时不需要手动导入]//开发构建模块（推荐）(https://go.nuxtjs.dev/config-modules)buildModules:[//https://go.nuxtjs.dev/typescript'@nuxt/typescript-build',//https://go.nuxtjs.dev/tailwindcss'@nuxtjs/tailwindcss',],//工具模块(https://go.nuxtjs.dev/config-modules)模块：[//https://go.nuxtjs.dev/axios'@nuxtjs/axios',//https://go.nuxtjs.dev/pwa'@nuxtjs/pwa',],//nuxt加载进度条配置(https://zh.nuxtjs.org/api/configuration-loading)loading:{color:'black'},//如果添加了@nuxt/axios这个配置将需要覆盖一些默认配置（https://go.nuxtjs.dev/config-axios）axios:{https:true,progress:true,//是否显示加载进度条credentials:true,//请求携带cookiebaseURL:'https://www.abeille.top/api',proxy:true//请求代理，解决跨域problemsduringdevelopment},//打包配置(https://go.nuxtjs.dev/config-build)build:{//例如：添加css拆分配置extractCSS:true,},}以上是基本配置项,nuxt.config.js的使用示例和说明。更多配置请参考相关模块文档以上介绍了如何通过components配置项开启自动导入，使用时无需手动导入。示例如下：可以看到模块中没有import引入TopPosts、Pagation、SideBar组件，也没有components项出现，是因为在nuxt.config.js中启用了自动导入过程你可能会注意到layout.vue中有一个组件，用于展示项目中的其他组件，该组件将被替换为.vuepages目录下的显示内容文件。对于路由的使用，nuxtjs提供了来替代vue中的，以及来替代vue中的。相关的使用方法与之相对应。前面提到nuxtjs是根据pages目录下的结构生成路由信息的，例如：pages/index.vue生成路由如下：{"name":"index","path":"/","component":"D:\\\\other\\\\leafage-ui\\\\pages\\\\index.vue","chunkName":"pages/user"},pages/posts/index.vue会生成：{“名称”：“帖子”，“路径”：“/帖子”，“组件”：“D：\\\\其他\\\\leafage-ui\\\\页面\\\\帖子\\\\index.vue","chunkName":"pages/posts/index"}如何配置生成动态路由，例如：posts/detail/:slug?，这样的动态路由需要使用开头的文件命名方式一个下划线，如下所示：{"name":"posts-detail-slug","path":"/posts/detail/:slug?","component":"D:\\\\other\\\\leafage-ui\\\\pages\\\\posts\\\\detail\\\\_slug.vue","chunkName":"pages/posts/detail/_slug"}上面的例子，体现在目录中结构如下：注意：你有没有注意到这里使用小写的名字来命名文件。其实也可以用大写字母（全小写路径匹配也可以匹配），但建议全小写独立词，因为路由信息是根据文件夹和文件名创建的，如果路径的首字母page是大写生成的，那么在生成的路由信息??中，路径也是大写的，其实是不规范的。示例如下：{"name":"User","path":"/User","component":"D:\\\\other\\\\leafage-ui\\\\pages\\\\User.vue","chunkName":"页面/用户"}