Vue+ElementPlus基础开发笔记

学习记录，如有错误，恳请指正，十分感谢

一、利用脚手架创建vue项目 

 我在【Nodejs安装教程】这篇博客介绍了如何在Windows电脑中安装配置Nodejs，现在利用其中自带的包管理工具npm安装vue脚手架包Vue CLI，打开cmd，运行命令：

npm install -g @vue/cli

即可在电脑上全局安装vue cli包，安装的包会存放于Nodejs安装目录下的node_global\node_modules文件夹内 

1. 创建项目 

接着在电脑的工作区目录下打开cmd，输入命令：vue create 项目名称

（这里的项目名称是vue-demo，注意项目名称不能有大写字母）

 回车确认之后会进行一些项目配置参数确认，下面按照顺序进行设置：

首先，选择语法特性，按上下键进行选择，回车进行确认，这里我们选择手动选择（红框所示），因为上面的两个Default选项都会进行语法强检查，不适合初学者。这里有一个demo选项是我自定义的参数配置，在参数配置的最后可以选择是否保存所有的参数配置，保存的话你下次创建项目就不用重新一个一个选择自己所需要的配置了

然后，这里是选择一些语法、依赖包之类的配置，Babel必须，其他可选，这里选择Vuex是因为后面开发的组件比较多的话，组件之间的数据共享、状态管理什么的需要用到Vuex这个工具。 

 这里选择项目vue版本，我选择的是vue3，这个根据需要进行选择，vue2和vue3在语法上有些改变，但是思想都是一样的

这里选择将项目中的配置存储在package.json文件内，方便管理 

 最后会询问你是否要将以上的配置用作未来的项目文件，选择是的话会让你给这些配置起个名字，然后就会像最开始配置时那样，有一个选项框可以直接选择。这里就选择否，输入N

完成项目的参数配置之后，开始下载项目所需要的依赖： 

项目常见成功的页面： 

2. 运行项目 

在cmd中进入当前项目内，运行npm run serve命令即可运行刚创建的项目：

在浏览器输入所给网址http://localhost:8080/ 即可打开项目初始页面：

二、vue项目文件结构

首先要了解的是，Vue框架是一个基于标准HTML、CSS、JavaScript构建的、声明式的、组件化的编程模型，简答理解就是把网页中的各个部分用组件来进行构建，在代码层面上看就是编写一个个的.vue程序，各个组件可以相互调用（但都是基于根组件App.vue使用的）

创建的原始代码文件结构如下：

1. 各目录文件概述 

刚创建的Vue项目下主要有三个大的文件夹：

• node_modules：存放该项目所需要的各种依赖包
• public：存放一些公共的静态资源，图标、网页文件等
• src：存放源码的文件夹，该路径下会有两个文件App.vue和main.js，又会根据项目需求有许多不同的文件夹，常见的文件夹有：
  • assets：一般里面会有两个文件夹CSS和icon，分别存储css文件和图标
  • components：存储.vue文件，存储能够复用的一些vue组件
  • store：由依赖包Vuex自动创建，包含文件index.js，编写该文件对各组件进行状态管理、数据共享
  • router：只有一个文件index.js，借助依赖包router来配置路由
  • views：存放.vue文件，区别于components，views文件夹内主要是存放大组件，而后者主要用来存放一些可以复用的小组件
  • api、plugins、utils等接口、插件、工具文件夹，这个可以根据项目需要灵活创建，用来区别各个代码文件的作用。

2. main.js文件

项目的入口文件，也即项目的主文件。用到了模块化开发的思想，引入全局的一些东西，采用import的方式来导入各个模块来完成前端代码的组织

//原始的main.js文件
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

下面逐行解释原始的main.js文件：

import { createApp } from 'vue'   //从vue模块中导入createApp方法

import App from './App.vue'       //导入src目录下的App.vue组件，表示为App

createApp(App).mount('#app')      //调用createApp函数，将导入的组件App作为参数传入，并挂在（通过mount方法）到app这个标签上，这个标签位于public目录下的index.html文件内，这个index.html文件就是网页的home页面，这样组件App就渲染到了home页面中

3. App.vue文件

Vue项目的根组件，所有页面都是在App. vue下进行切换的

<!-- 原始的App.vue代码 -->
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

 .vue文件由三部分构成，分别是template区域（编写HTML代码，控制组件的外观）、script区域（编写JavaScript代码，控制组件的行为）、style区域（编写CSS代码，控制组件的样式）

这里主要解释一下script区域里的内容：

import HelloWorld from './components/HelloWorld.vue'       //导入components目录下的HelloWorld.vue文件，声明为组件HelloWorld

export default区域

• 将该区域的对象默认导出的意思，这样在别的组件中也可以使用导出的东西
• 默认导出的对象通常包含下面几个属性：
  • data：是一个函数，具体的数据通过return返回，可以是数组、对象或者某个变量，具体写法：

data() {
    return {
      //返回的数据
    }
}

• • computed：计算属性，用于监控自己定义的变量，处理相关数据并返回结果
  • methods：事件方法，向后台请求数据或传递数据，可以定义多个函数
  • watch：常用于监控vue实例，或监控父组件中data中数据改变的状况
  • components：引用的子组件在这里注册

4. package.json文件

项目目录中还有个package.json文件，这个文件内包含了当前项目所依赖的框架、包的版本信息，一般从Github克隆下来的项目不会包含node_modules这个文件夹，需要打开cmd，跳转到当前目录下运行命令：【npm install】，即可自动创建文件夹node_modules并将该项目所依赖的包下载到该文件内，这个下载过程依赖的就是package.json文件

如果在项目开发的过程中需要下载某个依赖包，记的确保package.json文件中有记录，一般情况下安装依赖包之后package.json文件会自动记录。

三、借助ElementPlus开发自定义组件

1. 安装ElementPlus

Vue2对应Element-UI，Vue3对应ElementPlus，因为我用的是Vue3的框架，所以需要安装ElementPlus。ElementPlus 官网链接

 打开cmd，跳转到项目文件夹，运行下面命令安装ElementPlus：

npm install element-plus --save

2. ElementPlus使用案例

在项目中创建vue文件

在src目录下创建文件夹views，用来存储大组件，在views目录下创建布局组件Layout.vue文件（如果是小组件则放在components目录下）

到ElementPlus官网复制组件源代码

按照需要，到ElementPlus官网选择合适的布局容器，复制这种布局的源码，可以看到源码只提供template部分，没有script和style部分，组件行为和样式需要我们自定义

 将源代码复制到Layout.vue文件内，我们可在此基础上根据需要自行修改，这里我给三部分添加了背景颜色以便区分：

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: rgb(240, 194, 194);">头部</el-header>

      <el-container>
        <el-aside width="200px" style="background-color: gray;">侧边栏</el-aside>
        <el-main style="background-color: rgb(102, 239, 139);">主内容</el-main>
      </el-container>
    </el-container>
  </div>
</template>

同时，也可以在该文件内添加script和style部分，来控制该组件的行为和样式，即对该组件进行自定义 

导入组件到根组件中并注册

删除HelloWorld组件以及根组件中的相关代码

然后在根组件App.vue文件的script部分，导入Layout组件：

import Layout from './views/Layout.vue';     //导入Layout组件

export default {
  name: 'App',
  components: {
    Layout,     //将Layout组件进行注册
  }
}

 先导入，后注册，这样Layout组件就可以作为标签在template部分进行使用，语法与HTML的标签使用方法一样：

<!-- 在App.vue文件中写入 -->
<template>
  <Layout></Layout>
</template>

然后在cmd中运行npm run serve命令即可看到引用的组件：

 当然，这个组件并没有填充整个页面，这个可以根据需要修改CSS代码进行调整。

以上就是利用ElementPlus包进行辅助开发的最基础的使用方法，而这只是刚刚开始，后面的绑定事件、插槽slot、路由嵌套等等未完待续...