标签：vue app js music import 引入 uni css

引入组件

  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文件，如下：

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

<style>
	@import url("./music.css");
</style>

这样就成功引入了。

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

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

export default{
	test
}

在music.vue的script中引入：

import music from './music.js'

在生命周期函数onLoad中进行测试：

写完代码后保存并在浏览器中查看，打开控制台，打印出“ok”即代表引入成功：

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

标签：vue,app,js,music,import,引入,uni,css
来源： https://blog.csdn.net/weixin_45932157/article/details/115236000

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。