如何进行nuxt的开发 | 8月更文挑战(已经更文8天)

·  阅读 285

这是我参与8月更文挑战的第9天,活动详情查看:8月更文挑战 (已经更文9天)

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

前面已经介绍过了SPASSR的不同,这里就不过多赘述了,而今天的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是从国外网站下载依赖包,网络不好的话会很慢,这时你可以使用淘宝的镜像cnpmyarn进行安装都是可以的

安装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. 在集成的服务器端框架之间进行选择:
  1. 选择您喜欢的 UI 框架:
  1. 选择您喜欢的测试框架:
  • None (随意添加一个)
  • Jest
  • AVA
  1. 选择你想要的 Nuxt 模式 (Universal or SPA)
  2. 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
  3. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
  4. 添加 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"],
复制代码
分类:
前端
标签: