我爱编程

Vue的Nuxt.js框架入门

2018-04-07  本文已影响0人  阿凡农

现在正在做一个产品的官网项目,之前用jQuery写过一个,但是是现学现卖的,写的很糟糕,而且,也很难维护。于是,上线之后,又用Vue重写了一个。因为考虑到产品的SEO需要,而Vue又是做SPA单页面应用的,所以就结合使用了Nuxtjs这个服务端渲染框架。

下面就带着大家来入门一下,需要有一定的Vue和Nodejs基础。

在使用前,先介绍一下,什么是nuxtjs?我的理解是,它是一个以vuejs为基础的应用框架,在内部配置了vuejs服务端渲染的各种配置。

Nuxtjs集成了vue及其他一些组件/框架和工具,如vuex、vue-router、vue-meta,并且使用webpack、vue-loader、babel-loader来处理代码的自动化构建工作,如打包、热加载、压缩等。

至于它的特性,实在记不住那么多,我从官网直接拉下来给大家看一下:

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

下面,介绍一下如何使用。

第一:安装

Node版本需要在7.0以上。

使用vue-cli来安装(确保你已经安装了vue-cli):vue init nuxt-community/starter-template <project-name>,安装完后,cd进入项目,别忘了npm install。

第二:项目目录结构介绍

项目初始化后的目录结构大概是这样,一一介绍一下:

.nuxt:应该就是nuxt的代码了

assets:用来存放未编译的静态资源如图片,sass文件等。需要webpack编译

components:存放vuejs组件

layout:布局组件

pages:页面文件,生成对应的视图及路由,nuxtjs会读取下边所有的文件,并自动生成路由所需要的配置。

plugins:插件目录

static:静态文件,webpack不会编译这里面的文件

store:nuxtjs继承了vuex,在这里使用vuex

nuxt.config.js:nuxtjs配置文件

package.json:项目依赖包及运行脚本命令

第三:配置

nuxtjs运行在nuxt.config.js中自定义配置来覆盖它原来的配置。我这里就举几个例子。

build:当使用第三方模块的时候,build让你能够自定义webpack的配置。该配置对象里边有很多项配置,例如loader可以自定义webpack加载器,plugins配置webpack插件。

css:配置全局的css文件,这样在每个文件中都会引入。当然,也可以在modules中,通过其他loader来处理css文件。注意modules中的模块是按顺序执行的。

第四:路由

nuxtjs集成了强大的路由功能,我们甚至不需要自己配置vue-router的任何参数,nuxtjs会自动生成路由配置,具体的例子可以看一下官网的介绍,简单易懂。

基础路由:只需要按照你想要的一级路径,二级路径,把组件放进对应的文件夹里面即可。

动态路由

嵌套路由

在页面之间跳转链接的时候,nuxtjs提供了<nuxt-link>标签来进行跳转。

nuxtjs提供了页面跳转的全局过渡效果,在assests目录中定义main.css文件并添加一些样式:

.page-enter-active, .page-leave-active {

    transition: opacity .5s;

}

.page-enter, .page-leave-active {

    opacity: 0;

}

然后在nuxt.config.js中配置css属性: css: 'assest/main.css' 。

也提供了局部的过渡效果,再main.css中再添加同样的样式(page改为test),然后将页面组件中的transition属性transition: 'test' 。

上一篇 下一篇

猜你喜欢

热点阅读