nuxt.js 项目的使用

运行图

安装

npx create-nuxt-app project

配置

koa + axios

typescript-vuex github

ui框架

element-ui

目录结构

assets —资源目录
layouts —布局目录
middleware —中间件目录
plugins —插件目录
static —静态(后台)

• 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

异步数据 SSR解析

• 页面数据 asyncData

先请求

扔个模板结构(静态渲染) asyncData(请求拿数据)

把编译的结果扔给客户端 服务器下发一个script 挂载到window下

同步到浏览器(交互) 虚拟编译和服务器扔过来的作对比, 不同重新请求

第一参数: 当前页面的上下文对象

• ts中操作

@Component({
  async asyncData({params,app,$axios}) {
    console.log(params,app); 
    app.store.dispatch('search/setName', params.key)
    return {
      keysword: params.key
    }
  },
  components: {
    ECrumb
  },
})

• vuex fetch

nuxtServerInit

• 第一次请求
• 保存用户登录
• 全局数据

如果你使用_状态树模块化_的模式，只有主模块（即 store/index.js）适用设置该方法（其他模块设置了也不会被调用）。

layouts 页面模板

[图片上传失败…(image-ac40cb-1562038525452)]

pages 即是路由

路由

• 基础路由
• 动态路由
• 嵌套路由

ts中

npm i @nuxt/typescript -D

npm i vue-class@0.3.1 vue-property-decorator@7 -S

• tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

head layout asyncData…等 放在@Component使用

@Component({
  // 
  head() {
    return {
      title: this.name
    }
  },
  layout: 'search'
})

.vue中ts 独立出来 才能引入单独ts

• vuex 使用

index.js

import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import * as search from './module/search'
import geo from './module/geo'
// webpack 中 生产模式或开发
const createStore = () => {
  return new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
      [search.name]: search,
      geo
    }
  })
}

export default createStore  

• 相关模块 module/geo.ts

import { RootStateTypes } from '../types';
import { MutationTree, ActionTree } from 'vuex';

const namespaced = true;
interface stateInterface {
  city: string;
}
const state: stateInterface = {
  city: ''
};

export const types = {
  CITY: 'CITY'
};

const mutations: MutationTree<stateInterface> = {
  [types.CITY]: (state, city: string) => {
    state.city = city;
  }
};

const actions: ActionTree<stateInterface, RootStateTypes> = {
  setCity({ commit }, city) {
    commit(types.CITY, city);
  }
};

export default { namespaced, state, actions, mutations };

• 如何拓展 webpack 配置 — 添加 alias 配