一款神奇的框架，让你轻松开发多端应用

uni-app是使用vue.js开发多端应用的框架，可以说为一些钱多开发者提供了很大的便捷，近些天学习了一下vue.js引入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中进行测试：

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

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