一、目录结构

Nuxt项目的基本目录：

其中：

□.nuxt：

在npm run dev启动项目的时候自动生成的临时文件类似于vue的dist
通常无需多关注

□assets：

静态资源目录
通常用于放置LESS SASS JavaScript文件

□components：

存放自己写的Vue的组件

□layouts：

存放布局文件

□middleware：

存放中间件

□node_modules：

存放npm install的安装的所有依赖包

□pages：

主目录用于存放页面
Nuxt框架会读取该目录下所有的.vue文件并自动生成对应的路由配置

□plugins：

存放JavaScript插件

□static：

存放资源文件例如图片和图标
在服务器启动时该目录下的文件会映射至应用的根路径 / 下
例如：/static/a.jpg会被映射至/a.jpg

□store：

存放Vuex的存储文件

△editorconfig.org：

编辑工具(例如VScode)的默认规则

△.eslintrc.js：

ESlint的配置规则文件

△.gitignore：

Git在提交时不上传到仓库的文件

△nuxt.config.js：

Nuxt的配置文件该文件将覆盖默认配置

该文件中的head对应配置的是HTML的<head>标签内的内容
Vue文件是没有<head>标签的只有<template>标签因此无法配置只能借助此文件进行配置

 head: {title: process.env.npm_package_name || '',meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]},

△package.json：

包管理的配置文件
描述项目及项目所依赖的模块信息

{"name": "nuxt-study","version": "1.0.0","description": "My prime Nuxt.js project","author": "Piconjo","private": true,"scripts": { // 脚本 用npm run启动"dev": "nuxt","build": "nuxt build", // 生成.nuxt目录"start": "nuxt start","generate": "nuxt generate", // 生成dist目录"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."},"dependencies": { // 生产环境下的包和版本"nuxt": "^2.0.0"},"devDependencies": { // 开发环境下的包和版本"@nuxtjs/eslint-config": "^2.0.0","@nuxtjs/eslint-module": "^1.0.0","babel-eslint": "^10.0.1","eslint": "^6.1.0","eslint-plugin-nuxt": ">=0.4.2"}
}

△package-lock.json：

描述node_modules文件中所有模块的版本模块来源及依赖的小版本信息
从npm5.x版本之后只要使用npm install命令下载包即自动生成package-lock.json文件

别名

~ 或 @ 相当于 src目录
~~ 或 @@ 相当于 root目录

例：要引入static目录下a.png文件
使用~/static/a.png或@/static/a.png

二、常用配置

配置主机地址和端口：

在package.json里配置

"config":{"nuxt":{"host":"127.0.0.1","port":"3000"}},

配置全局CSS

在多页应用中若一个初始CSS引用了多个CSS 或是有全局样式此时需要进行配置
在nuxt.config.js中进行配置
在css选项中配置css文件的路径：

css: ["~/assets/css/normalize.css"
],

配置loader

在Nuxt里没有webpack的配置文件而是集合到nuxt.config.js里了因此需在nuxt.config.js里进行配置
在build里配置loaders：

build: {/*** You can extend webpack config here*/loaders:[{test:/\.png|jpe?g|gif|svg$/,loader:"url-loader",query:{limit:10000,name:"img[name].[hash].[ext]"}}]}

Nuxt的目录结构和常用配置相关推荐

Nuxt之目录结构与常用配置
一. 目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LESS.SASS 或 JavaScript |-- ...
Linux目录结构和常用命令
Linux目录结构和常用命令一.Linux目录结构 Linux文件夹很多都是固定的,分门别类,要想快速弄清楚系统的架构,那么哪些目录里面装着哪些文件是干什么用的. 首先,回顾一下Linux系统下文件 ...
linux pki目录,Linux目录结构和常用命令
Linux目录结构和常用命令一.Linux目录结构 Linux文件夹很多都是固定的,分门别类,要想快速弄清楚系统的架构,那么哪些目录里面装着哪些文件是干什么用的. 首先,回顾一下Linux系统下文件 ...
Linux 目录结构及常用命令详细介绍
目录一.Linux 目录结构二.常用快捷键三.常用命令 1.软件管理 apt ( Advanced Packaging Tool ) 2.帮助命令 --help info man 3.显示或 ...
Maven-学习笔记03【基础-Maven标准目录结构和常用命令】
Java后端学习路线笔记汇总表[黑马程序员] 黑马程序员(腾讯微云)Maven基础讲义.pdf Maven-学习笔记01[基础-Maven基本概念] Maven-学习笔记02[基础-Maven的安 ...
(五)Maven目录结构及常用命令说明
前面提到的部分知识有涉及到Maven目录结构与Maven常用的一些命令,在这里专门给大家做个简单的介绍. 1.Maven目录结构说明 Maven总体目录结构如下图: bin目录:该目录包含了mvn运行 ...
Linux目录结构和常用命令大全（文件处理命令）
前言:Hello! 我是@每天都要敲代码!目前在和比特蛋哥重温一下Linux基础:毕竟每个大佬讲的课都有一些不同:虽然蛋哥的课程很少,但是干货也挺多的,等跟着蛋哥学习完这些课,就再更新一些我以前所学的 ...
linux目录结构及常用命令
linux目录结构 home, etc, usr/local, var是4个常用的目录常用命令 ~代表主目录假设你登陆的用户明为user ~ 就表示 /home/user
Linux目录结构和常用指令
文章目录一.Linux概述二.Linux下目录结构系统启动必须指令集合外部文件管理临时文件账户运行过程中要用扩展用的三.常用指令 clear清屏 ls 指令查看当前用户名普通用 ...

Nuxt的目录结构和常用配置