Nuxt 初体验

nuxt是什么？

官网

为什么要使用nuxt?

解决首屏优化和SEO
参考

相关问题：服务器渲染和浏览器渲染的区别，建议自己搜索查询答案 updateDate 8.8

使用过程

• 根据文档初始化项目
  $ vue init nuxt-community/starter-template <project-name>
• 项目中使用了scss,如何让项目支持scss语法。同时并支持全局scss变量

1. 根据文档提示，输入下面命令行
   npm install node-sass sass-loader
2. 同时根据文档，对webpack配置进行扩展，在nuxt.config.js中的extend下面加
   const vueLoader = webpackConfig.module.rules.find((rule) => rule.loader === 'vue-loader');vueLoader.options.loaders.sass = 'vue-style-loader!css-loader!sass-loader'
   !!! 注意：初始化的extend的参数中是config,所以记得将上面的webpackConfig,改成config,现在重新启动项目就可以了
3. 支持全局scss变量

1. 在assets文件夹下新建文件global.scss,同时在nuxt.config.js中下面在添加一行
   css:[{src:'~assets/css/global.scc',lang:'scss'}]
   如图： 看划线处
   同时在login.vue中运用，如图： 看划线处
   现在就支持全局变量。

• 项目中使用了elementUI,那么问题来了，怎么去集成elementUI到项目中去呢？
  ElementUI,看到最下面,然后按照文档上的项目进行设置

因为在这个项目仅对项目进行颜色改换，所以自定义主题进行配置色彩
ps:早点知道这个，就能项目少写好多东西，是时候优化一下项目了。
按照文档来就好了。没有什么注意的。
具体配置如图：

image.png

• 因为nuxt集成vue全家桶的，所以我们不需要额外配置了。

不过因为在项目中有统一的头部导航栏，所以之前使用了router-view这个，但是nuxt并没有相关的api。所以我选择layout进行解决，主要用来解决网页头部导航栏的问题。
步骤：

1. 在components目录下新建一个headernav.vue,使用el-menu
2. 在layouts目录下面在新建一个index.vue,引用这个上面新建的组件headernav
3. 在pages中的index.vue中加入layout(context){return 'index'},就引入布局
   具体如图： 配置

项目中嵌套路由用的多，同时nuxt并不需要你单独写vue-router,你只要在pages目录中新建文件，新建文件夹，就会自动生成相关路由，具体参考文档中的嵌套路由部分

error页面也可以参考文档，故不再叙述。到此解决项目的路由问题

• 如何使用store?

之前的项目中使用了module进行状态管理的，因为这个项目是异地远程协同开发的。所以为了让状态不冲突，故选择了module形式进行开发。

具体如图 state tree

• 中间件，middleware,本项目用的不多，就纯粹过个例子。具体参考文档

• static,静态资源，看需求吧，比如将图片，字体文件放入此目录，

• 剩下就是些数据。api的使用。