nuxt是什么？
为什么要使用nuxt?
解决首屏优化和SEO
参考相关问题：服务器渲染和浏览器渲染的区别，建议自己搜索查询答案 updateDate 8.8
使用过程
- 根据文档初始化项目
$ vue init nuxt-community/starter-template <project-name> - 项目中使用了scss,如何让项目支持scss语法。同时并支持全局scss变量
- 根据文档提示，输入下面命令行
npm install node-sass sass-loader- 同时根据文档，对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,现在重新启动项目就可以了- 支持全局scss变量
- 在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进行解决，主要用来解决网页头部导航栏的问题。
步骤：
- 在components目录下新建一个headernav.vue,使用el-menu
- 在layouts目录下面在新建一个index.vue,引用这个上面新建的组件headernav
- 在pages中的index.vue中加入
layout(context){return 'index'},就引入布局
具体如图：配置
项目中嵌套路由用的多，同时nuxt并不需要你单独写vue-router,你只要在pages目录中新建文件，新建文件夹，就会自动生成相关路由，具体参考文档中的嵌套路由部分
error页面也可以参考文档，故不再叙述。到此解决项目的路由问题
- 如何使用store?
之前的项目中使用了module进行状态管理的，因为这个项目是异地远程协同开发的。所以为了让状态不冲突，故选择了module形式进行开发。
具体如图state tree
中间件，middleware,本项目用的不多，就纯粹过个例子。具体参考文档
static,静态资源，看需求吧，比如将图片，字体文件放入此目录，
剩下就是些数据。api的使用。
