vue中把变量从.js文件中引入

前言：在vue开发中，我们通常把数据定义在data（）里面。但是当此页的数据很多的时候，就会去定义很多个变量名，这样不仅不太美观，而且不利于模块化的开发。所以可以尝试着将这些变量放到一个.js文件里面，然后再在.vue文件里去使用就好啦！

一、目录结构如下

在assets下新建一个js文件夹，在components下新建一个index.vue文件

二、操作如下

在index.vue中写入

在index.js中写入

const box_Data = {
    name:`作者名称`,
    title:`作品名称`,
}

const box2_data = [
    {
        id:`1`,
        name:`史铁生`,
        title:`《我与地坛》`,
    },
    {
        id:`2`,
        name:`路遥`,
        title:`《平凡的世界》`
    }
]

export {
    box_Data,
    box2_data
}

三、步骤总结

1、新建js文件，在其中定义变量，可以是对象可以是数组

2、导出const的变量名称

3、在.vue文件中导入 导出的变量名

4、在data里面进行赋值

5、在template中使用即可