vue项目架构
技术栈：vue3、vue-router 、vuex(和pinia)、element plus 、axios、ts、sass
1、安装vue3 脚手架+ ts
vue create admin
2、分析目录结构
node_modules =>依赖包
public => 静态文件
src => 核心代码
assets => 静态方法
components => 公共组件
app.vue => 根组件
mian.ts =>入口文件
shims-vue.d=>对vue 组件进行支持
二、安装Element Plus组件库
1、安装
npm install element-plus --save
2、按需引入：添加 vue.config.ts => 报错了，没有效果
解决方法：自己写一个插件，按需导入要使用的组件 或 手动导入（这里选择手动导入）
步骤1：对象的形式（在scr新建一个文件夹useHooks.ts，再创建一个elementPlus.ts)
import { ElButton } from "element-plus";
import { ElInput } from "element-plus";
let arrs = [{ com: ElButton }, { com: ElInput }];
export let installPlus = {
install(app:any) {
//app 当前的vue 实例
arrs.forEach((item) => {
app.use(item.com);
});
},
};
//总结我们自己写 插件按需引入 ui组件库
//实现的步骤
//1 自己写插件 =>我会在 src文件夹下创建一个项目文件夹 useHooks，出来 element ui 插件
步骤2：在入口文件main.ts中导入，并引入Element Plus的css样式
import { createApp } from 'vue'
import App from './App.vue'
import {installPlus} from "./useHooks/ElementPlus" // 引入手动注册的ElementPlus
import 'element-plus/dist/index.css' // 引入element plus css
// 全局注册installPlus
let app=createApp(App) // 创建app实例对象
app.use(installPlus)
app.mount('#app') // 挂载到对应的位置
三：在项目中安装sass
npm install sass npm install sass-loader
sass-loader 是将scss文件转为css文件，因为浏览器只解析html、css、js
在style添加scss文件
四：处理全局样式
1、高度的继承
2、盒子模型
3、项目的公共样式
4、处理icon，阿里巴巴矢量图标库
1）在 src 目录下创建一个style文件夹 => 处理项目的样式 => 进行模块化（把其他的scss文件引入到index.scss文件中）
2） 在main.ts进行引入
import './style/index.scss'
五：封装axios请求
1、安装axios
npm install axios
2、在scr目录下创建一个文件夹https/index.js
3、封装axios请求，并添加请求拦截和响应拦截
4、添加nprogress，显示进度条(显示请求与响应）
import axios from "axios";
// 创建axios实例
let service=axios.create({
baseURL:'https://www.fastmock.site/mock/c005af6795f70b326c9eb6acd3bcb042/admin',
timeout:6000
})
// 创建请求拦截器
service.interceptors.request.use(
(config:any)=>{ //config 是发送请求的配置对象，是给后端服务器的
// 注意：发送请求给后端，想要让后端知道我这个请求有什么东西，都可以在这里进行配置。比如 1 让后端知道我这个接口是内部网页的发送请求，2 下载文件 或者是 上传图片等接口
return config
},
(err:any)=>{// 请求失败的回调
return Promise.reject(err); // axios底层代码通过 promise 和ajax
}
)
// 创建响应拦截
service.interceptors.response.use(
(response:any)=>{ // 响应成功的对象 =》 规定一些状态吗
return response.data
},
(err:any){ // 响应失败的回调
return Promise.reject(err)
}
)
export default service;
5、在scr目录下创建一个文件夹api，文件夹下创建login.ts实现页面请求一一对应
// 登录页面的接口
import service from '../index'
export function Login(data={}){
return service.post('/login',data);
}
六、路由的处理
1、项目安装路由
npm install vue-router
2、怎么在项目中使用路由？
步骤一：在src目录下创建一个文件夹router，创建index.ts
a：引入路由hooks：import {createRouter,createWebHashHistory} from 'vue-router'
b：创建路由实例：
// 路由主文件
// 1 引入路由 路由hooks
import {createRouter,createWebHashHistory} from 'vue-router'
/*
createRouter：创建路由实例
createWebHashHistory：选择路由模式
createWebHistory：历史模式
*/
// 创建路由表
// 1 引入组件
import Login from '@/views/Login/index.vue'
let routes:any=[
{
path:'/login',
component:Login
},
{
path:'/',
redirect:'login',
component:Login
}
{
path:'/home',
name:'首页',
component:()=>import('@/view/Home/index.vue')
}
]
// 创建路由实例 =VueRouter.createRouter => 返回值就是：路由实例对象
let router=createRouter({
history:createWebHashHistory(),
routes:routes,
})
// 让这个路由实例对象和 vue项目进行关联 ，在入口文件main.ts中进行注册
export default router;
步骤二：将上面的路由实力对象注册到入口文件main.ts中
作用：app.use(router)
创建 RouterView 和RouterLink
项目中的所有组件都可以访问到$router和$route
$router => 总路由实例对象,可以使用push,replace,go,back,forward...
$route => 当前路由对象,可以query,params,matched,path,fullpath...
在组合式API：const router = useRouter()
import { createApp } from 'vue'
import App from './App.vue'
// 引入路由实例
import router from './Route/index'
console.log(router,"router")
app.use(router); //为什么需要将路由对象实例，使用路由hooks在每一个路由分布中
// 如果不注册
// 1 不能使用 router 提高 两个全局组件 ，
// 2 不能在项目中，使用 vue -router 和vuex
app.mount('#app') // 挂载到对应的位置
标签：vue,项目,app,ts,import,router,路由,搭建 From： https://www.cnblogs.com/chccee/p/17038980.html