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

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

一、目录结构如下

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

二、操作如下

在index.vue中写入

<template>
    <div class="index">
        <div>{
   
   {zuopin}}</div>
        <h2>{
   
   {content.name}}</h2>
        <h2>{
   
   {content.title}}</h2>
        <div class="box" v-for="item in info" :key="item.id">
            <h2>{
   
   {item.name}}</h2>
            <p>{
   
   {item.title}}</p>
        </div>
    </div>
</template>

<script>
import {box_Data} from "@/assets/js/indexdata";
import {box2_data} from "@/assets/js/indexdata";
    export default{
        name:'index',
        data(){
            return{
                zuopin:'作品集',
                info:box2_data,
                content:box_Data
            }
        },
    }
</script>

在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中使用即可