如何进行nuxt的开发

官网介绍说Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

前面已经介绍过了SPA和SSR的不同，这里就不过多赘述了，而今天的nuxt.js开发的页面就是SPA形式的，如掘金大大就是使用nuxt开发的

nuxt开发的优点

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES6/ES7 语法支持
• 打包和压缩 JS 和 CSS
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus等等

环境配置

首现要确保安装了node,并且版本一般是不能低于v12的，node安装后，就要安装vue-cli脚手架

npm install vue-cli -g

当然安装的速度取决于你的镜像，npm是从国外网站下载依赖包，网络不好的话会很慢，这时你可以使用淘宝的镜像cnpm和yarn进行安装都是可以的

安装nuxt

可以自定义安装nuxt,自定义构建模板文件

yarn add nuxt 

安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。

3.使用npm install安装依赖包

npm install

这个过程是要等一会的，如果你这个过程安装失败，也不要慌张，你可以直接诶删除项目中的node_modules文件夹后，重新npm install进行安装。

4.使用npm run dev 启动服务

npm run dev

5.在浏览器输入 localhost:3000,可以看到结果。

Hello World

也可使用create-nuxt-app创建项目

$ yarn create nuxt-app <项目名>

它会让你进行一些选择:

1.在集成的服务器端框架之间进行选择:

• None (Nuxt 默认服务器)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Fastify
• Adonis (WIP)

2.选择您喜欢的 UI 框架:

• None (无)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy
• iView
• Tachyons

3.选择您喜欢的测试框架:

• None (随意添加一个)
• Jest
• AVA

4.选择你想要的 Nuxt 模式 (Universal or SPA)

5.添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。

6.添加 EsLint 以在保存时代码规范和错误检查您的代码。

7添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

$ cd <project-name>
$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序

如何显示Devtools

我必须将以下内容添加到nuxt.config.js：

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}

如何更改启动端口

在package.json里面增加

"config":{
    "nuxt":{
  "host":"127.0.0.1",
        "port":"9900"
   }
}

加载css文件

在nuxt.config.js文件里面的css里面如下设置

css: ["element-ui/lib/theme-chalk/index.css", "~assets/css/normal.css"],