基于Vue的通用框架Nuxt.js

问题：最近有些朋友问我写官网，用Vue框架实现好很差？

相信不少使用Vue的小伙伴们同样疑惑这个问题，其实从这个问题就能够知道你对Vue这个框架是否真的熟悉了。其实单单使用Vue这个框架来作官网的，实际上是不友好的，很是不利于SEO，抓取。由于Vue是经过把你的代码编译的，生成是SPA，里面的html实际上是空的，Nuxt.js属于SSR,也就是服务器渲染。Nuxt.js打包生成的每一个路由都会对应相对的html文件。有利于网站抓取，SEO。

Vue适合作对seo可有可无的项目，别的项目不适合，可是Nuxt.js 正好就修补了Vue的这个缺陷。

---

官方解析：

---

 

Nuxt.js环境搭建和建立启动项目

作vue的小伙伴都知道vue-cli脚手架，其实vue-cli已经集成了nuxt.js，因此直接使用vue-cli就能够直接构建Nuxt.js项目了。直接在须要建立项目的路径新建文件夹，文件夹名为项目名称，其实就是和建立vue项目同样。而后在该文件下打开cmd，而后运行下面cmd命令

vue init nuxt/starter

成功建立以下图所示：

而后使用

npm install

下载依赖项，运行项目

npm run dev

此时项目已经运行成功，而且默认在3000端口打开。

浏览器预览：

很高兴告诉你，此时Nuxt.js项目已经建立而且启动成功。

---

 

Nuxt.js目录结构

assets // 资源目录 components // 组件目录 layouts // 布局目录 middleware // 中间件目录 pages // 页面目录 plugins // 插件目录 static // 静态文件目录 store // 状态管理器目录 nuxt.config.json // 个性化设置目录 package.json // npm包管理配置目录

 Nuxt.js经常使用配置

1.配置主机和端口号

在nuxt.config.js里面追加下面内容

export default { server: { port: 8000, // default: 3000
    host: '217.0.0.1', // default: localhost
 }, }

 

而后npm run dev，这时候就能够在127.0.0.1:8000端口访问了。

2.配置全局样式

在nuxt.config.js里面追加下面内容

这里声明一下：“~”是Nuxt.js表明根目录的标识

export default { css: ['~asstes/style.css'], }

在assets文件夹里面建立style.css，添加内容以下：

html{ background-color: red; }

而后npm run dev，此时你能够看到页面所有的页面的背景都已经变成红色。

 Nuxt.js路由配置和传参

在pages里面建立news文件夹，而后在news文件夹下建立index.vue。

/pages/index.vue

<template>
  <section class="container">
    <div>
      <div>首页</div>
      <nuxt-link :to="{name: 'news'},params:{newsId: 1}">新闻</nuxt-link>
    </div>
  </section>
</template>

<script> export default { } </script>

<style>
</style>

 /pages/news/index.vue

<template>
  <section class="container">
    <div>
        <div>新闻页面</div>
      <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
　　　<div>新闻id:{{ $route.params.newsId}}</div> 
</div> 

</section> 
</template> 

<script> export default { } </script> 

<style> </style>

 此时即刻完成首页和新闻业跳转，http://localhost:3000/、http://localhost:3000/news,而且传参。

原文出处：https://www.cnblogs.com/it-xiong/p/11208287.html