官网文档地址:
https://www.nuxtjs.cn/guide
Nuxt.js常见问题和优化:
https://blog.csdn.net/qq_36228377/article/details/123642604
npx create-nuxt-app xxx
yarn create nuxt-app <项目名>
Project name // 项目名称
Project description // 项目描述
Use a custom server framework // 选择服务器框架
Choose features to install // 选择安装的特性
Use a custom UI framework // 选择UI框架
Use a custom test framework // 测试框架
Choose rendering mode // 渲染模式
Universal // 渲染所有连接页面
Single Page App // 只渲染当前页面
启动开发模式
npm run dev
打包
npm run build
npm run start
生成静态项目
npm run generate
文件目录
├── node_modules 依赖包
├── assets 资源文件
├── components 复用组件目录
├── layouts 布局目录
├── middleware 中间件目录(每个页面加载前使用)
│── nuxt.config.js 个性化配置文件
├── package.json: 应用包配置文件
├── pages 页面
│ └── index.vue: 主页面
├── plugins 插件
├── static 静态文件目录
│ └── favicon.ico: 页签图标
├── store 状态管理
├── .gitignore: git版本管制忽略的配置
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件
需要注意的是,在任何 Vue 组件的生命周期内, 只有
beforeCreate
和created
这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。
通过上面的流程图可以看出,当一个客户端请求进入的时候,处理流程为:
nuxtServerInit
这个命令执行(在Store
的action
中),在这里接收到客户端请求的时候,可以将一些客户端信息(登录信息)存储到Store
中。middleware
中间件机制,中间件其实就是一个函数,会在每个路由执行之前去执行,在这里可以做很多事情,或者说可以理解为是路由器的拦截器的作用。validate
执行的时候对客户端携带的参数进行校验asyncData
与fetch
进入正式的渲染周期,asyncData
向服务端获取数据,把请求到的数据合并到Vue中的data
中,适用于对store的操作
store/index.js
// 主模块
//state
export const state = () => ({
bNav: false,
bLoading: false
})
//mutations
export const mutations = {
M_UPDATE_NAV(state, payload) {
state.bNav = payload
},
M_UPDATE_LOADING(state, payload) {
state.bLoading = payload
}
}
// actions
export const actions = {
nuxtServerInit(store, { app: { $cookies } }) {
// 初始化东西到store里 token信息
// console.log('nuxtServerInit', store, context)
console.log('nuxtServerInit')
let user = $cookies.get('user') ? $cookies.get('user') : {err:2, msg: '未登录', token: ''}
store.commit('users/M_UPDATE_USER', user)
}
}
// getters
export const getters = {
getNav(state) {
return state.bNav ? '显示' : '隐藏'
}
}
定义中间件:
middleware/auth.js
export default ({ store, route, redirect, params, query, req, res }) => {
// context 服务端上下文
// 全局守卫业务
console.log('middleware nuxt.config.js outside')
// store状态树信息
// route 一条目标路由信息
//redirect 路由的强制跳转
// params query 校验参数的合理性
// console.log('全局守卫前置守卫')
// redirect('/login')
}
使用:
nuxt.config.js
在这里使用相当于全局的路由守卫
// middleware
router: {
middleware: 'auth',
},
页面层级的中间件使用/定义
layouts/default.vue
或者
pages/index.vue
export default {
// middleware: 'auth', // 页面层级的中间件定义
middleware({ store, route, redirect, params, query }) {
console.log('middleware layouts inside')
// store状态树信息
// route 一条目标路由信息
//redirect 路由的强制跳转
// params query 校验参数的合理性
// console.log('layouts守卫前置守卫')
// redirect('/reg')
},
}
</script>
中间件执行顺序:
nuxt.config.js(配置文件级别) > layouts(布局文件级别) > pages(页面级别)
在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。
pages/index.vue
同步模式:
validate({ params, query }) {
return true // 如果参数有效
return false // 参数无效,Nuxt.js 停止渲染当前页面并显示错误页面
}
异步模式:
async validate({ params, query, store }) {
// await operations
return true // 如果参数有效
return false // 将停止Nuxt.js呈现页面并显示错误页面
}
asyncData:
在服务器端获取并渲染数据。可以在渲染组件之前异步获取数据。
fetch:
用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
pages/index.vue
// 读取数据 返回给组件
asyncData(context) {
// 异步业务逻辑 读取服务端的数据
console.log('asyncData');
return {
b: 2
};
},
// 读数据 返回vuex
fetch({ store }) {
// 异步业务逻辑 读取服务端的数据提交给vuex
console.log('fetch');
},
我们在pages下面新建一个文件,叫做ansyData.vue。然后写入下面的代码:
<script>
import axios from 'axios'
export default {
data(){
return {
name:'hello World',
}
},
asyncData(){
return axios.get('https://api.myjson.com/bins/1ctwlm')
.then((res)=>{
console.log(res)
return {info:res.data}
})
}
}
</script>
这时候我们可以看到,浏览器中已经能输出结果了。asyncData的方法会把值返回到data中。是组件创建(页面渲染)之前的动作,所以不能使用this.info,
一定要return出去获取到的对象,这样就可以在组件中使用,这里返回的数据会和组件中的data合并。这个函数不光在服务端会执行,在客户端同样也会执行。
async asyncData(context) {
let [newDetailRes, hotInformationRes, correlationRes] = await Promise.all([
axios.post('http://www.huanjingwuyou.com/eia/news/detail', {
newsCode: newsCode
}),
axios.post('http://www.huanjingwuyou.com/eia/news/select', {
newsType: newsType, // 资讯类型: 3环评资讯 4环评知识
start: 0, // 从第0条开始
pageSize: 10,
newsRecommend: true
}),
axios.post('http://www.huanjingwuyou.com/eia/news/select', {
newsType: newsType, // 资讯类型: 3环评资讯 4环评知识
start: 0, // 从第0条开始
pageSize: 3,
newsRecommend: false
})
])
return {
newDetailList: newDetailRes.data.result,
hotNewList: hotInformationRes.data.result.data,
newsList: correlationRes.data.result.data,
newsCode: newsCode,
newsType: newsType
}
},
当然上面的方法稍显过时,现在都在用ansyc…await来解决异步,改写上面的代码。
<script>
import axios from 'axios'
export default {
data(){
return {
name:'hello World',
}
},
async asyncData(){
let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
return {info: data}
}
}
</script>
nuxt.config.js文件介绍:
const pkg = require('./package')
module.exports = {
mode: 'universal', // 当前渲染使用模式
head: { // 页面head配置信息
title: pkg.name, // title
meta: [ // meat
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [ // favicon,若引用css不会进行打包处理
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#fff' }, // 页面进度条
css: [ // 全局css(会进行webpack打包处理)
'element-ui/lib/theme-chalk/index.css'
],
plugins: [ // 插件
'@/plugins/element-ui'
],
modules: [ // 模块
'@nuxtjs/axios',
],
axios: {},
build: { // 打包
transpile: [/^element-ui/],
extend(config, ctx) { // webpack自定义配置
}
}
}
开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的nuxt.config.js里对server项进行配置。比如现在我们想把IP配置成0.0.0.0,端口设置3001。
/nuxt.config.js
server: {
port : 3001,
host: '0.0.0.0'
},
配置好后,我们在终端中输入npm run dev,然后你会看到服务地址改为了127.0.0.1:1000.
在开发多页项目时,都会定义一个全局的CSS来初始化我们的页面渲染,比如把padding和margin设置成0,网上也有非常出名的开源css文件normailze.css。要定义这些配置,需要在nuxt.config.js里进行操作。
比如现在我们要把页面字体设置为红色,就可以在assets/css/common.css文件,然后把字体设置为红色。
/assets/css/common.css
html{
color:red;
}
/nuxt.config.js
css:['~assets/css/normailze.css'],
设置好后,在终端输入npm run dev 。然后你会发现字体已经变成了红色。
在nuxt.config.js里是可以对webpack的基本配置进行覆盖的,比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置
nuxt.config.js
build: {
loaders:[
{
test:/\.(png|jpe?g|gif|svg)$/,
loader:"url-loader",
query:{
limit:10000,
name:'img/[name].[hash].[ext]'
}
}
],
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
nuxt.config.js文件中,修改title为HelloWorld:
head: {
title: 'HelloWorld',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
修改后需要重启服务才可生效
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
假设 pages 的目录结构如下
└─pages
├─index.vue
└─user
├─index.vue
├─one.vue
那么,Nuxt.js 自动生成的路由配置如下:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
this.$router.push('/users')
路由经常需要传递参数,我们可以简单的使用params来进行传递参数,我们现在向新闻页面(news)传递个参数,然后在新闻页面进行简单的接收。
(1)使用nuxt传递参数
<template>
<div>
<ul>
<li><nuxt-link :to="`informa/${item.newsCode}-${item.newsType}`">li>
ul>
div>
template>
注意:name其实指向的是路由(文件夹或文件名),而路由死活区分大小写的 , 所以to后面区分大小写!!!建议文件夹都写成小写的。
(2)使用nuxt接收参数
async asyncData(context) {
let newsCode = context.route.params.code.split('-')[0]
let newsType = context.route.params.code.split('-')[1]
},
(3)使用this.$router.push的params传递参数
传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}})
参数取值 -- this.$route.query.key
注: 使用这种方式,传递参数会拼接在路由后面,出现在地址栏
(4)使用this.$router.push的params传递参数
传递参数 -- this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值 -- this.$route.params.key
注: 使用这种方式,参数不会拼接在路由后面,地址栏上看不到参数
注意: 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。
Nuxt.js可以让你在动态路由对应的页面组件中配置一个
validate
方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值,如果返回true则表示校验通过,如果返回false则表示校验未通过。
export default {
// nuxt中使用validate方法进行路由参数校验,这个方法必须返回一个布尔值,为true表示校验通过,为false表示校验失败。注意validate不能写到methods属性中。
validate(obj) {
// console.log(obj);
// return true
return /^\d+$/.test(obj.params.id)
}
}
给不存在的路由定义一些访问的页面或组件
router: {
// 扩展路由
extendRoutes (routes, resolve) {
console.log(routes)
routes.push({
name: 'root',
path: '/index',
component: resolve(__dirname, 'pages/index.vue')
})
}
},
通过编辑 layouts/error.vue 文件来定制化错误页面.
依赖中间件middleware或者plugin插件
使用vue的 beforeRouteleave钩子
plugins/router.js
/* 插件全局守卫 */
export default ({ app, redirect, params, query, store }) => {
console.log('插件')
// app == vue实例
// redirect 跳转函数
app.router.beforeEach((to, from, next) => {
// 全局前置守卫 -- 插件
// next(true)/false next('/login')是错误的 和vue不一样
// console.log('插件配置,', to)
// if (to.name === 'login' || to.name === 'reg') {
// next()
// } else {
// redirect({ name: 'login' })
// }
next()
})
// app.router.afterEach((to, from) => {
// console.log('插件全局后置守卫')
// })
}
nuxt.config.js
plugins: [
'~/plugins/router',
],
路由的动画效果,也叫作页面的更换效果。Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面制作。
全局动画默认使用page来进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个normailze.css文件。
(1)添加样式文件
/assets/css/normailze.css(没有请自行建立)
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
(2)文件配置
然后在nuxt.config.js里加入一个全局的css文件就可以了。
css:['assets/css/main.css'],
这时候在页面切换的时候就会有2秒钟的动画切换效果了,但是你会发现一些页面是没有效果的,这是因为你没有是组件来制作跳转链接。你需要进行更改。
比如我们上节课作的动态路由新闻页,你就需要改成下面的链接。
<li><nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link></li>
改过之后你就会看到动画效果了。
想给一个页面单独设置特殊的效果时,我们只要在css里改变默认的page,然后在页面组件的配置中加入transition字段即可。例如,我们想给about页面加入一个字体放大然后缩小的效果,其他页面没有这个效果。
(1)在全局样式assets/main.css 中添加以下内容
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;
}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
(2)然后在about/index.vue组件中设置
export default {
transition:'test'
}
这时候就有了页面的切换独特动效了。
总结:在需要使用的页面导入即可。
在开发应用时,经常会用到一些公用的元素,比如网页的标题是一样的,每个页面都是一模一样的标题。这时候我们有两种方法,第一种方法是作一个公用的组件出来,第二种方法是修改默认模版。这两种方法各有利弊,比如公用组件更加灵活,但是每次都需要自己手动引入;模版比较方便,但是只能每个页面都引入。
Nuxt为我们提供了超简单的默认模版订制方法,只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入“ 学习nuxt.js” 这几个字,我们就可以使用默认模版来完成。
app.html中:
<!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
<p>学习nuxt.js</p>
{{ APP }}
</body>
</html>
这里的{{ HEAD }}读取的是nuxt.config.js里的信息,{{APP}} 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写,如果小写会报错的。
注意:如果你建立了默认模板后,记得要重启服务器,否则显示不会成功;但是默认布局是不用重启服务器的。
默认模板类似的功能还有默认布局,但是从名字上你就可以看出来,默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息,只是关于标签下的内容统一订制。
需求:我们在每个页面的最顶部放入“学习nuxt.js” 这几个字,看一下在默认布局里的实现。
<template>
<div>
<p>学习nuxt.js</p>
<nuxt/>
</div>
</template>
这里的就相当于我们每个页面的内容,你也可以把一些通用样式放入这个默认布局里,但会增加页面的复杂程度。
总结:要区分默认模版和默认布局的区别,模版可以订制很多头部信息,包括IE版本的判断;模版只能定制里的内容,跟布局有关系。在工作中修改时要看情况来编写代码。
<button @click="$nuxt.setLayout('h5')">
layout(context) {
console.log(context)
if(....){
return 'pc';
}else{
return 'h5';
}
},
nuxt.config.js
// 跨域
axios: {
proxy: true, // 开启跨域行为
// prefix: '/api', //baseUrl
},
proxy: { // 代理
'/api/': {
target: 'http://localhost:3001', //代理转发地址
changeOrigin: true,
pathRewrite: {
// '^/api': ''
}
}
},
//为防止重复打包
module.exports = {
build: {
vendor: ['axios']
}
}
pages/index.vue
async fetch({ $axios, store, error }) {
let res = await $axios({
url: 'xxx',
params: {
_limit: 1
}
})
res.data && store.commit('home/M_UPDATE_HOME',{
err: 0,
data: res.data
})
}
在运行 Vue.js 应用程序之前执行 js 插件。这在您需要使用自己的库或第三方模块时特别有用。
注册一个全局的axios请求和返回拦截器插件
plugins/axios.js
// 拦截器
export default ({ $axios, redirect, route, store }) => {
// 基本配置
$axios.defaults.timeout = 10000;
//请求时拦截
$axios.onRequest(config => {
console.log('发送请求时的拦截')
// config.header.token = '加token'
config.headers.token = store.state.user.token
return config
})
//响应拦截
$axios.onResponse(res => {
console.log('响应时的拦截')
// if (res.data.err === 2 && route.fullPath !== '/login') {
// redirect('/login?path=' + route.fullPath)
// }
return res
})
//错误处理
$axios.onError(error => {
const code = parseInt(error.response && error.response.status)
if (code === 400) {
redirect('/400')
}
})
}
nuxt.config.js
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{
src: '~/plugins/axios',
ssr: true // 开启服务端渲染
},
],
数据和方法的定义:
store/index.js
// 主模块
//state
export const state = () => ({
bNav: false,
bLoading: false
})
//mutations
export const mutations = {
M_UPDATE_NAV(state, payload) {
state.bNav = payload
},
M_UPDATE_LOADING(state, payload) {
state.bLoading = payload
}
}
// actions
export const actions = {
nuxtServerInit(store, { app: { $cookies } }) {
// 初始化东西到store里 token信息
// console.log('nuxtServerInit', store, context)
console.log('nuxtServerInit')
let user = $cookies.get('user') ? $cookies.get('user') : {err:2, msg: '未登录', token: ''}
store.commit('users/M_UPDATE_USER', user)
}
}
// getters
export const getters = {
getNav(state) {
return state.bNav ? '显示' : '隐藏'
}
}
store/home.js
export const state = () => ({
err: 1,
data: {}
})
export const mutations = {
M_UPDATE_HOME(state, payload) {
state.err = payload.err
state.data = payload.data
}
}
export const actions = {
A_UPDATE_HOME({ commit, state }, payload) {
// 异步处理
commit('M_UPDATE_HOME', { err: 0, data: {title: 'home模块 actions所传递的数据'} })
}
}
store/users.js
export const state = () => ({
err: 1,
msg: '未登录',
token: '',
data: {}
})
export const mutations = {
M_UPDATE_USER(user, payload) {
state.err = payload.err
state.msg = payload.msg
state.data = payload.data
state.token = payload.token
}
}
export const actions = {
A_UPDATE_USER({commit, user}, payload) {
// 异步业务
commit('M_UPDATE_USER', payload)
}
}
数据和方法使用:
pages/index.vue
<script>
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex';
export default {
methods: {
getStore() {
// this.$store.dispatch('users/A_UPDATE_USER', {
// err:0,
// msg: '登录成功',
// token: '假token',
// data: {
// title: 'user模块的actions提交出来的数据'
// }
// })
// this.$store.commit('users/M_UPDATE_USER', {
// err: 0,
// msg: '登录成功',
// token: '假token',
// data: {
// title: 'user模块的mutations提交出来的数据'
// }
// });
// this.A_UPDATE_USER({
// err: 0,
// msg: '登录成功',
// token: '假token',
// data: {
// title: 'user模块的actions提交出来的数据'
// }
// }
// )
this.M_UPDATE_USER({
err: 0,
msg: '登录成功',
token: '假token',
data: {
title: 'user模块的mutations提交出来的数据'
}
}
)
},
...mapActions('users', ['A_UPDATE_USER']),
...mapMutations('users', ['M_UPDATE_USER'])
},
computed: {
...mapGetters(['getNav']),
...mapState(['bNav']),
...mapState('users', ['data'])
// ...mapState({
// home: state => state.home.data // 直接使用home即可
// })
},
async fetch({ $axios, store, error }) {
let res = await $axios({
url: 'xxx',
params: {
_limit: 1
}
})
res.data && store.commit('home/M_UPDATE_HOME',{
err: 0,
data: res.data
})
}
};
</script>
插件中引入:
plugins/element-ui.js
import Vue from 'vue'
/整体引入
import ElementuI from 'element-ui'
vue.use(ElementUI)
//按需引入全局使用
import {Button} from 'element-ui'
vue.use(Button)
配置文件
nuxt.config.js
css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins: [
{
src: "~/plugins/element-ui",
ssr:true,//不支持ssr的插件只会在客户端运行不要给true
//mode: 'server'//client// v2.44
}
],
build:{
transpile:[ /^element-ui/]
}
这时就可以在pages中写页面进行element-ui的测试了
nuxt.config.js
plugins:[ //配置插件
'~/plugins/mixins'
]
plugins/mixins.js
import Vue from 'vue'
let show = ()=>console.log('全局方法')
Vue.propotype.$show = show //服务端钩子内部不可以使用,this不会执行vue实例
// 全局锅过滤器
import * as filters from '../assets/js/filter.js'
Object.keys(filters).forEach(key=>Vue.filter(key, filters[key]))
assets/js/filter.js
export function filerzero(n) {
return n < 10 ? '0'+n : ''+n
}
export const date = time => {
let d = new Date()
d.setTime(time)
let year = d.getFullYear()
let month = d.getMonth()+1
let date = d.getDate()
let hour = d.getHours()
let min = d.getMinutes()
let sec = d.getSeconds()
return `${year}年${filerzero(month)}月${filerzero(date)}日 ${filerzero(hour)}:${min}:${sec}`
}
组件中使用:
pages/login.vue
mouted(){
this.$show() //打印全局方法
}
当用户输入路由错误的时候,我们需要给他一个明确的指引,所以说在应用程序开发中404页面是必不可少的。Nuxt.js支持直接在默认布局文件夹里建立错误页面。
在根目录下的layouts文件夹下建立一个error.vue文件,它相当于一个显示应用错误的组件。
<template>
<div>
<h2 v-if="error.statusCode==404">404页面不存在</h2>
<h2 v-else>500服务器错误</h2>
<ul>
<li><nuxt-link to="/">HOME</nuxt-link></li>
</ul>
</div>
</template>
<script>
export default {
props:['error'],
}
</script>
代码用v-if进行判断错误类型,需要注意的是这个错误是你需要在里进行声明的,如果不声明程序是找不到
error.statusCode
的。
这里我也用了一个
的简单写法直接跟上路径就可以了。
页面的Meta对于SEO的设置非常重要,比如你现在要作个新闻页面,那为了搜索引擎对新闻的收录,需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。
/pages/news/index.vue
<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'nuxt.com'}}">News-1</nuxt-link></li>
<template>
<div>
<h2>News-Content [{{$route.params.id}}]</h2>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
<script>
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
},
data(){
return{
title:this.$route.params.title,
}
},
//独立设置head信息
head(){
return{
title:this.title,
meta:[
{hid:'description',name:'news',content:'This is news page'}
]
}
}
}
</script>
注意:为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。
(1)直接引入图片
在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用
<div><img src="~static/logo.png" /></div>
“~”就相当于定位到了项目根目录,这时候图片路径就不会出现错误,就算打包也是正常的。
(2)CSS引入图片
如果在CSS中引入图片,方法和html中直接引入是一样的,也是用“~”符号引入。
这时候在npm run dev 下是完全正常的。
用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,进行运行。
在终端中输入:
npm run generate
然后在dist文件夹下输入live-server就可以了。
总结:Nuxt.js框架非常简单,因为大部分的事情他都为我们做好了,我们只要安装它的规则来编写代码。