NUXT

[WangShuXian6]

Nuxt Vue.js 通用应用框架

https://zh.nuxtjs.org https://github.com/nuxt/nuxt.js https://github.com/nuxt-community

安装

npm install -g vue-cli

***
>生成生产静态文件需要首先开启 开发环境

***

指令 | 描述
-- | --
nuxt | 开启一个监听3000端口的服务器，同时提供hot-reloading功能
nuxt build | 构建整个应用，压缩合并JS和CSS文件（用于生产环境）
nuxt start | 开启一个生产模式的服务器（必须先运行nuxt build命令）
nuxt generate | 构建整个应用，并为每一个路由生成一个静态页面（用于静态服务器）

>NUXT 架构
![nuxt](https://user-images.githubusercontent.com/30850497/48045770-9689ee80-e1cc-11e8-961a-6367d9a5d0f1.png)

***

[WangShuXian6]

在 Nuxt.js 中使用预处理器

Less

npm install -D less less-loader

nuxt.config.js 添加

export default {
build: {
// You cannot use ~/ or @/ here since it's a Webpack plugin
styleResources: {
less: './assets/*.less'
}
}
}

pages/index.vue

<template>
<!--<section>-->
<!--<h1 class="header">Nuxt TypeScript Starter</h1>-->
<!--<div class="cards">-->
<!--<Card v-for="person in people" :key="person.id" :person="person"></Card>-->
<!--</div>-->
<!--</section>-->
<!---->
<!---->
<el-container style="height: 500px; border: 1px solid #eee">

<el-aside width="200px" style="background-color: rgb(238, 241, 246)">

  <el-menu :default-openeds="['1', '3']">

    <el-submenu index="1">

      <template slot="title"><i class="el-icon-message"></i>Navigator One</template>

      <el-menu-item-group>

        <template slot="title">Group 1</template>

        <el-menu-item index="1-1">Option 1</el-menu-item>

        <el-menu-item index="1-2">Option 2</el-menu-item>

      </el-menu-item-group>

      <el-menu-item-group title="Group 2">

        <el-menu-item index="1-3">Option 3</el-menu-item>

      </el-menu-item-group>

      <el-submenu index="1-4">

        <template slot="title">Option4</template>

        <el-menu-item index="1-4-1">Option 4-1</el-menu-item>

      </el-submenu>

    </el-submenu>

    <el-submenu index="2">

      <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>

      <el-menu-item-group>

        <template slot="title">Group 1</template>

        <el-menu-item index="2-1">Option 1</el-menu-item>

        <el-menu-item index="2-2">Option 2</el-menu-item>

      </el-menu-item-group>

      <el-menu-item-group title="Group 2">

        <el-menu-item index="2-3">Option 3</el-menu-item>

      </el-menu-item-group>

      <el-submenu index="2-4">

        <template slot="title">Option 4</template>

        <el-menu-item index="2-4-1">Option 4-1</el-menu-item>

      </el-submenu>

    </el-submenu>

    <el-submenu index="3">

      <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>

      <el-menu-item-group>

        <template slot="title">Group 1</template>

        <el-menu-item index="3-1">Option 1</el-menu-item>

        <el-menu-item index="3-2">Option 2</el-menu-item>

      </el-menu-item-group>

      <el-menu-item-group title="Group 2">

        <el-menu-item index="3-3">Option 3</el-menu-item>

      </el-menu-item-group>

      <el-submenu index="3-4">

        <template slot="title">Option 4</template>

        <el-menu-item index="3-4-1">Option 4-1</el-menu-item>

      </el-submenu>

    </el-submenu>

  </el-menu>

</el-aside>

<el-container>

  <el-header style="text-align: right; font-size: 12px">

    <el-dropdown>

      <i class="el-icon-setting" style="margin-right: 15px"></i>

      <el-dropdown-menu slot="dropdown">

        <el-dropdown-item>View</el-dropdown-item>

        <el-dropdown-item>Add</el-dropdown-item>

        <el-dropdown-item>Delete</el-dropdown-item>

      </el-dropdown-menu>

    </el-dropdown>

    <span>Tom</span>

  </el-header>

  <el-main>

    <el-table :data="tableData">

      <el-table-column prop="date" label="Date" width="140">

      </el-table-column>

      <el-table-column prop="name" label="Name" width="120">

      </el-table-column>

      <el-table-column prop="address" label="Address">

      </el-table-column>

    </el-table>

  </el-main>

</el-container>

[WangShuXian6]

使用UI库

https://github.com/ElementUI/nuxt-with-element-ui/blob/master/pages/index.vue

[WangShuXian6]

Typescript starter with Nuxt.js

https://github.com/nuxt-community/typescript-template vue init nuxt-community/typescript-template my-project

ES / TypeScript decorator for class-style Nuxt/Vue components https://github.com/nuxt-community/nuxt-class-component

[WangShuXian6]

路由

编程式路由

export default {
mounted() {
let self = this;
// 等待被动触发 才能进行初始化
$nuxt.$once('init', (resultData) => {
// $router 获取路由对象，控制页面跳转
self.$router.push({path: '/home/info'});

        // $route 接受路由对象，接受传参
        console.log(self.$route.path);
    })
}

}

[WangShuXian6]

NUXT SEO

nuxt.js中添加统计代码，添加百度统计，或者google的统计

添加百度统计 在 plugins 目录下创建 plugins/baiduGa.js 文件 plugins/baiduGa.js

export default ({app: {router}, store}) => {
/* 每次路由变更时进行pv统计 */
router.afterEach((to, from) => {
/* 告诉增加一个PV */
try {
window._hmt = window._hmt || []
window._hmt.push(['_trackPageview', to.fullPath])
} catch (e) {
}
})
}

然后，我们需要告诉 Nuxt.js 将该插件导入主应用中，在nuxt.config.js配置如下 nuxt.config.js

head: {
script: [
{src: 'https://hm.baidu.com/hm.js?****'}, /*引入百度统计的js*/
]
},
plugins: [
'@/plugins/ga.js', /*百度统计*/
]

---

添加google统计 官方 https://zh.nuxtjs.org/faq/google-analytics/

---

[WangShuXian6]

NUXT 使用 gh-pages

这里，我先假设小伙伴们都可以正常执行 nuxt generate 并生成对应的 dist 目录。

为了项目的并行开发，我们一般会在 .gitignore 文件里面将打包文件给忽略掉，但我们静态化页面的部署有需要用到 dist 目录下的所有打包文件。所以这里我们将使用 gh-pages 将打包文件发布到我们的 git 仓库

安装 gh-pages

npm i gh-pages -D

然后在 package.json 写入配置（当然你也可以新建文件执行发布）

"scripts": {
"deploy": "gh-pages -d dist"
}

执行 npm run deploy ，然后你的 dist 目录就会发到你们仓库的 gh-pages 分支了