Nuxt项目的创建和安装

2017-06-16  本文已影响353人  ROBIN2015

新手模板

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

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

$ vue init nuxt/starter

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

然后安装依赖包:

$cd$ npm install

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

$ npm run dev

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

从头开始新建项目

如果不使用 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:

Hello world!

然后启动项目:

$ npm run dev

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

参见: https://zh.nuxtjs.org/guide/installation/

上一篇下一篇

猜你喜欢

热点阅读