今天抽空过了遍nuxt文档,写了个实践demo,关于nuxt我已经断断续续看了好几遍了,自我感觉也算是入门了吧,从开发到上线心里都有底。后期打算在项目用起来的是nuxt框架,一些函数工具库,比如ramda,lodash等等,后台服务估计会使用### fastify 这个库,目测非常方便,尝试尝试。
基础只是还是以官方文档为主,尝试过程中如果有什么问题可以留言,看到会回复,文章如有错误,欢迎指正。
安装需要的loader后指定lang就可以直接使用。
- npm i less less-loader --save--dev
- //全局CSS
- css: [
- {
- src: 'static/less/base.sass',
- lang: 'less'
- }
- ],
- //页面中使用
- <style lang="less" scoped></style>
- //禁用
- module.exports = {
- loading: false
- }
- //颜色条
- module.exports = {
- loading: { color: '#3B8070' }
- }
- //使用组件
- 添加一个loading组件 (官方示例如下,详情可看官方文档)
- 引用该组件
- module.exports = {
- loading: '~components/loading.vue'
- }
- /// components/loading.vue
- <template lang="html">
- <div class="loading-page" v-if="loading">
- <p>Loading...</p>
- </div>
- </template>
- <script>
- export default {
- data: () => ({
- loading: false
- }),
- methods: {
- start () {
- this.loading = true
- },
- finish () {
- this.loading = false
- }
- }
- }
- </script>
- <style scoped>
- .loading-page {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(255, 255, 255, 0.8);
- text-align: center;
- padding-top: 200px;
- font-size: 30px;
- font-family: sans-serif;
- }
- </style>
按照官方引用组件的方法,我测试报了个错,把~/ 改成 ./ 解决。估计是nuxt解析vue文件的问题。
- //通过script标签
- head: {
- script: [
- { src: 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js' }
- ]
- },
- //plugins配置 , ssr:false 设置只在客户端使用
- plugins: [
- { src: '~plugins/flexible.js', ssr: false }
- ],
- //在页面中使用axios,配置vendor使其只打包一次
- //页面
- <template>
- <h1>{{ title }}</h1>
- </template>
- <script>
- import axios from 'axios'
- export default {
- async asyncData ({ params }) {
- let { data } = await axios.get(`https://my-api/posts/${params.id}`)
- return { title: data.title }
- }
- }
- </script>
- //配置文件
- module.exports = {
- build: {
- vendor: ['axios']
- }
- }
在nuxt里使用第三方UI组件库也非常简单。以iview为例(我个人非常中意的组件库)
- ///在plugins下新建 iview.js
- import Vue from 'vue'
- import iView from 'iview';
- Vue.use(iView);
- ////配置文件引入css和plugin
- module.exports = {
- css: [
- { src: 'iview/dist/styles/iview.css'}
- ],
- plugins: [
- { src: '~plugins/iview.js', ssr: false }
- ],
- }
- //基础路由示例, 详情请看官方文档
- pages/
- --| user/
- -----| index.vue
- -----| one.vue
- --| index.vue
- router: {
- routes: [
- {
- name: 'index',
- path: '/',
- component: 'pages/index.vue'
- },
- {
- name: 'user',
- path: '/user',
- component: 'pages/user/index.vue'
- },
- {
- name: 'user-one',
- path: '/user/one',
- component: 'pages/user/one.vue'
- }
- ]
- }
nuxt为我们省去了定义路由的过程,页面结构自动生成路由,不得不说,这对开发效率是有比较大的提升。官方还提供了路由切换动画,中间件等配置,我们可以在切换路由时良好的控制页面。
开发后台管理页面的时候,我们经常有autu认证需求,如果没有登录,或者权限问题,都有一个脚本去控制跳转,中间件就派上用场了。
- // middleware/auth.js
- export default function ({ store, redirect }) {
- if (!store.state.user) {
- return redirect('/login')
- }
- }
- //页面单独使用
- export default {
- middleware: 'auth'
- }
- ///全局使用
- module.exports = {
- router: {
- middleware: 'auth'
- }
- }
上面我们定义了一个auth中间件,如果用户未登录,则跳转登录页。
一般开发SPA页面,我们一般是组件+页面混合开发,,nuxt则是固定布局layouts,路由必须采用一个layouts,默认default,页面内部我们可以像个vue开发那样引入多个components。
nuxt可以定义个错误页,在layouts下定义个error.vue文件。具体代码可以看官方文档
nuxt扩展的异步数据方法,对于页面数据,我们一般有页面data定义的形式和vuex统一管理的形式,可以根据自己的需求选择。
data定义这里就不赘述了,这里说一下vuex统一管理数据的做法。
- ///page页面
- < template > <div class = "container" > <p class = "title" > 数据展示 ! </p>
- <Table :columns="columns1" :data="data1"></Table > </div>
- </template >
- <script > import {
- mapState
- }
- from 'vuex'import axios from 'axios'
- export
- default {
- middleware:
- 'auth',
- //定义页面中间件
- head() {
- return {
- title: '其他页面'
- }
- },
- data() {
- return {}
- },
- async fetch({
- store,
- params
- }) {
- let {
- data
- } = await axios.get('http://106.14.205.222/article/list?page=1&limit=10&isActive=1') console.log(data) store.commit('SET_LIST', data.list)
- },
- computed: {...mapState([
- // 映射 this.xxx 为 store.state.xxx
- 'columns1', 'data1'])
- },
- } < /script>
- / / store index.js
- import Vue from 'vue'import Vuex from 'vuex'
- Vue.use(Vuex)
- const store = () = >new Vuex.Store({
- state: {
- columns1: [{
- title: '标题',
- key: 'title'
- },
- {
- title: '介绍',
- key: 'intro'
- },
- {
- title: '日期',
- key: 'time'
- }],
- data1: [],
- user: 'xu' //如果为空,则会中间件控制跳转404
- },
- mutations: {
- SET_LIST: (state, data) = >{
- state.data1 = data
- },
- }
- })
- export
- default store
这里通过fetch刷新了vuex的数据,页面映射了store的数据,这种写法我们可以通过this.xxx 处理vuex的数据。demo为了快捷只用了index演示,常规项目我们应该采用模块写法。
还是关于session 和 登录相关的一些权限问题,官方高级文档有非常详细的例子。这里就不在demo里再现了。路由鉴权
对vuex管理数据有兴趣的同学, 可以多看看vuex状态树 和权限相关的文章或者应用,当然官方文档是要烂熟于心的。
后台开发一般就是在项目下在建立一个server文件夹,做到同时输出API和页面,我们可以选择自己喜欢的服务框架 ,比如express活着koa,将nuxt 介入到服务框架来,就可以完成所谓的同构开发。可以看看一个koa例子:
- import Koa from 'koa'
- import Nuxt from 'nuxt'
- import nuxtConf from '../nuxt.config'
- const app = new Koa()
- const start = async () => {
- let config = require('../nuxt.config.js')
- config.dev = !(app.env === 'production')
- const nuxt = await new Nuxt(config)
- if (conf.env !== 'production') {
- try {
- await nuxt.build()
- } catch (e) {
- console.error(e)
- process.exit(1)
- }
- }
- app.use(async (ctx, next) => {
- ctx.status = 200
- await nuxt.render(ctx.req, ctx.res)
- })
- app.listen(conf.port, conf.host)
- console.log('Server listening on ' + conf.host + ':' + conf.port) // eslint-disable-line no-console
- }
- start()
nuxt自身提供了一个部署命令,可以通过 npm run start 来运行,nuxt还能生成静态页,你可以在在别的地方托管你的网站,比如Githubpage和cdn。喜欢同一管理上线的项目的同学,推荐用pm2 来进行部署。
一台机器,好几个项目,就可以用nginx来进行反向代理端口。nginx也算是上线必不可少的一步,有空我也会写一篇实践文章。
官方也有提供服务框架版本,比如express https://github.com/nuxt-community/express-template ,还有其他的可以自行Github
来源: http://www.cnblogs.com/buzhiqianduan/p/7922525.html