Nuxt.JS实战指南：从入门到精通的练习之旅

已于 2023-08-08 17:33:18 修改
阅读量1.3k 收藏 10
点赞数 4
分类专栏： 前端技术 文章标签： 前端 vue.js
于 2023-08-03 13:44:18 首次发布
@西瓜程序猿
本文链接：https://blog.csdn.net/2301_79251107/article/details/132076765
版权

官网：Nuxt.js - Vue.js 通用应用框架 | Nuxt.js 中文网

目录

一、为什么用Nuxt

1.1如何进行搜索引擎优化？

1.2-预渲染

1.3-服务端渲染（通过SSR）

1.4-优势劣势总结

二、Nuxt安装与使用

2.1-安装与创建

2.2-目录结构（VueCli 与 Nuxt 对比）

2.2-服务端生命周期

2.2-服务端与客户端共有的生命周期

2.3-客户端生命周期

2.4-Nuxt路由

2.5-Nuxt导航守卫

三、Nuxt配置项

3.1-Head

3.2-CSS

3.3-Model与数据交互

3.4-配置代理

四、Nuxt使用Vuex状态树

五、项目重构（V-Cli项目重构到Nuxt中）

5.1-路由配置

5.2-代理和扩展$axios解耦

5.3-引入VueX和组件重构

5.4-引入ElementUI（按需引入）

六、项目上线

6.1-项目打包

6.2-Nuxt发布IIS绑定域名

七、其他相关知识点

7.1-nuxt中使用cross-env配置环境变量

7.2-nuxt中使用svg-icon

7.3-nuxt中使用cookie

7.4-nuxt中使用代码高亮highlight.js插件

7.5-nuxt中使用全局水印

7.6-nuxt中实现图片放大预览功能

7.7-nuxt中使用windiCSS

一、为什么用Nuxt

SEO：搜索引擎优化

1.1如何进行搜索引擎优化？
  • 多页面
  • Title、描述、关键字
  • 网站内容

1.2-预渲染

1.2.1-预渲染图解

​

1.2.2-如何使用？

（1）vue项目中安装prerender-spa-plugin

        npm install prerender-spa-plugin -S

（2）vue.config.js进行配置

（3）修改Title、描述、关键词：vue-mate-info，下载vue-meta-info

        npm install vue-meta-info -S

（4）到页面组件中进行配置

        metaInfo：{

                title："西瓜程序猿",

                meta:[{

                        name:"关键词，西瓜程序猿",

                        content:"描述"

                }]

        }

1.2.3-预渲染总结

可以解决：

1.打包多页面

2.可以解决每个页面单独生成title、描述、关键词

3.解决数据是在html生成放在页面上的，爬虫可以抓取到内容。

存在的问题：

1.预渲染无法配置动态路由

2.如果title、描述、关键词来与接口的数据，配置到met-info也是不行的。

适合做什么项目：

1.一个项目可以某几个页面要做SEO

1.3-服务端渲染（通过SSR）

1.3.1-预渲染图解

​

1.3.2-服务端渲染总结

适合做什么项目：

1.一个项目可能所有页面要做SEO（博客、内容网站）

1.4-优势劣势总结

1.前后端不分离

压力在后端

好处：安全

2.前后端分离

2.1-SPA单页面应用[vue-cli本身处理不了SEO]

压力在客户端

2.2预渲染

压力在客户端

问题：

1.在heml页面加载之前数据过来渲染后才有html的DOM结构，这样的话可能会存在一定时间空白页面的情况。

2.一个项目不是所有页面都做SEO。

2.3-服务器渲染

压力在客户端

问题：启2个服务[一个是后端自己的语言服务（C#/Java），一个是Node.JS的服务]

二、Nuxt安装与使用

2.1-安装与创建

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

npm -v

npx -v

​

2.1.2. 创建一个Nuxt项目

（1）输入命名进行创建。

npx create-nuxt-app <项目名>

（2）选择项：

Project name——项目名称

Programming language——程序设计语言

Package manager——包管理器

UI framework——UI框架

Nuxt.js modules——NuxtJS模块（如果需要安装某个需要按"空格"电亮才行）

Linting tools——代码校验工具

Testing framework——测试框架

Universal——渲染模式（SSR:服务端渲染、SSG：静态页面生成）

Deployment target——部署目标

Development tools——开发工具

What is your GitHub username?——GitHub名称

Version control system——版本控制工具

演示如下：

​

创建成功如下如：

​

2.2-目录结构（VueCli 与 Nuxt 对比）

pages——页面（类似于：src/views）

components——组件（类似于：src/components）

static——静态资源（类似于：scr/assets）

store——vuex状态树（类似于：src/store）

muxt.config.js——全局配置文件（类似于：vue.config.js）

如下：

​

2.2-服务端生命周期

2.1.1-nuxtServerInit(store,context){}

参数1：vuex上下文

参数2：nuxt上下文

2.1.2-middleware()

全局：

全局导航守卫 export default function(){    console.log("middleware 西瓜程序猿")}

局部：

第一种页面级别导航守卫  middleware:"西瓜程序猿", 

第二种页面级别导航守卫  middleware(){  console.log("我是全局导航守卫")  }

2.1.3-validate({params,query}){}
判断URL参数是否符合标准，页面中写。

validate({params,query}){

        校验参数

        ...

        console.log("3.validate...")

        return true;

}

2.1.4-asyncData()——限于页面组件

会在这个里面做发送请求的操作。

2.1.5-fetch

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

2.2-服务端与客户端共有的生命周期

beforeCreate(){

        console.log("6.beforeCreate")

},

created(){

        console.log("7.created...")

},

2.3-客户端生命周期

beforeMount(){

        console.log("8.客户端beforeMount...")

},

mounted(){

        console.log("9.客户端monted...")

},

beforeUpdate(){

        console.log("10.beforeUpdate...");

},

updated(){

        console.log("11.updated...");

},

beforeDestroy(){

        console.log("12.beforeDestroy...");

},

destroyed(){

        console.log("13.destroyed...");

}

2.4-Nuxt路由

2.4.1-路由跳转的三种方式

<a href="/list?id=1">a连接的形式跳转</a><br/>

<nuxt-link :to="{name:'list',query:{id:1},params:{id:2}}">Link的方式</nuxt-link><br/>

<button @click="toList">js跳转</button><br/>

toList(){

        this.$router.push({

                path:'/list',

                query:{

                        id:123

                 },

                params:{

                        id:321

                }

        });

}

2.4.2-使用已有的VueCli路由文件

（1）安装插件。

npm install @nuxtjs/router -S

（2）在【nuxt.config.js】文件的【modules】模块中配置。

modules: [

'@nuxtjs/router'

],

（3）在根路径删新建一个【router.js】文件，文件名必须为router。

​

（4）修改该文件的内容。

importVuefrom"vue"
importVueRouterfrom"vue-router"
importHomefrom"@/pages/haverouter/Home.vue"
importAboutfrom"@/pages/haverouter/About.vue"
importNewsfrom"@/pages/haverouter/News.vue"
Vue.use(VueRouter)
const routes=[
  {
    path:'/home',
    name:"Home",
    component:Home
  },
  {
    path:'/about',
    name:"About",
    component:About
  },
  {
    path:'/news',
    name:"News",
    component:News
  }
]
letrouter=newVueRouter({
  mode:"history",
  routes
});
//全局导航守卫
router.beforeEach((to,from,next)=>{
  if(to.name=="About"){
    next("/news")
  }else{
    next()
  }
})
exportfunctioncreateRouter(){
  returnrouter;
}

​

2.5-Nuxt导航守卫

2.5.1-router.js

vue-cli中怎么用，next中就怎么用，几乎一样。

//全局导航守卫
router.beforeEach((to,from,next)=>{
  if(to.name=="About"){
    next("/news")
  }else{
    next()
  }
})

2.5.2-NuxtJS

中间件：middleware

全局：
// 全局导航守卫
export default function(store,route,redirect,parms,query,req,res){    
  console.log("middleware 西瓜程序猿")
}

局部：
//第一种页面级别导航守卫  
middleware:"西瓜程序猿", 

//第二种页面级别导航守卫  
middleware(){  
  console.log("我是全局导航守卫") 
}

插件：plugins

（1）在【nuxt.config.js】的plugins进行配置。

plugins: [

'~/plugins/router.js'

],

（2）新建一个【router.js】文件，然后进行配置。

​

exportdefault ({app})=>{

        全局

        app.router.beforeEach((to,from,next)=>{

                console.log(to)

                next();

        })

}

2.5.3-使用本地存储

服务端不能使用localStorage和Cookie

需要使用以下模块：

（1）安装

npm install cookie-universal-nuxt -s

（2）在【nuxt.config.js】的【modules】引入

modules: [ 'cookie-universal-nuxt' ],

（3）如何使用

设置cookie：this.$cookies.set('token', 123456)

获取cookie：this.$cookies.get("token")

清除cookie：this.$cookies.remove('token')

三、Nuxt配置项

3.1-Head

全局在【nuxt.config.js】的[head]中定义。

​

局部在每个页面中定义，全局已有的可以不用在局部定义。

​

3.2-CSS

3.2.1-使用全局css

​

3.2.2-使用ElementUI

（1）下载。

npm i element-ui -S

（2）在根目录新建一个【plugins】文件夹中新建一个【element.js】文件。

importVuefrom"vue"

importElementUI from"element-ui"

Vue.use(ElementUI);

（3）在【nuxt.config.js】文件中进行配置。

  css: [
    "element-ui/lib/theme-chalk/index.css"
  ],

  plugins: [
    '~/plugins/element.js'
  ],

3.3-Model与数据交互

3.3.1-安装axios

方法一：

（1）安装：npm install @nuxtjs/axios -S

（2）在【nuxt.config.js】中配置：'@nuxtjs/axios'

方法二：

（1）安装：npm install axios -S

3.3.2-asyncData生命周期（方法）

pages目录中的页面组件才可以使用，components内的.vue文件不可以使用的。

asyncData中没有this。

3.3.3-fetch生命周期（方法）

fetch是有this的。

3.4-配置代理

（1）安装

npm install @nuxtjs/axios @nuxtjs/proxy -S

（2）在【nuxt.config.js】文件中配置。

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios:{
    //是否可以跨域
    proxy:true
  },
  proxy:{
    '/api':{
      target:"http://xx.xx.xx.xxx:8081",
      pathRewrite:{
        '^/api':''
      }
    }
  },

四、Nuxt使用Vuex状态树

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

五、项目重构（V-Cli项目重构到Nuxt中）

5.1-路由配置

（1）安装

npm install @nuxt/router -S

（2）在【nuxt.config.js】文件中进行配置。

 modules: [
   "@nuxtjs/router"
 ],

（3）把vue-cli中router文件拷贝到nuxt项目根目录中，并命名为【router.js】。

​

（4）然后修改这个文件。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/pages/blog/home.vue';//博客首页

Vue.use(Router);

const routes = [
  { path: '/',component: Home},
];


export function createRouter(){
  return new Router({
    mode: "history",
    routes,
  });
}

5.2-代理和扩展$axios解耦

（1）安装代理与axios。

npm install @nuxtjs/axios @nuxtjs/proxy -S

（2）在【nuxt.config.js】文件中进行配置。

modules: [
    "@nuxtjs/axios",
    "@nuxtjs/proxy"
],

（3）配置代理。

//开启代理
axios:{
   proxy:true,
},
proxy:{
   "/api":{
      target:"http://xx.xx.xx.xxx:8081"
   }
},

（4）创建一个【plugins】文件夹，并新建一个名为【axios.js】文件，配置如下：

export default ( {$axios} ) =>{
    //请求拦截器
    $axios.onRequest((config)=>{
        console.log("请求拦截器...");
        return config;
    });

    //异常拦截器
    $axios.onRequest((error)=>{
        console.log("异常拦截器...");
    });

    //响应拦截器
    $axios.onResponse((response)=>{
        console.log("响应拦截器...");
        return response.data;
    });
}

（5）在【nuxt.config.js】文件中进行配置。

  plugins: [
    "~/plugins/axios"
  ],

5.3-引入VueX和组件重构

（1）创建一个【store】文件夹并在里面新建一个【index.js】文件，内容如下。

import Vue from 'vue'
import Vuex from 'vuex'

//使用Vuex
Vue.use(Vuex)

import app from './modules/app'
const store = () => new Vuex.Store({
  //导入模块
  modules:{
    app,
  }
});

//导出
export default store;

（2）创建一个【models】文件夹并在里面新建一个【user.js】文件，内容如下。

//【应用程序模块】
export default{
  //单一状态树，UI可通过this.$store.state.user.*获得数据
  state:{

  },
  // 唯一拥有更改内存数据的接口，不可进行异步操作
  mutations:{

  },
  // 与mutation通讯，UI层写入内存数据的接口，可异步操作
  actions:{
   
  }
}

5.4-引入ElementUI（按需引入）

（1）安装

npm i element-ui -S

npm i -D babel-plugin-component

（2）新建一个【elementui-ui.js】放在【plugins】文件夹下。

import Vue from 'vue';
// 按需引入ElementUI
import {
    Pagination,
    Dialog,
    Autocomplete,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Menu,
    Submenu,
    MenuItem,
    MenuItemGroup,
    Input,
    InputNumber,
    Radio,
    RadioGroup,
    RadioButton,
    Checkbox,
    CheckboxButton,
    CheckboxGroup,
    Switch,
    Select,
    Option,
    OptionGroup,
    Button,
    ButtonGroup,
    Table,
    TableColumn,
    DatePicker,
    TimeSelect,
    TimePicker,
    Popover,
    Tooltip,
    Breadcrumb,
    BreadcrumbItem,
    Form,
    FormItem,
    Tabs,
    TabPane,
    Tag,
    Tree,
    Alert,
    Slider,
    Icon,
    Row,
    Col,
    Upload,
    Progress,
    Spinner,
    Badge,
    Card,
    Rate,
    Steps,
    Step,
    Carousel,
    CarouselItem,
    Collapse,
    CollapseItem,
    Cascader,
    ColorPicker,
    Transfer,
    Container,
    Header,
    Aside,
    Main,
    Footer,
    Timeline,
    TimelineItem,
    Link,
    Divider,
    Image,
    Calendar,
    Backtop,
    PageHeader,
    CascaderPanel,
    Loading,
    MessageBox,
    Message,
    Notification,
    Avatar,
    Scrollbar,
    Empty,
    Skeleton,
    SkeletonItem
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.use(Avatar);//头像
Vue.use(Scrollbar);//滚动条
Vue.use(Empty);//空状态
Vue.use(Skeleton);//骨架屏
Vue.use(SkeletonItem);

//挂载Message
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

（3)在【nuxt.config.jf】配置。

// 全局CSS: https://go.nuxtjs.dev/config-css
  css: [
    "element-ui/lib/theme-chalk/index.css"
  ],
  
  
// 在呈现页面之前要运行的插件: https://go.nuxtjs.dev/config-plugins
  plugins: [
    "@/plugins/element-ui",
  ],
  
  
    // 生成配置: https://go.nuxtjs.dev/config-build
  build: {
    //按需引入ElementUI
    transpile: [/^element-ui/],
    babel: {
      plugins: [
        ['component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk'
          }
        ]
      ]
    }
  }

六、项目上线

6.1-项目打包

（1）运行命令

npm run build

（2）将一下文件拷贝到服务器上 (根据自己项目文件存放情况选择) 。

​

（3）使用pm2启动

pm2 start

6.2-Nuxt发布IIS绑定域名

 参考文献：
1.安装ARR：在IIS7中使用ARR(Application Request Routing)反向代理虚拟目录到Nodejs站点 - 爱码网

2.Nuxt.js-IIS发布部署：Nuxt.js IIS部署,Nuxt.js 发布部署_iis上部署nuxt.js_橙-极纪元的博客-CSDN博客

一、在IIS7中使用ARR(Application Request Routing)反向代理虚拟目录到Nodejs站点

（1）下载并安

​

​

（2）将下载好的文件拷贝到服务器上，并双击安装（打开时间比较长，慢慢等就好了）。

​

​

（3）安装成功后，重新打开IIS，出现这个图标说明安装成功了。

​

（4）双击【 Application Request Routing Cache 】图标，然后点击【Server Proxy Settings】。

​

（5）勾选【Enable Setting】，然后点击【应用】。

​

二、添加站点

（1）右击【网站】，点击【添加网站】。

​

（2）填写基本信息。

​

（3）然后点击刚刚创建的项目，再双击【URL 重写】，点击【添加规则】。

​

​

选择【反向代理】

​

填写你原本用Node发布的Nuxt项目IP+端口即可，然后点击确定。

​

七、其他相关知识点

7.1-nuxt中使用cross-env配置环境变量

（1）使用命令安装依赖

npm i cross-env

（2）新建一个【env.js】文件，填写相关不同环境的配置信息。

export default {
  // 开发环境
  dev: {
    NODE_ENV : 'development',
    // Base URL
    BASE_URL: 'http://xx.xx.xx.xxx:8081',
    // Base API
    VUE_APP_BASE_API: 'http://xx.xx.xx.xxx:8081'
  },

  // 测试环境
  test: {
    NODE_ENV : 'test',
    // Base URL
    BASE_URL: 'http://xx.xx.xx.xxx:8081',
    // Base API
    VUE_APP_BASE_API: 'http://xx.xx.xx.xxx:8081'
  },

  // 生产环境
  prod: {
    NODE_ENV : 'production',
    // Base URL
    BASE_URL: 'http://xx.xx.xx.xxx:8081',
    // Base API
    VUE_APP_BASE_API: 'http://xx.xx.xx.xxx:8081'
  }
}

（3）在【package.json】中配置。

    "dev": "npm run dev:dev",
    "build": "npm run build:dev",
    "start": "npm run start:dev",
    "dev:dev": "cross-env MODE=dev nuxt",
    "build:dev": "cross-env MODE=dev nuxt build",
    "start:dev": "cross-env MODE=dev nuxt start",
    "dev:test": "cross-env MODE=test nuxt",
    "build:test": "cross-env MODE=test nuxt build",
    "start:test": "cross-env MODE=test nuxt start",
    "dev:prop": "cross-env MODE=prod nuxt",
    "build:prop": "cross-env MODE=prod nuxt build",
    "start:prop": "cross-env MODE=prod nuxt start",

（4）在【nuxt.config.js】中配置。

import env from './config/env';
 
 
// 配置环境变量
env: {
    MODE: process.env.MODE
},
  
  
// 代理
proxy:{
    "/api":{
      target:"http://47.93.83.192:7990",//配置接口地址
      target:env[process.env.MODE].VUE_APP_BASE_API,//配置接口地址
      changeOrigin: true
    }
},

7.2-nuxt中使用svg-icon

（1）安装相关依赖

npm i svg-sprite-loader -D

npm i nuxt-svg-sprite-loader

（2）新建如下相关文件

​

【icon】放置svg文件

​

【index.js】

import Vue from 'vue';
import SvgIcon from '@/components/common/svg-icon'; // 导入SVG组件

// 全局注册
Vue.component('svg-icon', SvgIcon);

// 三个参数：引入资源的目录 是否需要便利子目录 匹配文件的规则
const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

（3）在【nuxt.config.js】中进行配置。

  plugins: [
    '@/assets/icons'
  ],  
  
  modules: [
    ['nuxt-svg-sprite-loader', {
      symbolId: 'icon-[name]'
    }]
  ],

7.3-nuxt中使用cookie

官方地址：cookie-universal-nuxt - npm

（1）安装依赖

npm i --save cookie-universal-nuxt

（2）在【nuxt.config.js】中进行配置。

 modules: [
    'cookie-universal-nuxt'
  ],

（3）使用

const cookieValObject = { param1: 'value1', param2: 'value2' }

// nuxt middleware——中间件
export default ({ app }) => {
  app.$cookies.set('cookie-name', 'cookie-value', {
    path: '/',
    maxAge: 60 * 60 * 24 * 7
  })
  app.$cookies.set('cookie-name', cookieValObject, {
    path: '/',
    maxAge: 60 * 60 * 24 * 7
  })
}

// client——客户端
this.$cookies.set('cookie-name', 'cookie-value', {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
})
this.$cookies.set('cookie-name', cookieValObject, {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
})

7.4-nuxt中使用代码高亮highlight.js插件

参考文献：

（1）vue nuxt.js 代码高亮 highlight.js或 prismjs 插件的用法_prismjs vue_下一站丶的博客-CSDN博客

（2）vue3：基于highlight实现代码高亮、显示代码行数、添加复制功能_highlight.js复制按钮_无知的小菜鸡的博客-CSDN博客

（1）安装

npm install highlight.js

（2）在【plugins】文件下添加一个【highlight.js】文件。

import Vue from 'vue';
import hljs from 'highlight.js';
// 样式文件(我选的是atom-one-dark-reasonable样式 可以通过highlight.js/styles 选择其他css)
import 'highlight.js/styles/atom-one-dark-reasonable.css';

// 挂载highlight
Vue.directive('highlight', function (el) {
  let element = el.querySelectorAll('pre');
  element.forEach((block) => {
    hljs.highlightBlock(block);
  });
});

（3）在【nuxt.config.js】中引入。

  plugins: [
    '@/plugins/highlight'
  ],

（4）在代码中使用

<div v-html='BlogArticleDetail.articleContent' v-highlight></div>

7.5-nuxt中使用全局水印

参考文献：

（1）实现水印：花花影院 - 最新电影电视剧在线观看

（2）nuxt自定义全局方法：nuxt 自定义全局方法、全局属性、全局变量解决方案_nuxt定义全局变量_雪狼之夜的博客-CSDN博客

（1） 在【plugins】文件夹里新增一个【watermark.js】文件(文件名可以自己取)。

​

import Vue from 'vue';
let watermarkObj = {};

/**
 *  设置全局水印
 *  @text == 水印内容
 *  @sourceBody == 水印添加在哪里，不传就是body
 * */
let idGlocal = 'watermark_id';
let setWatermarkGlocal = (text, sourceBody) => {
  if (document.getElementById(idGlocal) !== null) {
    document.body.removeChild(document.getElementById(idGlocal));
  }

  let can = document.createElement('canvas');
  can.width = 500;
  can.height = 200;

  let cans = can.getContext('2d');
  cans.rotate((-20 * Math.PI) / 180);
  cans.font = '15px Vedana';
  cans.fillStyle = 'rgba(0, 0, 0, 0.05)';
  cans.textAlign = 'left';
  cans.textBaseline = 'Middle';
  cans.fillText(text, can.width / 20, can.height);

  let water_div = document.createElement('div');
  water_div.id = idGlocal;
  water_div.style.pointerEvents = 'none';
  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
  if (sourceBody) {
    water_div.style.width = '100%';
    water_div.style.height = '100%';
    sourceBody.appendChild(water_div);
  } else {
    water_div.style.top = '3px';
    water_div.style.left = '0px';
    water_div.style.position = 'fixed';
    water_div.style.zIndex = '100000';
    water_div.style.width = document.documentElement.clientWidth + 'px';
    water_div.style.height = document.documentElement.clientHeight + 'px';
    document.body.appendChild(water_div);
  }
};

/**
 *  添加全局水印
 *  @text == 水印内容
 *  @sourceBody == 水印添加在哪里，不传就是body
 * */
watermarkObj.setGlocal = (text, sourceBody) => {
  setWatermarkGlocal(text, sourceBody);
  window.onresize = () => {
    setWatermarkGlocal(text, sourceBody);
  };
};

/**
 *  删除全局水印
 * */
watermarkObj.removeGlocal = () => {
  if (document.getElementById(idGlocal) !== null) {
    document.body.removeChild(document.getElementById(idGlocal));
  }
};

// 设置全局方法
var watermark = {
  install(Vue) {
    Vue.prototype.$watermark = {
      // 设置全局水印
      setGlocal: function (test, sourceBody) {
        watermarkObj.setGlocal(test, sourceBody);
      },
      //  删除全局水印
      removeGlocal: function () {
        watermarkObj.removeGlocal();
      },
    };
  },
};

Vue.use(watermark);

（2）在【nuxt.config.js】中进行配置。

  plugins: [
    { src: '@/plugins/watermark', ssr: false }
  ],

（3）在xx.vue文件中使用。

【全局使用】

  mounted() {
    // 添加水印
    this.$watermark.setGlocal('©西瓜程序猿');
    
  },
  beforeDestroy() {
    // 删除水印
    this.$watermark.removeGlocal();
  },

【局部使用】（注意：局部使用记得外外层div设置宽高）

<template>
    <div ref="content" style="width: 500px;height: 500px;border: 1px solid #ccc;">
</template>

<script>
 export default {
     mounted() {
      // 添加水印
      this.$watermark.setGlocal('©西瓜程序猿',this.$refs.content);
    },
    beforeDestroy() {
      // 删除水印
      this.$watermark.removeGlocal();
    },
 }
</script>

7.6-nuxt中实现图片放大预览功能

参考文献：在nuxt中实现图片放大预览功能-腾讯云开发者社区-腾讯云

（1）安装

npm install v-viewer

（2）在【plugins】文件夹里新增一个【viewer.js】文件(文件名可以自己取)。

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer);
Viewer.setDefaults({
  Options: { 
    'inline': true, 
    'button': true, 
    'navbar': true, 
    'title': true, 
    'toolbar': true, 
    'tooltip': true, 
    'movable': true, 
    'zoomable': true, 
    'rotatable': true, 
    'scalable': true, 
    'transition': true, 
    'fullscreen': true, 
    'keyboard': true, 
    'url': 'data-source' 
  }
});

（3）在【nuxt.config.js】中进行配置。

  plugins: [
    { src: '@/plugins/viewer', ssr: false }
  ],

（4）在xx.vue文件中使用。

<div class="markdown-body-box" v-viewer>
<!-- 页面内容、图片等等 -->
</div>

效果：

​

7.7-nuxt中使用windiCSS

官网网站：Windi CSS for Nuxt.js

（1）安装

npm i nuxt-windicss -D

（2）在【nuxt.config.js】文件中配置

  buildModules: [
    'nuxt-windicss'
  ],

（3）如果使用了TS可以进行配置。

    "types": [
      "nuxt-windicss"
    ]

版权声明：本文为原创文章，版权归 [西瓜程序猿] 所有，转载请注明出处，有任何疑问请私信咨询。

原文链接：Nuxt.JS实战指南：从入门到精通的练习之旅_西瓜程序猿的博客-CSDN博客

西瓜程序猿
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Nuxt.js 实战集锦
10-15
主要介绍了Nuxt.js 实战集锦,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Nuxt.js之自动路由原理的实现方法
10-17
Nuxt.js是一个基于Vue.js的框架，专门用于构建服务端渲染的应用。它的核心特性之一是自动路由，这使得开发者能够快速地根据项目目录结构来创建和管理路由，无需手动配置Vue Router。Nuxt.js自动路由的实现原理是通过...
一文搞定nuxt.js搭建到部署（ssr和静态部署）
weixin_45636198的博客
03-04 5855
uxt 是一个更高级别的 Node.js web 开发框架，用于创建 Vue 应用，可在两种不同模式下开发和部署：通用（SSR）或单页应用（SPA）。此外，您可以在 Nuxt 中将 SSR 和 SPA 部署为静态生成的应用。即使您可以选择 SPA 模式，Nuxt 的全部功能仍在于其通用模式或用于构建通用应用的服务器端渲染（SSR）。通用应用用于描述可以在客户端和服务器端执行的 JavaScript 代码。SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。
Nuxt.js快速上手--安装
Zwq8023520的博客
11-01 922
Nuxt.js快速上手--安装
Nuxt学习笔记
最新发布
shgg2917的博客
04-29 251
<Nuxt />
Nuxt.js的详细使用
qq_43340606的博客
07-06 3656
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外，我们还提供了一种命令叫： ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。我们相信这个命令所提
Nuxt项目配置、目录结构说明-实战教程基础-Day02
qq_43762932的博客
03-10 1529
Nuxt.js目录结构说明、Nuxt.js项目配置说明
nuxt 安装 element-plus
阿涩的博客
06-13 1095
(1099条消息) Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）_白忆宇的博客-CSDN博客。(1099条消息) Nuxt3重点特性使用举例记录_白忆宇的博客-CSDN博客。
Nuxt.js快速上手
会思想的苇草i的博客
08-14 309
Nuxt.js是一个基于Vue.js的应用框架，用于创建通用、可扩展的Web应用程序。它提供了预设的配置和约定，使得开发者可以更快速地构建高性能的前端应用。Nuxt.js支持服务端渲染(SSR)和静态站点生成(SSG)，具有优化SEO和首屏加载速度的特点。通过集成许多常用插件和功能，如路由、状态管理和代码拆分，Nuxt.js大大简化了前端开发流程。它适用于各种规模的项目，从简单的静态网页到复杂的企业级应用。
Nuxt.js 基础入门教程
大灰狼的小绵羊哥哥的博客
10-28 1336
原文链接 Vue 开发一个单页面应用，相信很多前端工程师都已经学会了，但是单页面应用有一个致命的缺点，就是 SEO 极不友好。除非，vue 能在服务端渲染（ssr）并直接返回已经渲染好的页面，而并非只是一个单纯的 &lt;div id="app"&gt;&lt;/div&gt;。 Nuxt.js 就是一个极简的 vue 版的 ssr 框架。基于它，我们可以快速开发一个基于 vue 的 ssr ...
(vue.js)nuxt.js:IP端口/局域网配置
11-01
1、nuxt.js/vue.js安装与运行 2、Ip端口冲突解决 3、IP端口/局域网配置 4、运行[WebStorm]]的配置
Nuxt.js实战和配置详解
10-16
主要介绍了Nuxt.js实战和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
nuxt-modules-cli:从终端浏览Nuxt.js模块
03-17
从终端浏览Nuxt.js模块。 Usage: nuxt-modules [options] Options: -V, --version output the version number -h, --help display help for command :sparkles: 安装 npm install -g nuxt-modules-cli 或与npx...
Nuxt.js真的很容易上手，快速教程
椰卤工程师的个人博客
04-26 1037
Nuxt是一个框架，给开发者提供强大的体系结构。它可逐步采用，可用于创建从静态登录页面到复杂的企业就绪Web应用程序。 本质上通用，它支持不同的目标（服务器，无服务器或静态），并且服务器端呈现是可切换的。 它可以通过强大的模块生态系统进行扩展，可以轻松连接REST或GraphQL端点，收藏夹CMS，CSS框架等。PWA和AMP支持只是Nuxt项目的一个模块。 NuxtJS是您的Vue.js项目的基...
Nuxt.js配置proxy跨域代理以及asyncData使用方法
zyxczyf123的博客
01-09 4980
首先下载proxy cnpm i @nuxtjs/proxy -D 在nuxt.config.js中配置 //找到modules模块，把proxy添加到里面 modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], axios: { proxy: true // Can be also an object with default options }, proxy: { '/api': { change
Nuxt 学习笔记
qq_49487356的博客
10-22 1109
nuxt学习笔记
Nuxt3 引入插件的 (ant-design-vue ui) 的 最新方式
qq_33950912的博客
04-17 1368
nuxt3 引入插件 （ant-design-vue ui） 的 最新方式
Nuxt.js 详解：哔哩哔哩（bilibili）实战项目
Itmastergo的博客
01-19 965
Nuxt.js 是一个基于 Vue.js 的通用应用框架，它简化了 Vue.js 应用的开发过程，提供了许多有用的特性和约定，使得开发者能够更轻松地构建现代化、高性能的前端应用。下面详细讲解 Nuxt.js 的各个方面，包括基本概念、核心特性、路由、插件、服务器端渲染（SSR）等，可以更深入地了解和掌握 Nuxt.js。
Nuxt.js+BootstrapVue+Json-server 基础入门到项目实战
08-18
为什么要学习服务端渲染 nuxt.js ? 现在我们的项目大多数都是SPA（单页面应用），在实际开发过程中单页面应用比之前的模板渲染要好很多，首先单页面应用是前后端分离，架构清晰，前端负责交互逻辑，后端负责数据，前后端单独开发，独立测试。但是，SPA不利于SEO（搜索引擎优化）。让搜索引擎更为信任该网站，通过提升排名获得更多网站流量，对于某些类型的网站是非常有必要的。目前大部分的Vue项目本质是 SPA 应用，React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。在我们开发的过程中，我们有 SEO 的需求，我们需要搜索引擎更多地抓取到我们的项目内容，此时我们需要SSR。SSR保证用户尽快看到基本的内容，也使得用户体验性更好。 Nuxt.js 是一个 Node 程序，基于vue.js开发的一套服务端渲染的框架，必须使用 Node 环境。我们对 Nuxt.js 应用的访问，实际上是在访问这个 Node.js 程序的路由，程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码，而路由是由 Nuxt.js 约定好的 pages 文件夹生成的，开发只需要遵循一定的约定，直接使用vue.js开发我们项目也是非常轻松的。 课程案例 (1) HOME PAGE (2) Jokes Page  （3）About Page  课程概述 在本课程中，大喵将使用 nuxt.js + bootstrapVue + json-server 开发实战性质一个入门级项目，带着大家来体验服务端渲染（SSR ）项目构建的过程；介绍 nuxt.js项目目录的结构，每个文件夹和文件的基本概念和作用，以及nuxt.config.js 配置文件的基本介绍；页面公共结构处理，路由页面跳转配置处理；axios 接口请求；带着大家来熟悉及掌握 bootstrapVue UI组件库的使用；
nuxt.js页面加载优化
10-09
Nuxt.js是一个基于Vue.js的服务端渲染框架，通过优化页面加载可以提高网站的性能和用户体验。以下是一些Nuxt.js页面加载优化的方法： 1. 使用异步数据：在nuxt.config.js文件中，可以通过asyncData方法来获取页面所需的异步数据，这样可以在服务器端渲染时获取数据，减少客户端请求次数，提高页面加载速度。 2. 代码拆分：Nuxt.js支持代码拆分，可以将不同页面的代码拆分成多个小块，只在需要时加载。这样可以减少首次加载的文件大小，加快页面渲染速度。 3. 图片优化：优化图片大小和格式，可以通过使用现代的图片格式（如WebP）和压缩图片来减小文件大小。同时，也可以使用图片懒加载和基于视口的延迟加载，只在图片进入可视区域时进行加载。 4. CDN加速：使用内容分发网络（CDN）来加速静态资源的传输，可以将静态文件（如CSS、JavaScript和图片）缓存到CDN节点，减少请求延迟，提高页面加载速度。 5. 资源预加载：使用Nuxt.js提供的<client-only>组件或者@nuxtjs/prerender-spa-plugin插件来实现资源的预加载，可以在首次访问时提前加载页面所需的资源，加快后续页面的加载速度。 6. 缓存策略：使用合适的缓存策略，将一些不经常变动的页面或者组件缓存到本地，可以减少服务器压力和网络请求次数，提高页面加载速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值