nuxt使用小结

今天药忘吃喽~ 2022-01-20 02:11 419阅读 0赞

## 开始 ##

### 创建项目 ###

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配置
    复制代码