在Vue-Cli环境中我们可以使用一下:
在router中的index.js中,引入data.js文件:
1 | import {data} from '@/data.js'; |
之后就可以在任意组件中调用,例如下面在document组件中进行调用和渲染:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <template> <div> 这里是document的路由 <ul> <li v-for="item,index in data">{{item.userName}}</li> </ul> </div> </template> <script type="text/javascript"> import { data } from '@/data'; export default { data() { return { data }; }, created() { console.log(data); console.log("组件已经准备就绪"); }, mounted() { console.log('组件加载完毕'); } } </script> |
data.js中的文件内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | let data = [ { id:1, userName:"leo1", sex:'男', hobby:'写代码' }, { id:2, userName:"leo2", sex:'男', hobby:'唱歌' }, { id:3, userName:"leo3", sex:'男', hobby:'读书' } ]; export {data}; |
补充说明,css中import属性的使用
现在有a.css,b.css,c.css三个css文件,如果一个个引入,就太麻烦了,这个时候,我们就可以将这些文件统一进入到一个叫做app.css的文计中(文件名任意取),然后在html中就只需要引入app.css就可以了。
1 2 3 4 5 6 7 | //在app.css中引入的写法,他们都在同一目录下 @import './a.css'; @import './b.css'; @import './c.css'; //在html中引入 <link rel="stylesheet" type="text/css" href="./app.css"> |
7