一、创建项目
🍕🍕🍕全局安装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
项目文件完善和分析
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
请求封装
api/+request.js
//引入axios库
import axios from "axios";
import nprogress from 'nprogress';// 请求进度条插件//.start() :进度条开始 .done()：进度条结束
//引入进度条样式
import "nprogress/nprogress.css"
//request接收axios实例 进行配置
const request = axios.create({//配置对象 基础路径 发请求时 路径当中会出现apibaseURL: "/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;
main.js测试请求是否成功
//测试请求接口import { reqCategoryList } from '@/api';reqCategoryList();
此时会有跨域问题
vue.config.js文件中配置 devServer属性
devServer:{proxy:{'/api':{target:'http://xxx',// pathRewrite:{'^/api':''},//路径重写}}}
配置文件修改之后 项目需要重新启动
进度条 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'))
})
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 = {};
main.js
//引入store仓库
import store from './store';
new Vue({//注册路由 信息 组件身上拥有了($route)和($router)属性 $route和$routerrouter,//注册仓库 同理 组件实例身上会有 ($store)属性store,render: h => h(App)
}).$mount('#app')
仓库 定义的state数据 在组件中如何获取呢 使用辅助函数
import { mapState } from ‘vuex’;
如果组件很多 数据都放在一个模块中 后期会很难维护
对此，vuex提供了 模块化存储 modules:{}
总结
此时，vue2项目的前提准备工作已经准备完毕。路由的配置、axios的配置、request的封装、vuex的配置、仓库模块化的配置。
