使用nuxt.js构建一个vue项目【1】

使用nuxt.js构建一个vue项目

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：

1.使用nuxt2.0官方脚手架，我们需要全局安装npx，输入

npm i -g npx

为了快速入门，Nuxt.js 团队创建了脚手架工具create-nuxt-app。

2.运行 create-nuxt-app

随后切换到想要创建项目的路径输入

npx create-nuxt-app <项目名>

npx create-nuxt-app 项目名称

配置基本信息 ： 图示

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in nuxtCode
? Project name: adjust
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? caolili
? Version control system: Git
- Installing packages with npm  

再随后会出现一堆配置项，可以集成koa，element-ui等模块，按需选yes或no即可

1.在集成的服务器端框架之间进行选择:

• None (Nuxt 默认服务器)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Fastify
• Adonis (WIP)

2.选择您喜欢的 UI 框架:

• None (无)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy iView Tachyons

3.选择您喜欢的测试框架:

• None (随意添加一个)
• Jest
• AVA

4.选择你想要的 Nuxt 模式 (Universal or SPA)

5.添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。

6.添加 EsLint 以在保存时代码规范和错误检查您的代码。

7.添加 Prettie 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

cd  <项目名>

3.安装依赖

• sass

npm i node-sass sass-loader scss-loader --save-dev

asyncAxios.js

import cookie from "./cookie";
import tool from "./tool";

export default {
  async get(context, url, params = {}) {
    params = helper.thqs(params);
    let token = cookie.get("token");
    if (!process.client) {
      const localCookie = cookie.getcookiesInServer(context.req);
      token = tool.isEmpty(localCookie.token) ? "" : localCookie.token;
    }

    token = tool.isEmpty(token) ? "" : token;

    const result = await context.$axios.get("http://" + url, {
      params,
      headers: {
        Token: token,
        Appid: "506320220E0FA6B9"
      }
    });
    // eslint-disable-next-line no-console
    return result.data.status === 200 && result.data.data
      ? result.data.data
      : false;
  },
  async post(context, url, params = {}) {
    params = helper.thqs(params);
    let token = cookie.get("token");
    if (!process.client) {
      const localCookie = cookie.getcookiesInServer(context.req);
      token = tool.isEmpty(localCookie.token) ? "" : localCookie.token;
    }

    token = tool.isEmpty(token) ? "" : token;

    const result = await context.$axios.post("http://" + url, {
      params,
      headers: {
        Token: token,
        Appid: "506320220E0FA6B9"
      }
    });
    // eslint-disable-next-line no-console
    console.log(result);
    return result.data.status === 200 && result.data.data
      ? result.data.data
      : false;
  }
}

• 跨域服务代理

npm i @nuxtjs/axios @nuxtjs/proxy --save-dev

nuxt.config.js中跨域相关配置

export default {
  // 省略
  // ...........code...............
  // 省略
  modules: ["@nuxtjs/axios"],
  axios: {
    proxy: true
  },
 
  proxy: {
    "/passport": {
      target: "https://code.com",
      changeOrigin: true,
      pathRewrite: {
        "^/passport": ""
      }
    },
    "/adjust": {
      target: "http://code.com",
      changeOrigin: true,
      pathRewrite: {
        "^/adjust": ""
      }
    }
  }
};

4.安装第三方插件

nuxt.config.js中plugins相关配置

  // 省略
  // ...........code...............
  // 省略
  plugins: [
    "@/plugins/vue-layer", 
    { 
      src:"@/plugins/vue-swiper", 
      ssr: false  //window is not defined
    },
    // ...........code...............
  ],
  // 省略
  // ...........code...............
  // 省略

1. vue -swiper

安装
注此处有坑：
1 要安装指定版本
2 配置相关 nuxt.config.js.

  plugins: [{ 
      src:"@/plugins/vue-swiper", 
      ssr: false  //ssr:true => window is not defined
  }],

npm install swiper vue-awesome-swiper@3.1.3 --save

vue-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper';
// 版本不同 导入样式文件有所不同 百度一下 
import 'swiper/swiper-bundle.css';
Vue.use(VueAwesomeSwiper)

swiper 在页面中的使用

<template>
<div>
    <swiper :options="swiperOption" v-if="listSlideArr" id="liveList">
        <swiper-slide class="d-flex" v-for="(slideArr, i) in listSlideArr" :key="i">
            <ul class="item list-unstyled" v-for="(item, j) in slideArr" :key="j">
                <li><span class="time"> {{item.start_time}} </span> <span class="status">{{item.type}}</span> </li>
                <li class="school">{{item.title}}</li>
                <li class="tag-group">
                    <span class="bg-red">-10分调剂</span>
                    <span class="bg-purple">-10分调剂</span>
                    <span class="bg-green">-10分调剂</span>
                    <span class="bg-blue">-10分调剂</span>
                </li>
            </ul>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
    </swiper>
</div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
        	listSlideArr:[],
            // 轮播配置
            swiperOption: {
                loop: true,
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination'
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
            }
        }
    }
};
</script>

2. vue-layer

3. element UI

npm

卸载已安装的插件

$ npm uninstall XXXX -g

查看已安装的插件

$ npm ls