vue2项目架构

一、创建项目

🍕🍕🍕全局安装vue脚手架

安装方式

npm install @vue/cli -g
cnpm install @vue/cli -g
yarn global add @vue/cli
🌭🌭版本查看
vue --version 目前4.x以上版本支持创建vue3项目
🍟版本升级命令
npm update -g @vue/cli
或者
yarn global upgrade --latest @vue/cli
🍔cli 创建项目
vue create 项目名称

vite 创建项目

npm create vite@latest
安装项目所需插件
yarn add vue-router@4
yarn add element-plus
yarn add vuex@next --save
安装项目开发依赖
yarn add sass -D
项目文件完善和分析
![在这里插入图片描述](https://img-blog.csdnimg.cn/ecede5de0f92462fba3bd4a000eb0ed1.png
路由库的使用
router/+index.js
首先导入

import Vue from 'vue';
import VueRouter from 'vue-router';
//分别引入路由组件
import Home from '@/pages/Home/index.vue';
import Search from '@/pages/Search/index.vue';
import Login from '@/pages/Login/index.vue';
import Register from '@/pages/Register/index.vue';
//先把VueRouter原型对象的push 先保存一份
let originPush = VueRouter.prototype.push;
//重写 VueRouter.prototype 的 push|replace 方法 
//第一个参数 告诉原型对象的push方法 往哪跳转(传递哪些参数)
VueRouter.prototype.push = function(location,resolve,reject){
  if(resolve && reject){
    //call || apply区别
    //相同点 都可以调用函数一次 并且可以篡改函数的上下文一次
    //不同点 call与apply传递参数不同 call传递参数用逗号隔开 而apply方法 传递数组
    originPush.call(this,location,resolve,reject);
  }else{
    originPush.call(this,location,()=>{},()=>{});
  }
}
Vue.use(VueRouter);
//配置路由 
const routes = [
  {
    path:'*',
    redirect:'/home',
  },
  {
    path: '/',
    component: Home,
    meta:{show:true}
  },
  {
    path:'/search/:abc?',
    name:'search',
    component:Search,
    meta:{show:true},
    // ----9.4路由组件能不能传递props数据?  可以
    // 第一种 布尔值写法 注意只有 params参数
    // props:true,
    // 第二种 对象写法 可以额外的给路由组件传递props数据 当然 需要相应组件接收 以上都不常用
    // props:{a:1,b:2}
    // 函数写法  可以把params query参数 通过props传递给路由组件
    // props:($route)=>{
    //   return {abc:$route.params.abc,k:$route.query.k}
    // }
  },
  {
    path:'/login',
    component:Login,
    meta:{show:false}
  },
  {
    path:'/register',
    component:Register,
    meta:{show:false}
  },
 
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   // component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  // }
]

const routers = new VueRouter({
  routes
})
export default routers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

请求封装

api/+request.js

//引入axios库 
import axios from "axios";
import nprogress from 'nprogress';// 请求进度条插件

//.start() :进度条开始 .done()：进度条结束
//引入进度条样式
import "nprogress/nprogress.css"
//request接收axios实例 进行配置
const request = axios.create({
   //配置对象 基础路径 发请求时 路径当中会出现api
   baseURL: "/api",
   timeout: 5000,// 请求超时 
});
//请求拦截器：在发请求之前 拦截器可以监测到 发出去之前做一些业务
request.interceptors.request.use((config) => {
   //config:配置对象参数 里面有一个属性很重要,headers请求头 可以放字段信息 进行判断权限为后期准备 
   console.log(config);
   //进度条开始 
   nprogress.start();
   return config;
});
//响应拦截器：服务器响应数据返回后 拦截器可以监测到 可以做一些业务
request.interceptors.response.use((res) => {
   //进度条结束
   nprogress.done();
   return res.data;
}, (error) => {
   return Promise.reject(new Error('fails'))
})
//默认对外暴露
export default request;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

main.js测试请求是否成功

//测试请求接口
 import { reqCategoryList } from '@/api';
 reqCategoryList();
1
2
3

此时会有跨域问题
vue.config.js文件中配置 devServer属性

devServer:{
    proxy:{
      '/api':{
        target:'http://xxx',
        // pathRewrite:{'^/api':''},//路径重写
      }
    }
  }
1
2
3
4
5
6
7
8

配置文件修改之后 项目需要重新启动

进度条 nprogress插件的使用
安装命令
cnpm i --save nprogress
/api/index.js 引入模块和对应的样式
import nprogress from ‘nprogress’;
//引入进度条样式 可以修改背景颜色
import “nprogress/nprogress.css”
提供了两个方法 .start() 进度条开始 .done()进度条结束
/api/request.js

request.interceptors.request.use((config) => {
   //config:配置对象参数 里面有一个属性很重要,headers请求头 可以放字段信息 进行判断权限为后期准备 
   console.log(config);
   //进度条开始 
   nprogress.start();
   return config;
});
//响应拦截器：服务器响应数据返回后 拦截器可以监测到 可以做一些业务
request.interceptors.response.use((res) => {
   //进度条结束
   nprogress.done();
   return res.data;
}, (error) => {
   return Promise.reject(new Error('fails'))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

vuex状态管理库(集中式管理项目中组件共用的数据)

用于复杂项目 组件较多

核心

• state
• mutations
• actions
• getters
• modules

既然是为解决管理各个组件的数据的插件 模块化优势支持

cnpm i --save vuex@3.6.2

基本使用

/src/+store/+index.js

import Vue from "vue"
import Vuex from "vues"
//先use一次 Vuex的Store方法 是一个构造函数可以去初始化仓库
Vue.use(Vuex)
//分别引入小仓库
import home from './home';
import search from './search';
//对外暴露Stroe类的一个实例 入口文件就可以引入加载了 
export default new Vuex.Store({
    //模块式开发方式存储
    modules: {
        home,
        search,
    }
})
//state:仓库存储数据的地方
const state = {};
//mutations：修改state的唯一手段
const mutations = {};
//actions：处理actions 可以做业务逻辑 处理异步
const actions = {};
//多用于简化仓库数据 让组件获取仓库的数据更加方便
const getters = {};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

main.js

//引入store仓库
import store from './store';
new Vue({
  //注册路由 信息 组件身上拥有了($route)和($router)属性 $route和$router
  router,
  //注册仓库 同理 组件实例身上会有 ($store)属性
  store,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9

仓库 定义的state数据 在组件中如何获取呢 使用辅助函数
import { mapState } from ‘vuex’;
如果组件很多 数据都放在一个模块中 后期会很难维护
对此，vuex提供了 模块化存储 modules:{}

总结

此时，vue2项目的前提准备工作已经准备完毕。路由的配置、axios的配置、request的封装、vuex的配置、仓库模块化的配置。