😀前言
本片文章是vue的扩展篇包括了Vue 项目结构和执行流程分析和ElementUI-使用安装和具体代码分析
🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉😉
😋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 官网:
一句话: 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和怎么去使用加上代码 演示使人更加理解
文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁
希望能和诸佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞
