基础入门nuxt.js

最新推荐文章于 2024-07-26 18:06:49 发布

lin神在线cute你哟

最新推荐文章于 2024-07-26 18:06:49 发布

阅读量390

点赞数

分类专栏： nuxt.js 文章标签： nuxt.js

本文链接：https://blog.csdn.net/weixin_44270980/article/details/90776041

版权

nuxt.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础入门nuxt.js

关于nuxt,js的一些优点

nuxt.js简单来说就是vue,js的通用框架，最常用的就是用来SSR（服务端渲染），再直白点，就是vue.js原来是用俩做spa（单页面应用），但是随着技术的普及，很多人想要用vue开发多页面应用，并在服务端完成渲染，这个时候就出现了nuxt.js这个框架，她简化了SSR的开发难度，通过命令用我们制作的vue项目生成html页面，可以提高seo优化。
关于如何搭建起一个nuxt.js框架
第一步：大部分的步骤同vue相同，但是先初始化一个nuxt项目时的命令为：vue init nuxt-community/starter-template testPro --testPro
第二步：进行安装一些包 npm install
第三步：安装好了包以后进行启动项目 npm run dev
关于nuxt.config.js的优点
nuxt采用后端渲染，这样生成前台页面内容可以被百度搜索引擎搜到，而vue是动态渲染，百度会出现抓不到网页数据的情况，所以类似新闻，博客，媒体之类的网站需要seo的网站比较适合，vue技术栈用nuxt，react技术栈用next。
关于配置IP和端口问题
端口被占用，需要在package.json里面的config,js进行配置config：
“config”:{
“nuxt”:{
“host”:“127.0.0.1”,
“port”:“1818”
}
}
关于配置全局的CSS问题
在开发多页项目时，都会定义个全局的css来初始化我们的页面渲染。比如把padding和margin设置成0，网上也有非常有名的开源css文件normailze.css，要定义这些配置，需要在nuxt.config.js里进行操作
比如现在我们要把页面字体设置为红色，就可以在assets/css/normailze.css文件，然后把字体设置为红色。

/assets/css/normailze.css

html{
color:red;
}
/nuxt.config.js

css:[‘~assets/css/normailze.css‘],
关于配置webpack的loader问题

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。
build: {
loaders:[
{
test:/.(png|jpe?g|gif|svg) $KaTeX parse error: Expected 'EOF', got '}' at position 111: \dotsxt]‘ } }̲ ], /* ** Ru\dots$ /,
loader: ‘eslint-loader‘,
exclude: /(node_modules)/
})
}
}
}
关于Nuxt目录结构
关于Nuxt路由跳转
在pages下面建文件夹，about和news，然后框架会自动帮你添加路由，你只需要处理业务逻辑和路由的跳转
- 现在我将nuxt-link将a标签进行替换
如果要进行参数的传递的话
如果你需要查看框架生成的路由的话，可以在nuxt中的router.js中进行查看