快速搭建一个nuxt.js项目

9 篇文章 1 订阅
2 篇文章 0 订阅

目录

1.初始化项目

安装

按照以下的步骤,根据你自己对项目的需要进行选择

启动

2.项目演示

3.项目文件结构

文件结构 

文件名

文件功能

4. 基本配置

4.1 修改/删除默认文件

4.2 创建页面目录

4.3 创建组件目录

5.修改配置

5.1 举例:页面过渡效果样式(可选)

5.2 修改nuxt.config.js 配置文件

5.3添加less


 

1.初始化项目

  • nuxtjs项目跟vue cli脚手架类似,封装的东西会更加多一些
  • Nuxt.js 预设了利用Vue.js 开发服务端渲染的应用所需要的各种配置

 

安装

  • 切换到存放项目的路径,
  • 打开cmd,
  • 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxt.js项目

npx create-nuxt-app 项目名

 注意:在NPM版本5.2.0默认安装了npx,在命令行窗口输入npm--version可查看当前版本号

 

按照以下的步骤,根据你自己对项目的需要进行选择

以下是我的最终选项,然后自动开始安装

需要等待安装依赖的下载,下载完成后可以看到下面的提示框,要求输入项目名称和其他一些问题

 

启动

当运行完时,项目将安装所有的依赖项,因此下一步是启动项目:

cd xianyun 

npm run dev

 

可自愿选择 Y/n

 

 

 

此时页面出现:

注意:此时项目可能会遇到以下错误提示: HTMLElement is not define nuxt.js,原因是在 Nuxt.js 的服务器环境加载 Element-ui 遇到兼容问题抛出的错误,(如不报错表示bug已修复,不用管这一步),解决办法如下:

下载指定版本的 element-ui

npm install --save element-ui@2.4.11

到这里项目的初始化就已经完成了

 

2.项目演示

数据服务运行步骤

  • 在服务器文件目录内运行

npm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/

  • 启动服务器

npm run start

  •  如果数据库运行失败

后台服务器已经将数据库内嵌,通常会自动安装,遇到过某些机器,会缺失数据库安装,有提示让你补上

出现上图的报错,可以运行

npm install sqlite3 --save --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/

 

3.项目文件结构

文件结构 

官网文档: https://zh.nuxtjs.org/guide/directory-structure

文件名

文件功能

xianyun项目根目录
assets组件目录
components组件目录
layouts布局组件目录
middleware中间件目录
pages页面目录
plugins插件目录
static静态文件目录
StoreVuex 状态树  文件
nuxt.config.jsNuxt.js应用的个性化配置
package.json依赖关系和对外暴露的脚本接口

别名说明

别名目录
~或@src目录
~~或@@跟目录

 

默认情况下,src目录和根目录相同

注意:在您的 vue 模板中,如果您需要引入 assets 或者 static 目录,使用 ~/assets/your_image.png 和 ~/static/your_image.png 方式

 

4. 基本配置

4.1 修改/删除默认文件

Nuxtjs初始化项目时给我们提供了两个演示文件,对我们接下来的项目开发没任何作用,分别是pages/index.vuecomponents/logo.vue

修改如下:

1.首先是pages/index.vue

<template>
    <div>
        首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 2.删除components/logo.vue文件

现在访问首页http://localhost:3000/,就只能看到首页两个字了。

 

4.2 创建页面目录

在nuxt框架当中,不需要配置路由,只要你在pages文件夹下创建文件夹或者文件就能够自动生成路由

接下来可以创建项目结构目录,方便以后的项目模块扩展

pages目录下新建文件夹,文件夹分别对应接下来要开发的业务模块

- ... // 其他文件

- pages
    - index.vue         // 已存在的首页文件
    - post                // 存放旅游攻略模块的文件夹
        - index.vue        // 旅游攻略模块首页文件
    - air                // 存放机票模块的文件夹
        - index.vue        // 机票模块首页文件
    - hotel                // 存放酒店模块的文件夹
        - index.vue        // 酒店模块首页文件
    - user                // 存放用户模块的文件夹
        - login.vue     // 用户登录注册页面
        
- ... // 其他文件

 接下来就可以直接通过路由访问pages下的页面,查看页面是否新增成功。

例如:http://localhost:3000/post/index.vue  ,便可看到旅游攻略模块首页

 

Nuxtjs的页面访问规则和浏览器的SPA机制不同,在Nuxtjs中不需要路由配置,pages下的页面可以直接通过路径访问,默认查找index.vue

 

4.3 创建组件目录

可以给未来的组件新建存放目录

在components 文件夹中新建文件夹:

- ...             // 其他文件

- components    // 存放公共组件的文件夹
    - post        // 存放旅游攻略模块组件的文件夹
    - air        // 存放机票模块组件的文件夹
    - hotel        // 存放酒店模块组件的文件夹
    - user        // 存放用户模块组件的文件夹
    
- ...             // 其他文件

 

5.修改配置

5.1 举例:页面过渡效果样式(可选)

目前还没涉及到页面的跳转,但不妨碍给项目配置预先做好铺垫,这份配置只是为了页面切换时优化用户体验设计的,并不是必须的。

在assets/目录下创建这个文件夹 assets/main.css,添加以下样式

/* 页面切换时候过渡样式 */
.page-enter-active, .page-leave-active {
    transition: opacity .5s;
}

/* 打开时候过渡样式 */
.page-enter, .page-leave-active {
    opacity: 0;
}

/* 页面顶部页面加载进度条 */
.nuxt-progress{
    background:#409eff;
    height: 1px;
}

只是新建了样式文件还不能产生效果,需要在nuxt.config.js 配置文件中加载该文件才能生效

 

5.2 修改nuxt.config.js 配置文件

  • webpack 配置都在 webpack.config.js 
  • vue-cli 配置在 vue.config.js
  • nuxt 的配置全部都在 nuxt.config.js

配置文件nuxt.config.js对项目进行了全局配置,对每个页面都生效。

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: "网页标题名", // 修改title
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: '//at.alicdn.com/t/font_1168872_ehvuah8v57g.css'} // 新增全局字体样式
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'assets/main.css' // 新增自定义的页面过渡样式(文件来自3.4.1)
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // https://axios.nuxtjs.org/setup
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    // baseURL: "http://157.122.54.189:9095" // 新增备用地址
    baseURL: "http://127.0.0.1:1337" // 新增axios默认请求路径 		  
  },

  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/],

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  },
}

注意:修改nuxt.config.js记得要重启项目(比较保险)

 

5.3添加less

预编译样式我们选择less,相关配置nuxtjs已经帮我们配置好了,不需要改动webpack的配置文件,只需要安装依赖包即可

npm install --save less less-loader

到这 一个nuxt.js已经搭建完毕,接下来就可以开始进行你的业务功能了。

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 要使用Nuxt.js搭建一个静态站点,可以按照以下步骤进行: 1. 创建一个新的Nuxt.js项目。可以使用npx create-nuxt-app命令来创建一个基本的Nuxt.js项目。 2. 在Nuxt.js项目创建页面。在pages目录下创建Vue.js文件,每个文件将对应站点中的一个页面。 3. 配置Nuxt.js生成静态站点。在nuxt.config.js文件中配置generate选项,指定需要生成的静态站点的路由和其他选项。 4. 运行npm run generate命令来生成静态站点。这将在dist目录下生成静态站点的文件。 5. 将生成的静态站点上传到Web服务器或静态站点托管服务中,即可将站点部署到互联网上。 以上是使用Nuxt.js搭建静态站点的基本步骤,可以根据需要进行更多的配置和定制。 ### 回答2: Nuxt.js一个基于Vue.js的开源框架,可以帮助我们快速搭建一个静态站点。 首先,我们需要安装Nuxt.js。可以通过npm工具在命令行中运行以下命令来进行安装: ``` npm install -g create-nuxt-app ``` 安装完成后,我们可以使用create-nuxt-app命令来创建一个新的Nuxt.js项目: ``` create-nuxt-app my-static-site ``` 运行上述命令后,系统会提示我们选择Nuxt.js的一些配置选项,例如应用名称、项目描述、UI框架等等。选择完毕后,系统会自动帮我们创建项目的文件结构。 接下来,我们需要在项目创建一些静态页面。在Nuxt.js中,我们可以在`pages/`目录下创建.vue文件,每个.vue文件对应一个我们想要生成的静态页面。 例如,我们在`pages/`目录下创建一个名为`index.vue`的文件,内容如下: ```vue <template> <div> <h1>Welcome to my static site</h1> <p>This is the homepage of my static site. Enjoy!</p> </div> </template> ``` 通过这样的方式,我们可以在`pages/`目录下创建多个.vue文件,并编写对应的HTML代码来构建我们所需的静态页面。 最后,我们需要通过命令行运行以下命令来生成静态站点: ``` npm run generate ``` 运行上述命令后,系统会根据我们在`pages/`目录下创建的.vue文件生成对应的HTML文件,并将这些HTML文件保存在项目的`dist/`目录下。 至此,我们就通过Nuxt.js成功搭建一个静态站点。我们可以将`dist/`目录下生成的HTML文件上传到服务器上,通过访问对应的URL来浏览我们搭建的静态站点。 ### 回答3: Nuxt.js一个基于 Vue.js 的通用应用框架,它可以帮助我们快速、高效地搭建静态站点。 首先,在电脑上安装好 Node.js 环境。然后,我们可以使用 npm 或者 yarn 安装 Nuxt.js,命令如下: ``` npm install -g create-nuxt-app # 或者 yarn global add create-nuxt-app ``` 安装完成后,我们可以使用 create-nuxt-app 命令创建一个新的 Nuxt.js 项目,命令如下: ``` create-nuxt-app my-static-site ``` 接下来,根据命令行的提示进行配置选择。一般来说,我们选择静态站点的模板和一些其他配置选项,然后等待创建完成。 创建完成后,进入到新创建项目目录,运行以下命令启动 Nuxt.js 服务器: ``` npm run dev # 或者 yarn dev ``` 此时,我们可以在浏览器中访问 http://localhost:3000 查看项目运行情况。同时,我们可以在项目目录中的 `pages` 文件夹下创建和编辑页面,Nuxt.js 会自动根据页面的目录结构生成路由和对应的静态页面。 接着,我们可以继续编辑页面,包括添加样式、处理数据请求等。同时,我们可以使用 Nuxt.js 提供的插件系统来增强项目的功能。 最后,当我们完成了所有的页面编写和功能开发后,可以使用以下命令生成静态站点的文件: ``` npm run generate # 或者 yarn generate ``` 生成的静态站点文件会存放在项目目录的 `dist` 文件夹中,我们可以将这些文件部署到任何支持静态文件访问的服务器上。 总之,Nuxt.js 提供了便捷的方式来搭建静态站点。我们只需要使用一些简单的命令和编辑页面代码,就能快速创建和部署一个功能完善的静态站点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值