• 二、Nuxt初始化项目


    一、快速生成新项目

      为了方便大家快速使用,Nuxt提供了一个starter模板,可以直接下载模板的压缩包,或者利用vue-cli来安装

      1、压缩包链接: https://github.com/nuxt-community/starter-template/archive/master.zip

      2、利用vue-cli来安装的话

        (1)需要先使用 npm install -g vue-cli 安装vue-cli

        (2)然后使用 vue init nuxt-community/starter-template <project-name> 来初始化一个新项目

      以上两种方式都可以,初始化新项目以后,安装依赖包,通过 cd <project-name> 进入项目根目录,然后通过 npm install 来安装依赖包,安装完以后,通过 npm run dev 命令来启动项目

      启动以后,项目默认运行在http://localhost:3000,可以直接通过这个地址访问

    二、从头开始新建项目

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

      1、在需要新建项目的文件中,通过 mkdir <项目名> 来新建一个项目的文件夹,然后 通过cd <项目名> 进入项目中,

      2、新建package.json文件

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

    package.json文件

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

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

      3、安装nuxt

        一旦package.json文件创建好,可以通过 npm install --save nuxt 命令将nuxt安装至项目中

      4、pages目录

        通过 mkdir pages 来创建pages文件夹,然后进入文件夹中,在里面创建第一个页面pages/index.vue

    index.vue

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

    注:nuxt.js会根据pages目录中的所有 *.vue 文件生成应用的路由配置

      5、通过 npm run dev 启动项目,启动成功后还是通过http://localhost:3000来访问

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

    参考:nuxt官网文档  https://zh.nuxtjs.org/

  • 相关阅读:
    练习二十七:递归函数应用
    mysql8.0数据库忘记密码时进行修改方法
    格式化字符串两种方式
    练习二十六:阶乘计算(递归)
    练习二十五:阶乘之和计算
    Dapper批量添加
    c# FTP操作类(转)
    c# 依赖注入之---反射(转)
    c# 依赖注入之---setterInjection(转)
    php遍历数组赋值
  • 原文地址:https://www.cnblogs.com/jin-zhe/p/9656102.html
Copyright © 2020-2023  润新知