nuxt整合

npm 从5.2版开始，增加了 npx 命令
如果不能用，就要手动安装一下

npm install -g npx

创建项目

// 创建项目
npx create-nuxt-app <项目名>

// 项目名称
Project name: (nuxt01)
// 程序设计语言
Programming language: js、ts
// 打包工具
Package manager: yarn、npm
// ui框架
 UI framework: 
    None
    Ant Design Vue 
    BalmUI
    Bootstrap Vue  
    Buefy
    Chakra UI      
    Element        
    Framevuerk     
    Oruga
    Tachyons       
    Tailwind CSS   
    Windi CSS      
    Vant
    View UI        
    Vuetify.js    

// nuxt模块
Nuxt.js modules:
    ( ) Axios - Promise based HTTP client
    ( ) Progressive Web App (PWA)
    ( ) Content - Git-based headless CMS

// 代码规范检查
Linting tools: 
    ( ) ESLint
    ( ) Prettier
    ( ) Lint staged files
    ( ) StyleLint
    ( ) Commitlint

// 测试框架
Testing framework: 
    None
    Jest
    AVA
    WebdriverIO
    Nightwatch 

// 渲染模式
Rendering mode: 
    Universal (SSR / SSG)
    Single Page App

// 部署目标
Deployment target: 

// 开发工具
Development tools: 
 ( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

// 集成
Continuous integration: 
    None
    GitHub Actions (GitHub only)
    Travis CI 
    CircleCI 

// 版本控制
Version control system: 
    Git
    None

运行项目

# 进入项目根路径
cd <project-name>
npm run dev

安装nuxt

npm install --save nuxt

nuxt.config.js作为项目的入口文件
初始化项目
删除components、store目录下默认生成的文件和组件
删除pages/index.vue中的默认代码

<template>
  <div>根组件</div>
</template>
<style>
</style>

构建项目时已经集成了 view ui
新建一个子组件viewtest.vue，到view ui官网中复制模板到该组件

<!-- view ui 默认标签的样式修改方式 -->
<Sider hide-trigger :style="{background: '#fff', height: '670px'}"></Sider>

全局样式

// static/css路径下新建全局样式文件global.css
// 在nuxt.config.js中引入
css: [
  '~static/css/global.css'
]

nuxt.config.js中默认配置

export default {
  // 网页title
  head: {
    title: 'nuxt01',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [   // 网页图标
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  // 导入的css样式，'~'表示项目根目录
  css: [
    '~static/css/global.css'
  ],
  // 整合的插件
  plugins: [
    '@/plugins/view-ui'
  ],
  // 自定义插件
  build: {
  },
  // 路由
  router: {
    routes: [
      { name: 'index', path: '/', component: 'pages/index.vue' }
      ]
  }
}

配置项目的ip + port

// package.json中配置
"config": {
    "nuxt": {
      "host": "127.0.0.1",
      "port": "3000"
    }
  }

将viewtest.vue作为子组件使用

<!-- viewtest.vue中默认导出 -->
<script>
export default {
}
</script>

<!-- pages/index.vue中导入、注册为自己的组件 -->
<script>
import ViewTest from '../components/viewtest'     // 导入
export default {
  components: {
    ViewTest                // 注册
  }
}
</script>

<!-- pages/index.vue中使用 -->
<template>
  <div>
    <view-test/>
  </div>
</template>

整合ts

# 1.安装ts到开发依赖
cnpm install typescript -D 

# 2.初始化一个ts编译器的配置文件tsconfig.json
npx tsc --init 

# 3.项目根目录添加shim.d.ts文件，添加如下：
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}

# 4.在组件中测试
<script setup lang="ts">
class Person{
  name = '孙悟空';
  age = 18;
  sayHello(){
    console.log("Hello 大家好！")
  }
}

// 5.new 一个实例
const per = new Person();
console.log(per.name);
</script>

router
nuxt项目中路由跳转不需要router依赖，只需在nuxt.config.js中配置即可

// pages/user目录下新建子组件index.vue、 one.vue
// nuxt.config.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'
      }
    ]
  }

// 测试：http:localhost:3000/user
// 路由跳转成功

// 在组件中使用标签也可以实现路由跳转
<nuxt-link to="user">用户</nuxt-link>

子路由

// 在pages/users目录下新建子组件 _id.vue和index.vue
// pages目录下新建父组件users.vue
// users.vue中添加路由出口
 <nuxt-child/>
// nuxt.config.js
router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [                        // 子路由
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}
 
// 测试：http://localhost:3000/users/:id
// 测试成功

参考1
参考2
vuex
nuxt中内置了vuex
参考
参考vite构建vue项目整合vuex步骤
1. 安装vuex依赖
2. 导入vuex
3. 注册为vue的属性
4. 创建store对象
5. state中存入共享数据
6. 将store挂载到vue实例上
7. 在组件中使用
使用方式一

// store目录下新建index.js
import Vue from 'vue'
import Vuex from 'vuex'    // 1.nuxt自动集成vuex，2.导入vux
Vue.use(Vuex)   // 3.注册为vue实例
const store = () => new Vuex.Store({   // 4.创建store
  state: {
    counter: 0    // 5.共享的数据，6.nuxt自动将store挂载，7.在组件中使用
  },
  mutations: {
    increment (state) {
      state.counter++
    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    },
  }
})
export default store

// pages/index.vue中使用
<button @click="$store.commit('increment')">{{ $store.state.counter }}</button>

使用方式二

// store目录下新建state.js mutations.js actions.js，作为可以导出的模块

// pages/index.vue中使用
<button @click="$store.commit('increment')">{{ $store.state.counter }}</button>

axios
参考vue-cli构建vue项目使用axios的步骤：1.安装axios依赖，2.入口文件main.js中导入axios并注册为vue属性，3.在组件中使用
参考

// 安装axios依赖
npm install @nuxtjs/axios

// nuxt.config.js中配置如下
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    prefix: '/app',      // 添加请求前缀
    proxy: true
  },
  proxy: {
    '/app': {
      target: 'http://127.0.0.1:8080',  // 真实请求地址 -> http://127.0.0.1:8080/app/xxx
      pathRewrite: {'^/app': '/test'}    // 真实请求地址 -> http://127.0.0.1:8080/test/xxx
    }
  },

测试：pages/users/index.vue中发送请求

  loadData(){
    this.$axios.get("/helo/helo?message='hello world'").then(({data})=>{
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  }

// 案例：点击按钮时发送该请求
// 打开浏览器控制台查看发送的请求显示：http://localhost:3000/app/helo/helo?message=%27hello%20world%27
// 实际上访问的请求地址为：http://localhost:8080/test/helo/helo?message=%27hello%20world%27
// 详情移步 -> https://blog.csdn.net/TimOut/article/details/98754914

posted @ 2022-09-12 08:58 DogLeftover 阅读(106) 评论(0) 编辑收藏举报

刷新页面返回顶部