nuxt使用小结

开始

创建项目

npx create-nuxt-app <项目名>
根据提示选择安装内容即可
nuxt模式默认选择universal
npm run dev 启动项目
复制代码

使用less

cnpm i less less-loader -D
在项目中style lang="less"就可以使用了
复制代码

使用全局css样式

1. 在asset内或同级目录创建一个css(可自定义名称)文件,讲css/leee放入下面
2. 在nuxt.config.js中引入样式 ~表示@  ~~表示@@
```
    css: [
        '~/assets/css/index.less'
    ]
```
复制代码

使用外部js文件

1. 在nuxt.config.js中引入文件  flexible.js
```
    head: {
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ],
        script: [
          { src: 'http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js' }
        ],
      },
```
复制代码

使用postcss-px2rem进行移动端适配

1. 通过上一步引入flexible.js文件
2. 引入之后在build里面配置转换
```
    build: {
        postcss: [
          require('postcss-px2rem')({
            remUnit: 75
          })
        ],
        extend(config, ctx) {
        }
      }
```
复制代码

使用axios

nuxt中默认配置了nuxt/axios,
可以再nuxt.config.js中添加模块使用

```
    modules: [
      '@nuxtjs/axios',
    ],
  
```

如果需要用到axios的拦截器,则需要另外配置

1. cnpm i axios -S
2. 在plugins文件夹下创建一个axios.js文件
3. 在axios.js文件中配置
```
    import axios from 'axios'

    // axios默认配置
    axios.defaults.timeout = 10000;           // 超时时间
    // axios.defaults.baseURL = Apis.domain;  // 默认地址
    axios.defaults.transformRequest = function (data) {
    	data = JSON.stringify(data);
    	return data;
    };
    
    // 请求拦截
    axios.interceptors.request.use(
    	config => {
    		config.headers['Content-Type'] = 'application/json'
    		return config;
    	},
    	err => {
    		return Promise.reject(err);
    	});
    
    // 路由响应拦截
    axios.interceptors.response.use(
    	res => {
    		return res.data
    	},
    	error => {
    		// 返回接口返回的错误信息
    		return Promise.reject(error.response.data)
    	});
    
    export default axios;

```
4. 在需要用到的.vue内
```
    import axios form '@/plugins/axios'
```
复制代码

使用mint-ui

1. cnpm i mint-ui -S
2. 在plugins下创建mint-ui.js文件
3. 在mint-ui.js中配置
```
    import Vue from 'vue'
    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    Vue.use(MintUI) 
```
4. 在nuxt.config.js中引入
```
    plugins: [
        { src: '~/plugins/mint-ui', ssr: true }
    ]
```
复制代码

使用swiper

1. cnpm i vue-awesome-swiper -S
2. 在plugins下创建swiper.js文件
3. 在swiper.js中配置, swiper中有使用到window等浏览器api,所以只能在浏览器环境下使用,不支持在服务端加载使用
```
    import Vue from 'vue'
    export default () => {
        if (process.browser) {
            //console.log('浏览器端渲染');
            Vue.use(require('vue-awesome-swiper/dist/ssr'), /* { default global options } */)
        }
    }
```
4. 在nuxt.config.js中引入
```
    css: [
        'swiper/dist/css/swiper.css' 
    ],

    plugins: [
        { src: '~/plugins/swiper.js', ssr: false },
    ],
```
5. 在使用的组件中
    templete部分
```
    <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="banner in banners">
            <img :src="banner">
          </div>
        </div>
    </div>
```
    div中的class="swiper-wrap" 和 class="swiper-slide"为必须项,否则找不到元素
    
    js部分
    data () {
        return {
            swiperOption: {
		loop: true,
		autoplay: {
		  delay: 10000,
		  stopOnLastSlide: false,
	          disableOnInteraction: true,
               }
           }
        }
    }
    swiperOption 参数可参照swiper官方api配置
复制代码