vue页面基本组成

作为编写过html的人，vue页面的基本组成是什么呢？如何快速入手vue呢？我来讲下自己的思路。

简介:
vue是一个前端框架，运行它需要下载node.js（后台支撑），下载vs code（代码编辑器）来编辑代码。可配合eliment ui（上百度搜），快速开发前端页面。

以前写的网页是.html后缀，现在编写的是.vue后缀的文本文件。

下载好node，用node自带的仓库管理工具npm安装好vue后，在power shell中运行命令 vue ui。使用图形化工具即可创建项目。或者在power shell输入命令：vue init webpack vueProject1(你的项目名字)，即可创建好项目。创建好vue项目后 按cirl + shift + ` （键盘上方1的旁边）调出终端terminal 后输入npm install 指令加载项目，加载成功后输入npm run dev 或 npm run serve指令启动vue项目。

正文：.vue后缀的文本包括三个部分。
1、 这里边放的就是html文件的body里放的东西，比如table、form、div块等等，我们想要在网页上展示什么，就在这里面写什么就可以了。

2、

顾名思义，这里肯定放的就是java script方法了，其实还不精准。 import pageHeader from "@/components/pageHeader";用来引入文件或者其他文件中的方法。
export dafault{ } 又具体可分为4个 同级的 部分，不同的部分以英文逗号分割。下面一一讲解。
①、方法部分， 里面是手打的java script方法，示例：

methods:{
changeDate(){console.log("方法一")},
clear(){console.log("方法二")},
},

不同的方法间，以英文逗号分割。
②、数据部分，这里用来定义全局变量，只要在这里定义的变量，在methods部分的方法中，直接用 this. 属性名即可调用！属性要写在return里，不同属性以英文逗号分割。示例：

data(){
return{
      paramDate: "",
      dataValue: "",
      temporaryTable: [],
}},

③、vue生命周期方法。 一个生命周期，主要包括创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后这8个部分。每个部分都对应一个方法，具体用哪个看实际场景。

beforeCreate(){console.log("创建前")}，
created(){console.log("创建后")}，
beforeMount(){console.log("挂载前")}，
mounted(){console.log("挂载后")}，
beforeUpdate(){console.log("更新前")}，
updated(){console.log("更新后")}，
beforeDestroy(){console.log("销毁前)}，
destroyed(){console.log("销毁后")}，

注意，这8个方法不管写哪个，都是和data(){return{}},methods(){},是同级别的。
④、组件部分。 引入别的组件（别的vue文件）由import引入

components: { pageHeader, },

使用

3、就是写css样式的地方。

<style lang="scss" scoped>
// 宽按钮
.elbutton {
  width: 90%;
}
// 绿底白字
.greenwhite {
  background-color: #1dd2c1;
  color: white;
}
style>

调用方法

本文暂时就到这里啦，后续发现有不足，作者还会进行补充 欢迎大家交流hhh