一、目录结构
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]"}}
]
}
