关于在uni-app中引入组件、css样式以及js文件的方法总结

uni-app是使用vue.js开发多端应用的框架，可以说为一些钱多开发者提供了很大的方便，近些天学习了一下vue.js，可当开始开发的时候却不知怎么去将文件分块，然后查了一下，发现引入文件确实与传统的html不一样，总结了一下分别引入组件、css样式以及js文件的方法：

引入组件

    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”即代表引入成功：

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