基于Vue-ElementUI项目启动运行分析

程序员阿红

已于 2022-06-11 08:42:41 修改

阅读量830

点赞数 2

分类专栏： # Vue学习记录文章标签： vue.js elementui 前端

于 2022-06-10 14:29:44 首次发布

本文链接：https://blog.csdn.net/qq_41239465/article/details/125220990

版权

Vue学习记录专栏收录该内容

4 篇文章 1 订阅

订阅专栏

基于Vue-ElementUI项目启动运行分析

📝 个人主页：程序员阿红🔥

🎉 支持我：点赞👍收藏⭐️留言📝

📣 系列专栏：Vue基础知识总结🍁

1. 项目结构介绍

通过VScode我们能看到项目整体结构如下：

下面我们介绍一下项目整体结构

2. 项目组件分析

2.1 什么是组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树：

2.2 程序入口

入口html：public/index.html
入口js脚本：src/main.js
顶层组件：src/App.vue
路由：src/router/index.js

main.js 中引入了App.vue和 router/index.js，根据路由配置，App.vue中的路由出口会显示相应的页面组件的内容。

之前我们前后端没有分离时，所有项目的页面都是独立存在的，但是现在前后端分离，流行起来的即为SPA—>单页面Web应用（single page web application，SPA）

就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新，举个例子:

整个body的内容从登录组件变成了欢迎页组件, 从视觉上感受页面已经进行了跳转。但实际上，页面只是随着用户操作，实现了局部内容更新,依然还是在index.html 页面中。

单页面应用的好处:

用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

所以，前后端分离表示前端项目只有也页面，也就是我们的单页面，这个单页面就是public目录下的index.html

1. 入口html：

public/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

可以看出，在<body>标签下只有一个 <div id=“app”></div>

，通过我们自己定义组件，通过router-view路由访问到自己指定的组件。

2. 顶层组件：

src/App.vue：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

之前我们说整个项目都是一个组件树，而这个组件数根节点就是我们的App节点，我们自定义了一个组件app并将其导出，且看下面

3. 入口js脚本:

src/main.js:

import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

我们通过入口脚本main.js引入我们所需要的依赖。这个main.js好比就是我们的后端项目的pom.xml，可以引入项目所需依赖。

可以看到，通过main.js我们引入了所需要的组件，但是我们Vue和element怎么结合起来呢？请看下图：

针对App.vue下的<router-view /> 说明：

根据访问路径，渲染路径匹配到的组件,而他是怎么展示我们的页面的呢？

就是在router目录下的index.js下定义的，好比我们在登录页面下,通过http://localhost:9528/#/login就能指定到登录页面。

最后给大家推荐一个小工具，便于前端调试和开发，那就是vue-devtools工具，安装完后，运行前端项目，在浏览器F12，检查一下，就能看到如下页面：

我们同样也能看到所有页面都是类似一颗树一样，并且我们能看到根节点就是App,正如我们上面所说的。

💖💖💖 完结撒花

💖💖💖 路漫漫其修远兮，吾将上下而求索

💖💖💖 写作不易，如果您觉得写的不错，欢迎给博主点赞、收藏、评论、收藏来一波~让博主更有动力吧

程序员阿红

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Vue-ElementUI项目启动运行分析

之前我们前后端没有分离时，所有项目的页面都是独立存在的，但是现在前后端分离，流行起来的即为SPA—>单页面Web应用（single page web application，SPA）就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。.........
复制链接

扫一扫