刚入职，老大问我知不知道服务端渲染SSR，我说不知道，然后就扔给我了两个链接让我看看，贴地址：
VueSSR：https://vuejs.org/guide/quick-start.html#with-build-tools NUXTJS：https://www.nuxtjs.cn/guide
注意事项： 1.需要Node.js server 运行环境, 高流量的情况下，请准备相应的服务器负载，并明智地采用缓存策略.
2.服务端没有window、document对象，判断客户端才执行if(process.browser){ console.log(window); }
3.引用npm包，带有dom操作的不能用 import 的方式
4.要将 v-if 改为 v-show 语法
5.方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用
搭建项目
目录
目录长这样
.nuxt是 nuxt的一些配置
components是一些组件，引入方式正常使用无需改变，虽然直接放在components下级的组件不用使用import也可以用，但是不推荐。
pages 就是放页面的地方
static 静态资源 不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下
assets 用于组织未编译的静态资源如 img、css 或 js
store VUEX就在这儿了
nuxt.config.js 项目的一些配置在这里
stylus 踩坑
使用
yarn add --save-dev stylus-loader stylus
// nuxt.config.js
modules: [
"@nuxtjs/style-resources",
],
// 全局css文件引用
css: [
"element-ui/lib/theme-chalk/index.css",
"@/static/css/reset.styl",
"@/static/css/element.styl",
],
// 页面内使用
<style lang="stylus" scoped> </style>
正常安装 stylus 使用后会报css错误，这个是stylus和stylus-loader的兼容性问题，在package.json 中，修改stylus-loader，
"devDependencies": {
"@nuxtjs/proxy": "^2.1.0",
"@nuxtjs/style-resources": "^1.2.1",
"eslint-config-prettier": "^8.3.0",
"prettier": "^2.5.1",
"stylus": "^0.56.0",
"stylus-loader": "^3.0.2"
}
然后重新 yarn 一下，再启动就好了
路由使用
环境搭建
axios接口使用
cookie使用
store的使用
element主题使用
待更新
