美文网首页
Nuxt项目的创建和安装

Nuxt项目的创建和安装

作者: ROBIN2015 | 来源:发表于2017-06-16 11:02 被阅读353次

    新手模板

    为了便于大家快速使用,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/

    相关文章

      网友评论

          本文标题:Nuxt项目的创建和安装

          本文链接:https://www.haomeiwen.com/subject/alipqxtx.html