Vue.js教程
9.2 安装
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

Vue.js 服务端渲染 Nuxt.js

Nuxt.js简介

Nuxt.js安装

Nuxt.js 十分简单易用。一个简单的项目只需将nuxt添加为依赖组件即可。

新手模板

为了便于大家快速使用,Nuxt.js提供了一个starter 模板

下载模板的压缩包或利用vue-cli安装使用:

$ vue init nuxt-community/starter-template <project-name>

如果vue-cli没有安装, 需先通过npm install -g vue-cli来安装。

然后安装依赖包:

$ cd <project-name>
$ npm install

接着通过以下命令启动项目:

$ npm run dev

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

注意:Nuxt.js 会监听pages目录中的文件变更并自动重启, 当添加新页面时没有必要手工重启应用。

了解模板项目的目录结构:目录结构

从头开始新建项目

如果不使用 Nuxt.js 提供的 starter 模板,我们也可以从头开始新建一个 Nuxt.js 应用项目,过程非常简单,只需要1个文件和1个目录。如下所示:

$ mkdir <项目名>
$ cd <项目名>

提示: 将 项目名 替换成为你想创建的实际项目名

新建 package.json 文件

package.json文件用来设定如何运行nuxt

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上面的配置使得我们可以通过运行npm run dev来运行nuxt

安装nuxt

一旦package.json创建好, 可以通过以下npm命令将nuxt安装至项目中:

npm install --save nuxt

pages 目录

Nuxt.js 会依据pages目录中的所有*.vue文件生成应用的路由配置。

创建pages目录:

$ mkdir pages

创建我们的第一个页面pages/index.vue

<template>
  <h1>Hello world!</h1>
</template>

然后启动项目:

$ npm run dev

Bingo!现在我们的应用运行在http://localhost:3000

注意:Nuxt.js 会监听pages目录中的文件变更并自动重启, 当添加新页面时没有必要手工重启应用。

了解更多关于Nuxt.js应用的目录结构:目录结构

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验