项目构成:vue+nuxt+vue-awesome-swiper
插件引入思路:
1.使用命令安装插件
2.在plugins文件夹下建立一个全局注册插件的文件
3.在nuxt.config.js中配置插件
具体步骤:
1.安装vue-awesome-swiper插件,命令为
npm install vue-awesome-swiper --save
注:此时自动安装最新版vue-awesome-swiper(我安装的版本为3.1.3 ),
我看了下package-lock.json文件,发现以下代码,就想当然地认为需要再次安装 指定版本的swiper,实际根本不需要。
"vue-awesome-swiper": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
}
}
2 全局注册vue-awesome-swiper插件
在项目的plugins文件夹下建立一个aw.js文件(该名字可以随意起,最好按插件名字定义该文件名),内容为
import Vue from 'vue'
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
注:如果你参考https://www.npmjs.com/package/vue-awesome-swiper网站,可能会有下列代码
// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
这段代码表示,当是客户端时,引入vue-awesome-swiper该插件。由于,我将在后面其他地方指定它为客户端插件因此放弃 这种写法。
3.在nuxt.config.js中配置vue-awesome-swiper插件
plugins: [
//指定插件在客户端运行时使用。
{ src: "~/plugins/vueAwesomeSwiper.js", ssr: false },
],
4.使用vue-awesome-swiper
<template>
<div v-swiper:mySwiper="swiperOption" >
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="ca in num" style="background-color:green">
{{ca}}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
num:2,
swiperOption: {
slidesPerView :1,
direction:'vertical',
height:100,
spaceBetween : 10,
}
}
},
mounted() {
}
}
</script>
注:这种写法是ssr,至于SPA可以参考https://www.npmjs.com/package/vue-awesome-swiper,至于API都是一样的,只不过 写法不同而已。
其他一些问题。
1.插件文件引入插件,可能出现的情况
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr' 时后面可能有一些提示。
Could not find a declaration file for module 'vue-awesome-swiper/dist/ssr'. 'd:/sw/node_modules/vue-awesome- swiper/dist/ssr.js' implicitly has an 'any' type.
Try `npm install @types/vue-awesome-swiper` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-awesome-swiper/dist/ssr'
项目中的node_modules文件夹下的vue-awesome-swiper文件夹,确实没有types文件夹,当然也就不包含一个声明vue- awesome-swipe的d.ts文件了,但不影响插件的使用。
2.如果你安装了node ,完全可以使用命令创建项目
1.npx create-nuxt-app myproject
2.接下来可以选择项目的配置,也可以一路回车。