使用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...............
// 省略
- vue -swiper
安装
注此处有坑：
1 要安装指定版本
2 配置相关 nuxt.config.js.
plugins: [{
src:"@/plugins/vue-swiper",
ssr: false //ssr:true => window is not defined
}],
npm install swiper [email protected] --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>
-
vue-layer
-
element UI
npm
卸载已安装的插件
$ npm uninstall XXXX -g
查看已安装的插件
$ npm ls