0、完整示例代码地址 欢迎取阅

https://github.com/huanhunmao/daily-practice/tree/master/nuxt-app/my-first-nuxt-app

1、搭建 nuxt脚手架

1、基于 node.js 需要先安装
2、全局安装npm i -g create-nuxt-app  
3、cd desktop
4、mkdir nuxt-app
5、cd nuxt-app
6、create-nuxt-app my-first-nuxt-app 选择最简单方式创建 

启动
7、cd my-first-nuxt-app
8、npm run dev

• 展示效果
• 

2、项目结构和特色之一

1、按两次 ctrl + c 就可 关掉当前服务 
2、输入  code .   会自动将文件在  vscode里打开  
3、在 vscode 中 直接 按住ctrl + tab上面的键  可以打开该文件所在终端 
4、

• 

• 

• 

• 

3 路由和链接

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

<template>
    <div>
        <input type="text" name="" id="" v-model="userId">
        <button @click="onLoadUser">用户详情</button>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            userId:''
        }
    },
    methods:{
        onLoadUser(){
            this.$router.push('/users/' + this.userId)
        }        
    }
}
</script>

• 
• 

4、 nuxtLink validate验证动态路由

• 

• 

• 

• 

• 

• 

• 

• 

• 

5、路由嵌套 nuxt-child

• 

• 

• 再将输入框 和 点击结果放到 父级

6、layouts 布局

• 

• 默认 pages 下的页面会使用 layouts 下的 default.vue

• 定义之后 如何 使用 自定义的 users.vue 呢

• 

• 

• 

• 自己可以定义 出现问题 后 展示的界面信息

7、nuxt-components 组件用法

• 

• 

• 

• 接下来 我们 现在 components 里面定义一个 Header.vue 并在 pages下使用

• 

• 

• 

• 并且点击对应的内容 可以实现跳转 很nice !

• 那我现在有个需求 将 这个组件应用在 每一个 pages下 （这不是扯淡吗 ）

• 直接在layouts default.vue里面 引入 Header.vue

<template>
  <div>
    <Header />
    <Nuxt />
    
  </div>
</template>

<script>
import Header from "~/components/Header.vue"
export default {
    components:{
      Header
    }

}
</script>

• 并且 把 pages下的 users.vue layout 也改成 default

• 

• 

• 另外一个问题 如何消除 初始的 margin padding

• 可以 在 assets 下新建 文件 common.css

• 

• 那如何 使得 pages 下的页面生效呢 ？

•