Vue 项目结构和执行流程分析和ElementUI-使用安装

😀前言

本片文章是vue的扩展篇包括了Vue 项目结构和执行流程分析和ElementUI-使用安装和具体代码分析

🏠个人主页：[尘觉主页](https://blog.csdn.net/apple_67445472?type=blog)

🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉😉

在csdn获奖荣誉: 🏆csdn城市之星2名
⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　💓Java全栈群星计划top前5
⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　🤗 端午大礼包获得者

💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教 先在次感谢啦😊

文章目录

😋Vue 项目结构和执行流程分析

😝项目文件结构,

 分析 

​编辑

😊 Vue 请求页面执行流程

Vue 项目简写造成理解困难，测试梳理疑惑

 路由切换

 index.js

😮 ElementUI 使用

💖安装 element-ui 组件库,

💗应用实例-Vue 项目引入 ElementUI

创建main.js 

引 入 element-ui 按钮组件

😄总结

---

😋Vue 项目结构和执行流程分析

😝项目文件结构,

直接拖文件夹到 IDEA 打开即可如果不知道怎么回事的可以去看我的上一篇博客

 分析 

😊 Vue 请求页面执行流程

当我们输入 http://localhost:8080 , 你看到这个页面时怎么来的，这里涉及到如下文件

 2. 分析执行流程

Vue 项目简写造成理解困难，测试梳理疑惑

1. 因为 Vue 默认生成的项目代码，使用了很多简写， 造成初学者理解困难，再给梳理一下

2. 整个页面渲染过程中，main.js是中心，也是连接各个组件，路由器的关键，分析

下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' //完整写法是 import App from './App.vue'
import router from './router'//完整写法是 import router from './router/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#app', //这里的#app 是挂到 index.html 的 <div id="app"></div>
    router, //完整写法是   router: router, 第二个 router 是 import router[这里] from './router'
    components: {App}, //完整写法是 components: { 'App':App } 因为名字相同可以省略 'App'
    template: '<App/>' //这里的 '<App/>' 的 App 就是上面 components 引入的组件的名字
})

 路由切换

1. 根据 Vue 请求执行流程，完成路由切换实例

2. 输入 http://localhost:8080/#/hell

<template>
  <div>
    <img src="@/assets/logo.png"/>
    <h1>{{ mes }}</h1>
  </div>
</template>

<script>
export default {
  name: "Hello",
  data() {//数据池
    return {
      mes: "Hello, Mary~"
    }
  }
}
</script>

<style scoped>

</style>

 index.js

// @ 表示的是src目录
import Hello from "@/components/Hello"

Vue.use(Router)

export default new Router({
  routes: [ //路由表
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { //配置的一组路由
      path: '/hello',
      name: 'Hello',
      component: Hello
    }

😮 ElementUI 使用

ElementUI 官网:

https://element.eleme.cn/#/zh-CN

一句话: ElementUI 是组件库，网站快速成型工具

💖安装 element-ui 组件库,

cmd 下进入到项目，指令 npm i element-ui@2.12.0 , 这里 指定了版本，

💗应用实例-Vue 项目引入 ElementUI

在 Vue2 项目中, 使用 ElementUI 组件, 如图

创建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' //完整写法是 import App from './App.vue' 
import router from './router'//完整写法是 import router from './router/index.js' 

//引入 element-ui 库/样式，并使用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app', //这里的#app 是挂到 index.html 的 <div id="app"></div>
  router, //完整写法是 router: router, 第二个 router 是 import router[这里] from './router' 
  components: {App}, //完整写法是 components: { 'App':App } 因为名字相同可以省略'App' 
  template: '<App/>' //这里的 '<App/>' 的 App 就是上面 components 引入的组件的名字
})

引 入 element-ui 按钮组件

从文档拷贝即可

<!-- 组件的三个部分 template script style -->
<!-- template：页面部分 -->
<template>
  <div>
    <h1>Hello, {{name}}</h1>
    <!-- element-ui 组件 -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

😄总结

本文详细的讲解了vue的项目结构分析和执行流程以及怎么安装 ElementUI和怎么去使用加上代码 演示使人更加理解

😁热门专栏推荐

想学习vue的可以看看这个 

java基础合集 

数据库合集 

redis合集 

nginx合集 

linux合集

等等等还有许多优秀的合集在主页等着大家的光顾感谢大家的支持

🤔欢迎大家加入我的社区 [尘觉社区](https://bbs.csdn.net/forums/58c2ca9b8de344c69384b471dd4bd744)

文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁
希望能和诸佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞