开始
创建项目
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配置
复制代码