当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Nuxt项目搭建

Nuxt项目搭建

2019年07月30日  | 移动技术网IT编程  | 我要评论

一、项目目录结构：

方式1、直接利用官方提供好的脚手架工具进行搭建：npx create-nuxt-app <项目名>

目录会是这样(具体目录都放些什么，请看官方文档，详细)：

 

方式2、手工慢慢来，请看官方文档：https://zh.nuxtjs.org/guide/installation#%e4%bb%8e%e5%a4%b4%e5%bc%80%e5%a7%8b%e6%96%b0%e5%bb%ba%e9%a1%b9%e7%9b%ae

 

二、为项目添加sass样式表：

步骤1：命令：npm install --save-dev node-sass sass-loader

步骤2：在根目录的配置文件nuxt.config.js中进行引入你需要添加的全局样式表，如：

注：如果你需要在.vue文件内进行使用，需要在style标签中添加 lang="scss" 如：

 

三、发起请求时需要使用 axios，假如你没有安装过相关的依赖，那么：

方式1：命令：npm install --save-dev axios 

然后在哪个页面有需要时直接引用 import axios from 'axios'

方式2：命令：npm install --save-dev @nuxtjs/axios

（1）、进行全局配置，在nuxt.config.js中添加模块 '@nuxtjs/axios' 如：

（2）、简单使用如（具体可以参照站点：）：

注：假如你想需要在一个地方进行统一设置接口请求的api,需要通过注册拦截器和更改全局配置的话，你还可以这样：

1、你需要先在 plugins 目录下添加一个文件 axios.js，如：

2、引用使用，在nuxt.config.js中的plugins添加 '@/plugins/axios.js'，如：

3、想要生效看到效果是吧？请重新启动服务，命令：npm run dev

 

后续。。。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网