使用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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
用jscript实现新建word文档
Jun 15 Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
列表内容的选择
2006/06/30 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
python 重定向获取真实url的方法
2018/05/11 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
优秀教师工作感言
2014/02/16 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
新品发布会主持词
2014/04/02 职场文书
出生医学证明书
2014/09/15 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
MySQL触发器的使用
2021/05/24 MySQL
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server