深入浅析nuxt.js基于ssh的vue通用框架

Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织， Nuxt.js 主要关注的是应用的 UI渲染。

SSR ，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

Nuxt.js是特点（优点）：

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预处理器： SASS、LESS、 Stylus等等

vue-cli3如何安装？

yarn global add @vue/cli-init
npm init nuxt-app my-project // 初始化一个nuxt项目

目录结构

全局配置

配置全局样式nuxt.config.js

module.exports={
  css: ['@/assets/css/normailize.css'] // @别名，根目录
}

配置全局标题和meta

在nuxt.config.js

head: {
  title: 'nuxt项目实战',
  meta: [
   {charset: 'utf-8'},
   {name: 'viewport', content: 'width=device-width, initial-scale=1'},
   {hid: 'description', name: 'description', content: pkg.description}
  ],
  link: [{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}] },

配置全局动效

Nuxt.js 默认使用的过渡效果名称为 page 在全局样式文件 assets/css/main.css 这里假设是main.css里添加一下样式：

.page-enter-active,      //页面进入激活的效果和页面离开的动效
.page-leave-active {
 transition: opacity 1s;
}
.page-enter,         // 页面进入和页面离开激活的效果
.page-leave-active {
 opacity: 0;
}

配置页面单独的动画效果

在全局样式文件 assets/css/main.css 这里假设是main.css里添加一下样式： .后面加页面的单独属性，如test

.test-enter-active,
.test-leave-active {
 transition: all 1s;
 font-size: 12px;
}
.test-enter,
.test-leave-active {
 opacity: 0;
 font-size: 40px;
}

然后我们将页面组件中的 transition 属性的值设置为 test 即可：