HEML#3(Vue3)

2022.9.4，今天好好把vue3学习学习，现在还没明白各种代码是写在html文件里还是vue文件里

        每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css

vue项目文件解析

1、main.js    项目入口 主要作用是初始化vue实例，并使用需要的插件，里面常用import导包，语法类似python  例如import Vue from 'vue'

2、App.vue是跟组件，所有页面都是在App.vue下面进行切换的，可以理解为所有的组件都是App.vue的子组件，可以把每个页面都出现的内容放在App.vue里面。

3、index.html文件入口

        3.1  assets  资源文件夹

        3.2  components 里面写建的别的vue组件等等(非路由，全局组件)

4、src放置组件和入口文件

5、node_modules为node.js依赖的模块

6、config中配置了路径端口值等

7、build中配置了webpack的基本配置、开发环境配置、生产环境配置等

import路径中的 @ 代表src文件夹

在 script import : import Footer from “@/index/components/footer/Footer”;
在 style 标签里引用 css 需要加 ~ 号: @import “~@/index/assets/common/layout.css”;
在 data 里写 icon: require("@/assets/img/tabbar/cart.png")
Css 文件引入
base.css 引入 normalize.css：
@import “./normalize.css”
App.vue 中引入 base.css
@import “./assets/css/base.css”
 

APP.Vue解析

1.template 部分

       首先，一个 vue 组件，他的 template 则代表它的 html 结构。但是需要注意的是，并不是把代码包裹在 <template></template> 中就可以了，而是必须在里面方置一个 html 标签来包裹所有的代码。（如div）

<template>
   <div>
     <Header></Header>
     <div class= "article_list" >
       <ul>
         <li></li>
       </ul>
     </div>
     <Footer></Footer>
   </div>
</template>

2.Script部分

<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'  引用两个自定义格式组件
export default {          所有代码要包裹在export里面,所有要输出的东西都在这里
  components: { Header, Footer },
  data () {   data是数据，这里返回一个list，在后面template中可以用this.list来访问这个list
    return {
      list: []
    }
  },
  created () {  created 表示当我们的组件加载完成时，需要执行的内容。
    this.getData()
  },
  methods: {    methods是这个组件的函数。上面的代码就表示，组件自定义了一个叫getData() 的函数。
    getData () {
      this.$api.get('topics', null, r => {
        console.log(r)
      })
    }
  }
}
</script>

<component> 用于渲染动态组件或元素的“元组件”。

3.Style部分

<style>
.article_list {margin: auto;}
</style>

针对 template 里内容出现的 html 元素写一些样式。

<style scoped>代表当前只会影响这页vue的template的组件，反之就是全局（一般都加入这个）

<style scoped>{  这样的话整个页面都是红的
    backgroudcolor : red;
}
</style>

<style>{  这样的话只有整个vue界面的backgroud页面都是红的
    backgroudcolor : red;
}
</style>

Main.js解析

1.导入createApp函数从vue中

import { createApp } from "vue";

2.创建一个根组件App.vue，导入至main

import App from "./App.vue";

3.使用createApp创建应用实例

const app = createApp(App);

4.应用实例挂载到#app中

app.mount("#app");

(上文引用  https://blog.csdn.net/wssy_day/article/details/123582691?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166226216516782246454440%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166226216516782246454440&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-123582691-null-null.142^v46^control&utm_term=main.js&spm=1018.2226.3001.4187)

Template的引入以及import的使用

<template>
  <loginApp></loginApp>   这里就可以构造了
</template>

<script>
import loginApp from "./components/myLogin.vue"  在这里import，名字自己起
export default {
    name: 'App',
    components: {
      loginApp   这里全局实例化
    }
}
</script>

tips：

1.vue3中制作图片按钮的方法

<img src="../assets/image/sign.png" class="button" type="button" @click="loginClick"  />

2.定义全局变量  app.config.globalProperties.$systemId = "10"

   引用全局变量  import { getCurrentInstance } from "vue";

                const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId