nuxtJS框架使用流程

nuxtJS框架使用流程

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

2、想全局导入外部css，必须在nuxt.config.js文件下的css数组中引入配置

3、配置env环境
第一步： 安装npm install cross-env，在package.json中的script中写入

"dev": "cross-env BASE_URL=https://meituan.thexxdd.cn/api/getbanner NODE_ENV=development nuxt",
"build": "cross-env BASE_URL=https://meituan.thexxdd.cn/api NODE_ENV=production nuxt build",
"start": "cross-env BASE_URL=https://meituan.thexxdd.cn/api NODE_ENV=production nuxt start",
"generate": "nuxt generate"

第二步：

第三步：成功！

解决跨域：
安装：

npm install @nuxtjs/axios @nuxtjs/proxy --save

nuxt.config.js 配置

  modules: [
    '@nuxtjs/axios','@nuxtjs/proxy'
  ],
  axios: {
      proxy: true, // 表示开启代理
      prefix: '/api', // 表示给请求url加个前缀 /api
      credentials: true // 表示跨域请求时是否需要使用凭证
  },
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8080', // 目标接口域名
      changeOrigin: true, // 表示是否跨域
      pathRewrite: {
        '^/api': '/', // 把 /api 替换成 /
      }
    }
  },
  build: {
    vendor: ['axios'] //为防止重复打包
  }

注意：

1.npm install less-loader@6.0.0  //less-loader版本不能太高
2.npm install less //导入less依赖
3.想局部导入外部css，需要在.vue下的style标签下写下@import "../static/css/index.css";
4.<nuxt-link to="/about">跳转到about页面</nuxt-link>  //路由之间的跳转
5.NuxtJS框架里不许用../../之类的，只可以使用 ~ 或者 @ ,这两个代表根目录
6.NuxtJS框架的异步请求必须在最顶级的父组件进行异步，然后通过vuex来传给相应需要异步值的组件，所以NuxtJS内置了vuex，绝了！
7.只要 baseURL(接口路径)错了，页面就直接报错，千万不能错!
8.nuxt中vuex的导出方式应该以方法的形式进行导出！

nuxtjs3.0 vux新写法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

//nuxtjs3新写法
export const state = () => ({
    who: 0
});
export const mutations = ({
    setWho(state, payload) {
        state.who = payload
    },
})