前言最近公司需要搭建一个新的官网，打算从0到1搭建。其中可能还涉及到个人对一些基础知识的理解，并且是基于记录的目的，希望对自己和大家有所帮助，现在就开始吧~简介Nuxt.js是一个基于Vue.js的通用应用框架。安装方法一：使用官方脚手架第一步：安装项目$npxcreate-nuxt-appHelloworld！
然后启动项目$npmrundev补充知识点：Universal和SPA模式的区别目录结构资源目录（assets）用于组织未编译的静态资源，如LESS、SASS、JS不需要的Webpack处理后的静态资源文件可以放在static目录下。更多内容组件目录（components）用于存放项目中的公共组件。这些组件不像页面组件那样具有asyncData方法的特性布局目录（layouts），用于存放项目中的布局组件。如果不进行额外配置，则无法重命名此目录。了解更多。中间件目录（middleware）用于存放项目中的中间件（允许你定义一个自定义函数允许在页面或一组页面呈现之前）//自定义中间件middleware/stats.jsimportaxiosfrom'axios'exportdefaultfunction({route}){returnaxios.post('http://my-stats-api.com',{url:route.fullPath})}在全局使用每个路由开关时会调用一个中间件stats//nuxt.config.jsmodule.exports={router:{middleware:'stats'}}用在一个单个页面/布局组件调用//pages/index.vue或layouts/default.vueexportdefault{middleware:'stats'}当路由切换到当前页面时。页面目录（pages）用于组织应用程序的路由和视图，Nuxt会根据文件名生成相应的路由，这个目录不能在没有额外配置的情况下重命名。插件目录（plugins）用于整理需要在实例化前运行的js插件或第三方库。比如axios、element-ui等，使用前需要在nuxt.config.js中进行配置。需要注意的是，在任何一个Vue组件的生命周期中，只会在客户端和服务端使用beforeCreate和create方法。对其他生命周期函数的调用仅在客户端调用。使用第三方模块axios.get(`https://my-api/posts/${params.id}`)return{title:data.title}}}使用Vue插件//在插件下创建新的vue-notificationsfolder.jsimportVuefrom'vue'importVueNotificationsfrom'vue-notifications'Vue.use(VueNotifications)//在nuxt.config.js={plugins:['~/plugins/vue-notifications']}中配置module.exports全局注入如果要在整个应用中使用某个功能或属性，可以在使用时将它们注入到Vue实例（客户端）、上下文（服务器）或Store（Vuex）中，需要在方法前加上$表示自定义函数；如果您需要限制插件仅在客户端运行，请在配置期间添加ssr:false以将其注入客户端（Vue实例）//Createanewvue-inject.jsimportVuefrom'vue'inthepluginsfolderVue.prototype.$myInjectedFunction=string=>console.log('Thisisanexample',string)//在nuxt.config.js中配置导出默认值{plugins:['~/plugins/vue-inject.js']}//使用exportdefault{mounted(){this.$myInjectedFunction('test')}}注入到组件中的服务中Terminal(context)//plugins/ctx-inject.jsexportdefault({app},inject)=>{//直接在context.app对象上设置函数app.myInjectedFunction=string=>console.log('Okay,anotherfunction',string)}//在nuxt.config.js中配置exportdefault{plugins:['~/plugins/ctx-inject.js']}//从上下文中获取（例如，在asyncData中，fetch）Registeredfunctionexportdefault{asyncData(context){context.app.myInjectedFunction('ctx!')}}同时注入如果想在client、server和vuex中同时注入，可以使用inject方法，如下//plugins/combined-inject.jsexportdefault({app},inject)=>{inject('myInjectedFunction',string=>console.log('Thatwaseasy!',string))}//nuxt.config.jsexport默认值{plugins:['~/plugins/combined-inject.js']}//在普通组件中使用导出默认值{mounted(){this.$myInjectedFunction('worksinmounted')},asyncData(context){context.app.$myInjectedFunction('与上下文一起工作')}}//在store的js文件中使用exportconststate=()=>({someValue:''})exportconstmutations={cchangeSomeValue(state,newValue){this.$myInjectedFunction('accessibleinmutations')state.someValue=newValue}}exportconstactions={setSomeValueToWhatever({commit}){this.$myInjectedFunction('accessibleinactions')constnewValue='whatever'commit('changeSomeValue',newValue)}}静态文件目录（static）该目录下存放的静态文件不会被webpack编译处理；服务器启动时，这些文件会映射到应用程序的根路径下
