nuxt学习日记（个人快速入门）

为什么会写这个博客呢？看视频下评论

 mmp，进入陌生领域了。

环境安装

安装vue脚手架

npm install vue-cli -g

创建nuxt项目

yarn create nuxt-app  项目名称

或者

npx create-nuxt-app  项目名称

或者

vue init nuxt-community/starter-template   项目名称

建议使用npx，如果报错，重装vue-cli。推荐最后一个方式

运行项目

npm install   安装依赖

npm run dev  启动项目

项目路径

常用配置

配置端口

package.json文件

 配置全局css

在nuxt.config.js文件

 ~表示匹配项目根路径。

配置webpack

在nuxt.config.js文件的build配置项

 nuxt路由

nuxt会根据pages的路径结构自动在.nuxt文件夹生成一个路由表。

 文件内容

 

 

生成的路由表

 一般我们不使用a标签，而是使用组件<nuxt-link>

 传参

<nuxt-link :to="{name: 'log-id', params:{id: n.id,key:value}}"></nuxt-link>
this.$router.push({ path: '/log/' + (_idl || 'new')}) 
this.$router.push({ name: 'log-id',params:{id:12,key:value}) 

接收

接收：
async asyncData ({ params }) { //  params.id 就是我们传进来的值}
// 或者 
created () { this.$route.params.xxx}

query传值(会显示在地址栏)

// 传递参数
<nuxt-link :to="{name: 'houses',query:{need_type:'INVEST', district:item}}" ></nuxt-link>
this.$router.push({ path: `/log/${_idl}`,query: { key: value, key: value }})

// 接收参数：
created () { this.$route.query.xxx this.$route.query.xxx }
asyncData ({ app, query}) {
   query.site_id = siteId
 }

注意：this直接可以全局使用

动态路由

动态路由需要在组件加一个_

 其中id表示的就是动态路由的参数，获取的时候一定要和_后面的保持一致。

 在index中跳入动态路由

 动态参数校验

 默认模板和默认布局

默认模板

在根路径下新建一个app.html，这个页面将作为一个项目中的模板，在哪都可以有这个模板

 默认布局

和默认模板类似，但是在默认布局中不可以定义head标签内容，而且不需要重启项目

 错误页面和meta标签设置

错误页面

 meta标签设置

在任意vue页面通过head方法设置

 异步请求数据

通过asyncData配置项即可实现，return的结果就是返回到data中

 静态资源和静态html引入问题

开发环境图片可以使用，打包后图片不显示的问题

就是引入的时候，需要使用~表示根路径引入，

打包好的静态资源需要在服务器上运行，可以使用tomcat或者live-server服务器。