使用Nuxt
Nuxt.js文書：https://zh.nuxtjs.org/guide/
始めます
初期Nuxtプロジェクト
npx create-nuxt-app <项目名>
// or
yarn create nuxt-app <项目名>
ラン
npm run dev
ルーティング
基本的なルーティング
ベースNuxt.js pagesディレクトリ構造が自動的に生成されたvue-routerモジュールのルーティング設定します。
たとえば、pages次のよう：
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
次のように、Nuxt.js自動的に生成されたルーティング構成です。
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ] } ルーティングパラメータの受け渡し
Nuxt.js、なし構成はvue-router、ルーティングの設定完全に依存pagesディレクトリ構造。だから、例外質量参加ません。
ではvue-routerによってpath: '/route/:param'-definedパラメータによるNuxt.jsにいる間_接頭辞という名前Vueのファイルまたはディレクトリ。
することで$route.params.参数名、パラメータの値をとります。
レイアウト
プロジェクトでは、通常、ヘッダ、フッタ、NAV、等、これらの成分が一緒にレイアウトを形成することができるなど、複数のページを多重化することができるいくつかの構成要素があります。
Nuxtプロジェクト構造では、ある/layoutsフォルダは、このフォルダ内のレイアウトファイルを書いて、。通常、導入/componentsアセンブリでは、プラス<nuxt />。
例えば：
<template>
<div class="mLayout"> <m-header /> <!-- 这个是“坑”，使用了这个布局文件的页面生成的内容，将出现在下面的这个“坑”里面 --> <nuxt /> </div> </template> <script> // 需要注意的一个小细节 在Nuxt项目中 ~ 代表根目录 import mHeader from '~/components/mHeader.vue' export default { components: { 'm-header': mHeader } } </script> プロジェクト内の要素-UIを使用します
インストール要素-UI
npm i element-ui -S
ElementUI.jsを作成します
では/plugins、フォルダ、ElementUI.jsファイルを作成します。
import Vue from 'vue'
import ElementUI from 'element-ui' Vue.use(ElementUI) 設定nuxt.config.jsを追加
css: [
'element-ui/lib/theme-chalk/index.css'
],
plugins: [
// ssr: true表示这个插件只在服务端起作用 {src: '~/plugins/ElementUI', ssr: true } ], build: { // 防止element-ui被多次打包 vendor: ['element-ui'] } プロジェクト内のAxiosの使用
インストールaxios
npm i axios -S
axios.jsを作成します
では/plugins、フォルダ、axios.jsファイルを作成します。
import axios from 'axios'
// 设置baseURL
axios.defaults.baseURL = 'http://localhost:3301' // 创建axios对象，暴露 export default axios.create() 設定nuxt.config.jsを追加
重複したパッケージを防ぎます
build: {
vendor: ['axios']
}
使用
Vueのファイル任意のプロジェクトでは、axiosの導入は、オブジェクトを生成しました：
import axios from '~/plugins/axios'
以前axios.jsを作成していない場合、それはまた、直接モジュールaxios導入することができます。
import axios from 'axios'
利点は、このようなベースURLとしてなど、いくつかの設定を行うことができますaxios.js、生成されたaxiosオブジェクトを作成します。
SEOの最適化
全体的な状況
設定ファイルを変更し、各プロジェクトは、HTMLをファイル生成Nuxt.config.js <head>では、コンフィギュレーションに追加されます。
head: {
// title: pkg.name,
title: '想被百度垂青的标题',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description }, // 其它那些是本来就有的，加上的内容在这里 { name: 'keywords', content: '很多个很多个关键词很多个很多个关键词很多个很多个关键词' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, 部分的
Vueのファイル：
<script>
export default { layout: 'mLayout', // SEO优化 head () { return { title: '标题', meta: [ { name: 'keywords', content: '很多个很多个关键词很多个很多个关键词很多个很多个关键词' } ] } } } </script> ピットのマークEslint
Nuxtプロジェクトでは、そこに、このような報告などEslint換気の個々のケースをされているAttribute "for" should be on a new line vue/max-attributes-per-lineエラー、およびコードを正しくフォーマットされていないeslint。
解きます
.Eslintrc.jsはで、設定ファイルを変更するrules次のような構成に加えて、エラーではないだろう。
'vue/max-attributes-per-line': [
2,
{
singleline: 1,
multiline: {
max: 1,
allowFirstLine: true
}
}
]