9.2 安装
优质
小牛编辑
129浏览
2023-12-01
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应用的目录结构:目录结构。