@bgColor:#f00;.el-container{width:100%;高度：100%；.el-main{颜色：@bgColor；高度：100%；填充：0；}}nuxtjs快速入门（nuxt2）提示：本文是博主看b站up主前端又名老师视频整理的文章视频教程：《CMS全栈项目》系列9：Nuxt+ElementUInuxtjs官网（nuxt2）：NuxtJS前言注：本文为nuxt2：本文可以带你快速搭建一个简单的Nuxt.js项目。Nuxt.js是一个基于Vue.js的通用应用程序框架。Nuxt.js预设使用Vue.js开发服务端渲染（SSR）应用所需的各种配置。文章简单介绍了Nuxt.js的基本功能，让你快速上手Nuxt！提示：以下为本文正文，以下案例供参考。1.快速生成nuxt工程。运行create-nuxt-app以确保安装了npx（npx在NPM5.2.0版本中默认安装）：npxcreate-nuxt-app或使用yarn：yarncreatenuxt-app2.nu??xtjs配置IP和端口在开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录的package.json中配置config项。比如现在我们要配置IP为127.0.0.1，端口为8080。{...,"config":{"nuxt":{"host":"127.0.0.1","port":"8080"}//或"nuxt":{"host":"0.0.0.0","port":"80"}}}3.在nuxt中使用less安装less和指定版本的less-loadernpminstalllesslessless-loader@7.0.0--save-dev全局样式文件创建basestatic目录下的.less文件，用来写全局样式。然后打开nuxt.config.js，找到css:css:['element-ui/lib/theme-chalk/index.css','~/static/base.less'//addglobalstyleshere],component内部样式@bgColor:#f00;.el-container{width:100%;高度：100%；.el-main{颜色：@bgColor；高度：100%；填充：0；}}四、清除nuxtjs中项目的默认样式打开reset-css的npm网站，取一个链接：/*http://meyerweb.com/eric/tools/css/reset/v5。0.1|20191019许可证：无（公共领域）*/html、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、acronym、address、big,引用,代码,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,menu,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,页脚,标题,hgroup,main,menu,nav,output,ruby??,section,summary,time,mark,audio,video{margin:0;填充：0；边界：0;字体大小：100%；字体：继承；vertical-align:baseline;}/*旧版浏览器的HTML5显示角色重置*/article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block;}/*用于较新浏览器的HTML5隐藏属性修复*/*[hidden]{display:none;}body{line-height:1;}menu,ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';内容：无；}表{边框折叠：折叠；border-spacing:0;}将代码粘贴到reset.css中，放到static目录下，在nuxt.config.js中导入：head:{...,link:[{rel:'icon',type:'image/x-icon',href:'/favicon.ico'},{rel:'stylesheet',type:'text/css',href:'/reset.css'}//import]},也你可以把css对象放在文件中，它以数组项的形式存在。5、使用nuxtjs中的asyncData实现SSRN。Nuxt可以在asyncData中进行axios请求并创建。但是如果在created中发起请求，渲染出来的数据不会出现在html中，导致无法进行SEO优化，但是如果使用asyncData发起请求，html中会渲染出来实现SSR。不是异步的在asyncData中获取不到vue的this，所以必须返回，模板中可以直接调用花括号，和using一样数据数据一致//在页面中使用asyncData可以实现SSR渲染，但是赋值是直接return{data}asyncasyncData(){letresult=awaitBannerApi();if(result.errCode===0){letbanner=result.data;返回{横幅}；}},exportdefault{asyncData({params,q??uery}){returnaxios.get(`https://my-api/posts/${params.id}`).then(res=>{return{title:res.data.title}})}}6.路由在页面新建一个vue组件，路由自动生成同名文件Routing6.1动态嵌套子-routes可以通过vue-router的子路由为Nuxt.js应用创建嵌套路由。创建内联子路由需要添加一个vue文件和一个与该文件同名的目录，用于存放子视图组件。警告：不要忘记在父组件（.vue文件）中添加以显示子视图内容。7、nuxt解决跨域安装代理npmi@nuxtjs/proxy-D在nuxt.config.js中添加：module.exports={...,modules:['@nuxtjs/axios','@nuxtjs/proxy'],axios:{proxy:true,prefix:'/',credentials:true},proxy:{'/api/':{target:'http://127.0.0.1:9000/web',//目标服务器ippathRewrite:{'^/api/':'/',changeOrigin:true}}}}axiosbaseURL可以使用/api八、Nuxt.js重定向路由方法8.1方法一是通过nuxt.config.js设置的，添加以下是nuxt.config.js文件中的配置。redirect表示重定向的路由。router:{extendRoutes(routes,resolve){routes.push({path:'/',redirect:'/film'})}}8.2方法二通过中间件文件，在名为：redirect的目录下添加一个中间件。js文件在redirect.js中写入如下代码，其中路径和重定向路由是自己定义的。导出默认函数({isHMR,app,store,route,params,error,redirect,}){if(isHMR)return;//用于判断热更新//所有页面都放在_lang文件夹下，即lang为动态路由参数；/*if(!params.lang){//这种写法会导致路由重定向过多；returnredirect('/'+defaultLocale+''+route.fullPath)}*/if(route.fullPath=="/"){returnredirect("/home");}}if(route.fullPath=='/vue'){returnredirect('/vue/basics')}}最后需要在nuxt中。在config.js文件中添加router:{middleware:'redirect'}九、使用nuxt中的vue插件创建一个xxx.jsimportVuefrom'vue'importVueHighlightJSfrom'vue-highlightjs'//告诉Vue去使用插件vue-highlightjsimport'highlight.js/styles/atom-one-dark.css'Vue.use(VueHighlightJS)在nuxt.config.js中配置：exportdefault{plugins:['~/plugins/xxx']}总结提示：这里是文章的总结：例如：以上就是今天要讲的Nuxtjs的内容。本文只是简单介绍了Nuxtjs的一些用法，可以让你快速上手Nuxt。当然，Nuxt中还有很多强大的功能。大家可以去官网仔细看看。
