基础入门nuxt.js

关于nuxt,js的一些优点

• nuxt.js简单来说就是vue,js的通用框架，最常用的就是用来SSR（服务端渲染），再直白点，就是vue.js原来是用俩做spa（单页面应用），但是随着技术的普及，很多人想要用vue开发多页面应用，并在服务端完成渲染，这个时候就出现了nuxt.js这个框架，她简化了SSR的开发难度，通过命令用我们制作的vue项目生成html页面，可以提高seo优化。

  关于如何搭建起一个nuxt.js框架

• 第一步：大部分的步骤同vue相同，但是先初始化一个nuxt项目时的命令为：vue init nuxt-community/starter-template testPro --testPro
• 第二步：进行安装一些包 npm install

• 第三步：安装好了包以后进行启动项目 npm run dev

  关于nuxt.config.js的优点

• nuxt采用后端渲染，这样生成前台页面内容可以被百度搜索引擎搜到，而vue是动态渲染，百度会出现抓不到网页数据的情况，所以类似新闻，博客，媒体之类的网站需要seo的网站比较适合，vue技术栈用nuxt，react技术栈用next。

  关于配置IP和端口问题

• 端口被占用，需要在package.json里面的config,js进行配置config：

  “config”:{

  “nuxt”:{

  “host”:“127.0.0.1”,

  “port”:“1818”

  }

  }

  关于配置全局的CSS问题

• 在开发多页项目时，都会定义个全局的css来初始化我们的页面渲染。比如把padding和margin设置成0，网上也有非常有名的开源css文件normailze.css，要定义这些配置，需要在nuxt.config.js里进行操作
• 比如现在我们要把页面字体设置为红色，就可以在assets/css/normailze.css文件，然后把字体设置为红色。

/assets/css/normailze.css

html{

color:red;

}

/nuxt.config.js

css:[‘~assets/css/normailze.css‘],

关于配置webpack的loader问题

• 在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

• build: {

  loaders:[

  {

  test:/.(png|jpe?g|gif|svg)KaTeX parse error: Expected 'EOF', got '}' at position 111: …xt]‘ } }̲ ], /* ** Ru…/,

  loader: ‘eslint-loader‘,

  exclude: /(node_modules)/

  })

  }

  }

  }

  关于Nuxt目录结构

• 

  关于Nuxt路由跳转
• 在pages下面建文件夹，about和news，然后框架会自动帮你添加路由，你只需要处理业务逻辑和路由的跳转

• 

  - 现在我将nuxt-link将a标签进行替换

  

• 如果要进行参数的传递的话

• 

  如果你需要查看框架生成的路由的话，可以在nuxt中的router.js中进行查看