使用Nuxt.js改造已有项目的方法


Posted in Javascript onAugust 07, 2018

前言

如果我们需要对现有的vue项目进行ssr改造,使用nuxt.js是一个不错的选择。这里用作例子的“现有项目”是一个“高仿”饿了么外卖APP的spa。不过我没有把全部功能开发出来(全部做出来就不得了了),只是做出几个基本界面意思意思

使用Nuxt.js改造已有项目的方法 

下面就以这个demo为小白鼠进行ssr改造

准备

现有目录

使用Nuxt.js改造已有项目的方法 

很明显,这是使用vue-cli搭建的项目

其中prod.server.js是build之后的启动文件

dataa.json文件是模拟数据,在build/dev-server.js中会用到它

安装与配置

安装nuxt

npm install --save-dev nuxt

新建nuxt文件夹

我们需要在根目录下建立一个nuxt文件夹,该文件夹的内部组织按照nuxt本身的应用目录架构进行组织(参考)

使用Nuxt.js改造已有项目的方法 

注意,在static目录下有一个logo.png,它将作为项目图标,在nuxt.config.js中这张图片的地址直接写成/logo.png。下一节会对nuxt文件夹的组织进行详细说明。

新建并设置nuxt.config.js

当然,我们也需要在根目录下创建nuxt.config.js文件用于组织Nuxt.js 应用的个性化配置,在这个项目中,需要进行设置的点有:

  1. 源码目录路径
  2. head中的meta以及link(主要是图标)
  3. 全局的css样式
  4. 项目中需要使用图片和字体文件,虽然nuxt默认对其进行配置,但我们需要重新定义部分内容(项目中是扩大limit)
  5. 项目中使用了sass,需要对其进行配置

所以,nuxt.config.js的代码如下

module.exports = {
  // 设置nuxt源码目录路径
  srcDir: "nuxt/",
  head: {
    title: "sell-nuxt",
    meta: [
      {
        charset: "utf-8"
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
      }
    ],
    link: [
      {
        rel: "shortcut icon",
        type: "image/png",
        // 注意图片的路径直接指向static下的logo.png
        href: "/logo.png"
      }
    ]
  },
  css: [
    "~assets/reset.css"
  ],
  build: {
    vendor: ['axios'],
    loaders: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
         limit: 10000,
         name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
         limit: 10000,
         name: 'fonts/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.scss$/,
        loader: "vue-style-loader!css-loader!sass-loader"
      }
    ]
  }
}

配置package.json

package.json是npm的配置文件,现在,我们需要对script选项进行配置

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "precommit": "npm run lint"
 }

可以参考nuxt的命令列表

改造后的目录

使用Nuxt.js改造已有项目的方法 

其中有个nuxt.api.js,这个文件是为完成ssr改造后的项目提供api接口的,使用koa,运行在3001端口

nuxt文件夹组织

因为我们已经把项目代码开发出来了,所以nuxt文件夹里面的大部分代码可以直接从已有代码中拷贝

layouts

布局目录 layouts 用于组织应用的布局组件,nuxt可通过添加 layouts/default.vue 文件来扩展应用的默认布局,在layouts下新建default.vue

<template>
 <div id="app">
  <v-header v-bind:seller="seller"></v-header>
  <v-tab></v-tab>
  <nuxt/>
 </div>
</template>

<script>
 import axios from 'axios';
 // 引入组件
 import header from "~/components/header/header.vue";
 import tab from "~/components/tab/tab.vue";
 export default {
  data:function(){
   return {
    seller:{}
   }
  },
  created:function(){
   axios.get("http://localhost:3001/seller").then(res=>{
    console.log(res.data);
    this.seller = res.data.data;
   });
  },
  components:{
   "v-header":header,
   "v-tab":tab
  }
 }
</script>

<style lang="scss" rel="text/css">

</style>

<nuxt/> 组件用于显示页面的主体内容,即“商品”、“评论”、“商家”这几个部分

pages

nuxt依据 pages 目录结构自动生成 vue-router 模块的路由配置,这无疑是非常方便的

使用Nuxt.js改造已有项目的方法 

不难看出goods、patings、seller分别对应“商品”、“评论”、“商家”

这样子设置,则nuxt自动生成的路由配置如下

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'goods',
   path: '/goods',
   component: 'pages/goods/index.vue'
  },
  {
   name: 'patings',
   path: '/patings',
   component: 'pages/patings/index.vue'
  },
  {
   name: 'seller',
   path: '/seller',
   component: 'pages/seller/index.vue'
  }
 ]
}

但我们希望默认进入goods,nuxt官方文档并没有说如何设置默认路径,这就是为什么要在pages下面创建一个index.vue

<template>

</template>

<script>
 export default {
  created:function(){
   this.$router.push('/goods'); // 页面加载时跳转
  }
 }
</script>

<style lang="scss" rel="text/css">

</style>

对于那些不需要像在pages下的页面组件那样有 asyncData 方法的特性的组件,我们可以将他们放到components目录下

assets

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript,这个目录是我感觉在引用路径时最坑的一个。
在官方文档中,每个目录都有别名,这些别名在nuxt.config.js中配置时是有效的,比如之前配置的css选项,但不代表我们在组件中使用这些别名会有效,在组件中我们最好使用相对路径,比如在components/header/header.vue中就不能直接写~assets,而得老老实实写相对路径

<style lang="scss" rel="text/css" src="../../assets/base.scss"></style>
<style type="text/css" src="../../assets/style.css"></style>
<style lang="scss" rel="text/css">
  @import "../../assets/mixin.scss";
  @import "./header.scss";
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 #Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 #Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 #Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 #Javascript
React-router4路由监听的实现
Aug 07 #Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 #Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
纯php生成随机密码
2015/10/30 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP的反射机制实例详解
2017/03/29 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python实现大学人员管理系统
2019/10/25 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
优秀生推荐信范文
2013/11/28 职场文书
设计总监岗位职责
2013/12/07 职场文书
党建工作先进材料
2014/05/02 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
2014年党支部工作总结
2014/11/13 职场文书
初中家长意见
2015/06/03 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python