使用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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
javascript 写类方式之二
Jul 05 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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
PHP语法速查表
2006/12/06 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
Use Word to Search for Files
2007/06/15 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
详解JS预解析原理
2020/06/16 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python中文编码问题小结
2014/09/28 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python selenium操作cookie的实现
2020/03/18 Python
python实例化对象的具体方法
2020/06/17 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
便利店促销方案
2014/02/20 职场文书
创新社会管理心得体会
2014/09/12 职场文书
培训班开班主持词
2015/07/02 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
Redis基本数据类型List常用操作命令
2022/06/01 Redis