···
权重可以通过以下方式增加:1,竞价排名 2,关键字索引 3, 内容 4, 外链 5,url 6,标签优化 7.更新频度
yarn create nuxt-app <project-name>
? Project name: test
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vant
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier, StyleLint, Commitlint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: (Use arrow keys)
> Git
None
Nuxt脚手架 create-nuxt-app
npm i -g create-nuxt-app
create-nuxt-app test
pages: 路由视图目录
layout:布局目录
middleware: 路由中间件
store: vuex
plugins:插件
component:组件
.nuxt:打包后的目录
static:静态文件目录
nuxt.config.js:配置文件
nuxt 通过 layout 定义自定义布局
默认使用 layout 目录下的 default.vue
<template>
<div>
<Header></Header>
<Nuxt />
<Footer></Footer>
</div>
</template>
使用新的 layout
1、layout 可新建多个
2、在页面中配置 layout: “layout 名字” 即可
Nuxt 使用文件路由视图模式,默认情况下pages
下的所有视图文件都会被编译成路由
pages/index.vue -> { name: '/', component: ~/pages/index.vue, path: '/' }
pages/user/index.vue -> { name: 'user', component: ~/pages/user/index.vue, path: '/user' }
动态路由
pages/list/_id.vue -> { name: 'list', component: ~/pages/list/_id.vue, path: '/list/:id' }
取值:params.id
validate({ params }) { // 路由判断
return params.id === 1
},
asyncData({ $api, params }) { // 接口请求,服务端渲染,不存在this
const d = await $api()
return { d }
},
fetch({ $api, params }) { // 接口请求,服务端渲染,存在this
const d = await $api()
this.d = d
},
nuxt 使用vuex -> store目录 中 index.js 导出 vuex 实例
import Vuex from 'vuex'
const store = () => new Vuex.Store({})
export default store
分为服务端store,客户端store
分为客户端与服务端的插件
// 在插件中
import Vue from 'vue'
import { Button } from ’ant-design-vue'
Vue.use(Button)
export default {
plugins: [
// 客户端和服务端都会注入
{ src: "~/plugins/ant-design-vue.js.js" },
// 仅客户端注入
{ src: "~/plugins/ant-design-vue.js.js", mode: "client" },
// 仅服务端注入
{ src: "~/plugins/ant-design-vue.js.js", mode: "server" },
],
};
全局配置
export default {
head: {
title: "虫子",
meta: [{ hid: "description", name: "description", content: "" }],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
css: ["~/assets/css/var.css"],
plugins: ["~/plugins/index", { src: "~/plugins/store", ssr: false }],
components: ["@/components/", "@/components/common"],
};
怎么调试服务端的接口?
// 安装`cross-env`包用于读取或设置环境变量
"scripts": {
"dev": "cross-env NODE_ENV=dev nuxt",
"test": "cross-env NODE_ENV=test nuxt",
"prod": "cross-env NODE_ENV=prod nuxt",
"build": "nuxt build",
"start": "nuxt start",
"build:prod": "cross-env NODE_ENV=prod nuxt build",
"generate": "nuxt generate"
},
yarn build -> 构建出.nuxt 目录
yarn start -> 打包后启动
复制如下文件进入服务器,使用 pm2 进程启动应用
// nuxt.config.js
// package.json
// .nuxt
// static
多语言
routes.map(item => {
// 遍历路由配置,往里面加入其它语言路由
})
{ name: '/', component: ~/pages/index.vue, path: '/' }
{ name: '/en', component: ~/pages/index.vue, path: '/en' }
host/en -> 首页
asyncData
提供了在服务端能获取数据在渲染页面的能力;fetch
提供了渲染页面之前同步 Vuex store 的空间plugins
加载 vue.js 插件