Nuxt
项目地址:https://github.com/skywalk94/nuxt-demo.git
明知山_
这个作者很懒,什么都没留下…
展开
-
Nuxt通过build打包部署到线上
nuxt有两种打包方式nuxt.config.js文件需要对不同打包方式进行配置target: 'server', //build打包用server,generate用static 默认 servergenerate打包这是静态部署,比较简单npm run generate生成dist文件夹,直接放到服务器就可以访问但是 如果后台修改数据,前端还是显示之前打包的数据build打包npm run build.nuxtstaticnuxt.config.jspackage.jso原创 2021-07-20 16:22:29 · 11725 阅读 · 12 评论 -
Nuxt引入v-wave点击涟漪效果
文档地址支持vue2,vue3,nuxtnpm install v-wave -snuxt.config.js进行全局配置 modules: [ 'v-wave/nuxt', ], vWave: { color: '#000', initialOpacity: 0.2, easing: 'ease-in', },通过指令使用<div v-wave>clickMe</div>...原创 2021-07-15 14:44:00 · 307 阅读 · 0 评论 -
Nuxt引用@nuxtjs/proxy代理接口,处理多个域名
npm install @nuxtjs/proxy -Dnuxt.config.js进行配置 modules: [ '@nuxtjs/proxy', ], axios: { prefix: '/api/', proxy: true }, proxy: { "/api": { target: 'http://api.com', // 目标服务器ip ws: true, changOrigin: true,原创 2021-07-07 11:41:46 · 1963 阅读 · 1 评论 -
Nuxt引用cookie-universal-nuxt在服务端请求cookie
npm install cookie-universal-nuxt -s在nuxt.config.js添加 modules: [ 'cookie-universal-nuxt', ['cookie-universal-nuxt', { alias: 'cookiz' }], ],设置cookiethis.$cookies.set('token', data.token)在asyncData打印async asyncData({ app }) { console.原创 2021-04-17 11:31:32 · 6822 阅读 · 9 评论 -
Nuxt引入vue-lazyload图片懒加载
安装npm install vue-lazyload -s在plugins文件夹新建vue-lazyload.js文件import Vue from 'vue'import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad, { preLoad: 1.33, error: '', loading: '', attempt: 2, throttleWait: 500})nuxt.config.js文件引入 plug原创 2021-04-12 09:01:26 · 1243 阅读 · 0 评论 -
Nuxt引用vue-awesome-swiper轮播图
npm install vue-awesome-swiper --snpm install swiper --s我安装的vue-awesome-swiper版本是4.1.1依赖swiper的版本是5.2.0要注意swiper版本在plugins新建swiper.jsimport Vue from "vue";import VueAwesomeSwiper from "vue-awesome-swiper";Vue.use(VueAwesomeSwiper);nuxt.config.js原创 2021-04-09 16:43:16 · 805 阅读 · 0 评论 -
Nuxt引入element-ui组件库
npm i element-ui -S完整引入在plugins目录新建element-ui.js文件import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)在nuxt.config.js添加 plugins: [ '@/plugins/element-ui' ],...原创 2021-04-02 14:33:09 · 781 阅读 · 0 评论 -
Nuxt使用keep-alive页面缓存
缓存“index”页面<template> <!-- 缓存特定的组件 --> <nuxt keep-alive :keep-alive-props="{ include: ['index']}" /></template>需要在页面进行命名<script> export default { name: "index" }</script>...原创 2021-01-20 11:27:13 · 1199 阅读 · 1 评论 -
Nuxt自定义路由配置
nuxt自动生成路由很方便但是项目开发习惯,对每个vue文件新建文件夹,在里面配置我的css等就我需要手动配置路由在nuxt.config.js配置router router: { extendRoutes(routes, resolve) { routes.push(...[{ path: '/', name: 'index', component: resolve(__dirname, 'pages/index/index.vue原创 2021-01-18 14:30:13 · 3918 阅读 · 0 评论 -
Nuxt使用vant导航栏组件tabbar
按照我之前在vue/cli配置方法发现watch事件刷新页面没有执行,而在vue/cli却执行我也不想nuxt是什么原因、机制导致的组件components/tabbar.vue<template> <van-tabbar v-model="isAct" inactive-color="#666666" active-color="#000000" fixed placeholder> <van-tabbar-item replace v-for="(ite原创 2021-01-18 13:51:11 · 570 阅读 · 2 评论 -
Nuxt配置错误页面
在layouts文件夹新建error.vue<template> <div> <h2 v-if="error.statusCode == 404">404 - 页面不存在</h2> <h2 v-else>服务器错误</h2> <button> <nuxt-link to="/">HOME</nuxt-link> </button> &l原创 2021-01-18 10:19:08 · 454 阅读 · 0 评论 -
Nuxt引用vant+px2rem适配移动端开发
npm i vant -S //安装vantnpm i babel-plugin-import -D //按需引入在plugins文件夹新增vant.js文件引入Button组件为例import Vue from "vue";import 'vant/lib/index.css';import { Button} from "vant";Vue.use(Button);在nuxt.config.js文件进行配置 plugins: [ '@/plugins/vant'原创 2021-01-16 17:34:11 · 1099 阅读 · 5 评论 -
Nuxt配置全局路由守卫
在plugins新建route.js文件export default ({ app}) => { app.router.afterEach((to, from, next) => { console.log(to.name) })}在nuxt.config.js配置 plugins: [ '@/plugins/route' ],原创 2020-12-17 16:56:25 · 1970 阅读 · 0 评论 -
Nuxt封装@nuxtjs/axios请求后端数据
npm install axios -s在plugins新建axios文件配置公共请求…vue页面导入 import axiosApi from "../plugins/axios";在asyncData进行请求渲染数据 export default { data() { return { info: [] } }, async asyncData() { const res = await axiosApi(原创 2020-12-15 15:51:04 · 1917 阅读 · 0 评论 -
Nuxt搭建服务端渲染SSR应用
文档地址创建一个命名为nuxtdemo的应用npx create-nuxt-app nuxtdemo配置项说明Project name项目名称Programming language编写语言Package manager包管理UI frameworkUI框架Nuxt.js modulesNuxt模块Linting tools扩展工具Testing framework测试工具Rendering mode渲染模式Depl原创 2020-12-15 09:58:41 · 334 阅读 · 0 评论