uni-app中引入组件、css样式以及js文件的方法

客官°小女子只卖身不卖艺 2022-11-13 07:29 1196阅读 0赞

**引入组件**

import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue' import yuToast from '@/components/yu-toast/yu-toast' import luchAudio from '@/components/luch-audio/luch-audio.vue' export default { 
    		components: { 
    			uniSearchBar,
    			yuToast,
    			luchAudio
    		}

这样就将要用的组件引入了，在模板中直接使用引入时的名字就可以了，如下：

<luch-audio :src="url" :play.sync="pla" :name="name?name:'未知歌曲'" :author="author?author:'未知作者'" :autoplay="true"></luch-audio>
    <uni-search-bar @confirm="search"></uni-search-bar>

css样式  
作为测试，先在要引入文件的同级目录下新建css文件，如下：  
![在这里插入图片描述][20210326132129592.png]

这样就可以将music.vue要用的样式写到music.css中，之后就是引入，在music.vue的style标签下引入：

这样就成功引入了。

js文件  
方法如上，在同级目录下新建js文件，如上图，作为测试在music.js中写上如下代码：

var test=function(){ 
    	console.log('ok')
    }
    
    export default{ 
    	test
    }

在music.vue的script中引入：

import music from './music.js'

在生命周期函数onLoad中进行测试：  
![在这里插入图片描述][20210326132244204.png]

写完代码后保存并在浏览器中查看，打开控制台，打印出“ok”即代表引入成功：  
![在这里插入图片描述][20210326132254235.png]

到这里三种文件的引入方式就都说完了，代码的分块不仅而已让我们的代码结构更清晰，更大程度上在一些重复的函数、样式、结构等，可以帮助我们写一次代码，在多处使用，大大提高我们的效率以及缩小整个项目的大小和工作量。

[20210326132129592.png]: /images/20221022/ae3c57b80e3047f8a42ca21dbe558578.png
[20210326132244204.png]: /images/20221022/f79561f367c74468b9840c35908e38f5.png
[20210326132254235.png]: /images/20221022/608c7f13d72f433cac61f20929a8e585.png