Vue 项目结构和文件分析

您所在的位置：网站首页 › viewpager2使用按钮切换页面 › Vue 项目结构和文件分析

Vue 项目结构和文件分析

2023-05-26 22:12| 来源: 网络整理| 查看: 265

Vue 项目结构分析

项目文件结构,

分析

编辑

Vue 请求页面执行流程

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

路由切换

index.js

ElementUI 使用

安装 element-ui 组件库,

应用实例-Vue 项目引入 ElementUI

main.js

引入 element-ui 按钮组件

Axios

基本说明

学习文档

Axios 库文件

Axios 应用实例

注意

数据json

注意事项和细节说明

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 的 router, //完整写法是 router: router, 第二个 router 是 import router[这里] from './router' components: {App}, //完整写法是 components: { 'App':App } 因为名字相同可以省略 'App' template: '' //这里的 '' 的 App 就是上面 components 引入的组件的名字 }) 路由切换

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

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

{{ mes }} export default { name: "Hello", data() {//数据池 return { mes: "Hello, Mary~" } } } 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 官网:

element.eleme.cn/#/zh-CN

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

安装 element-ui 组件库,

cmd 下进入到项目，指令 npm i [email protected] , 这里指定了版本，

应用实例-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 的 router, //完整写法是 router: router, 第二个 router 是 import router[这里] from './router' components: {App}, //完整写法是 components: { 'App':App } 因为名字相同可以省略'App' template: '' //这里的 '' 的 App 就是上面 components 引入的组件的名字 }) 引入 element-ui 按钮组件

从文档拷贝即可

Hello, {{name}} 默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮

Axios 基本说明 axios 是独立于 vue 的一个项目，不是 Vue 的一部分 axios 通常和 Vue 一起使用，实现 Ajax 操作 Axios 是一个基于 promise 的 HTTP 库学习文档

javasoho.com/axios/

Axios 库文件

1、使用 axios 需要引入 axios 库文件

2、可以直接引入

【本文地址】

Vue 项目结构和文件分析

Vue 项目结构和文件分析

今日新闻

推荐新闻