vue创建项目的初步理解

最新推荐文章于 2022-12-05 22:27:20 发布

九鸩

最新推荐文章于 2022-12-05 22:27:20 发布

阅读量101

点赞数

分类专栏： # 前端vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44858980/article/details/119006939

版权

前端vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue创建项目的初步理解目录

在这里插入图片描述

index.js

import Vue from 'vue'
import Router from 'vue-router'
//"@" 符号代替 "src" 字符串
import HelloWorld from '@/components/HelloWorld'
import a from '@/components/a'
import home from '@/components/home'

Vue.use(Router)
//export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，
//以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，
//在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，
//那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。
//export 和export default 的区别在于：export 可以导出多个命名模块,export default 只能导出一个默认模块，这个模块可以匿名
//引入的时候可以给这个模块取任意名字，例如 "obj"，且不需要用大括号括起来。
export default new Router({
  mode:"history",
  routes: [
    {
      // 路径
      path: '/HelloWorld',
      // 名称
      name: 'HelloWorld',
      //组件名
      component: HelloWorld
    },
    {path: '/a',name: 'a',component: a},
    {path: '/home',name: 'home',component: home}
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

import App from './App.vue'
// import home from './home'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
// 新建了一个vue实例
new Vue({
  el: '#appq',//绑定到app 这个app为App.vue的id，通过el将main.js和App.vue进行绑定
  router:router,//import router from './router'
  components: { App },//import App from './App.vue'
  template: '<App/>'//指App.vue里面的模板
  // template: '<div>ddddddddddd</div>'//页面则显示div里面的内容ddddddddddd
})
// 在main.js中，新建了一个vue实例，
// 并使用el：#app链接到index.html中的app，
// 并使用template引入组件<app>，
// 就是说通过main.js我们关联到App.vue组件

App.vue

<template>
  <div id="DDD">
    <!-- <img src="./assets/logo.png"> -->
    <!-- 这里是App.vue. -->
    <!-- 这里匹配到了在路由文件中定义的组件链接 -->
    <!-- <router-link to="/"> 通过标签中的path,路由会匹配到相应的组件 -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!-- <router-link to="/HelloWorld">前往HelloWorld.vue</router-link> -->
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <!-- router-view标签将会把路由相关内容渲染在这个地方 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>
<style scope>
#DDD {
  border: 1px solid #000;
}
</style>
<!-- 看一下App.vue中的内容，是一个标准的App.vue模板的形式，
包含了<template></template>、<script></script>、<style></style>三部分 -->

HelloWorld.vue

<template>
  <div>这里是HelloWorrld.vue</div>
</template>

<script>
// 这个函数的作用是：可以使组件在外部文件引用
// export default{}这是在复用组件的时候用到的
/* 例如
假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口 export ，
在文件 B 中引入 import ，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
*/
/* 
1.组件自身的递归调用，就是在当前组件中，调用组件自己
2.当我们使用vue.js官方提供的调试工具调试时，可以看到组件的名称，更好地定位
3.最后一种应该是使用比较多的情况，就是当我们使用 keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。
指定的依据就是组件的name。

name 在 export default {} 中的作用:
  name: ‘app’ 相当于一个全局 ID；
  可以不写；写了可以提供更好的调试信息（官方文档有）。
  可以理解为是导出的途径。用import App from './App'
*/
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "这里是HelloWorrld.vue",
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

/* 
路由中有三个基本的概念 route, routes, router。

  route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。

  routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

  router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

  客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

 */

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>testvue</title>
  </head>
  <body>
    <!-- 浏览器访问index页面，会自动调用app组件 -->
    <div id="appq"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<!-- 在body体中只有一个div标签，其id为app,这个id将会连接到src/main.js内容 -->