Vue.js 目录结构

目录解析

目录/文件说明
build最终发布的代码存放位置。
config配置目录，包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • commponents: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组建写这里，而不使用 commponents 目录。
  • main.js: 项目的核心文件。
static静态资源目录，如图片、字体等。
test初始测试目录，可删除
.xxxx文件这些是一些配置文件，包括语法配置，git配置等。
index.html首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
package.json项目配置文件。
README.md项目的说明文档，markdown 格式

  功能：首页展示多个页面组件
   第一步：在App.vue中引入组件

   例如： import hi1 from '@/components/hi1'

   第二步:在js中写入组件的名字
   components:{
      hi2,
      hi3
     }
    第三步：展示模板，一直以名字写在template
    例如：<hi1></hi1>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <hi3></hi3>
    <hi2></hi2>
    <p>
      导航：
      <!--<router-link :to="'/hi/'+'judy'">hi页面</router-link>-->
      <router-link to="/hi">hi页面</router-link>
      <!--<router-link :to="{name:'hi2',params:{username:'judy22'}}">hi2页面</router-link>-->
      <router-link to="/">首页</router-link>
      <router-link to="/hi2/88/新闻">hi2页面</router-link>
      <router-link to="/hi2/88">hi2页面2</router-link>
      <router-link to="/hi3/2018/新闻3">hi3页面</router-link>
    </p>
<!--点击哪个页面下面就为哪个页面的名字-->
    <p>{{ $route.name}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
  /*
  * 1.首页展示多个页面组件
  *   第一步：在App.vue中引入组件
  *   第二步:在js中写入引入组件的名字
  *     components:{
  *       hi2,
  *       hi3
  *     }
  *     第三步：展示模板，一直以名字写在template
  *       例如：<hi2></hi2>
  * */
  import hi3 from '@/components/hi3'
  import hi2 from '@/components/hi2'
  export default {
    name: 'App',
    components:{
      hi3,
      hi2
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue