1. src目录
2. 配置别名路径联想提示
步骤:
1)在项目的根目录下新增jsconfig.json文件
2)添加json格式的配置项
3. 引入 elementPlus
步骤:
1)安装elementPlus和自动导入插件
npm i elementPlus
npm install -D unplugin-vue-components unplugin-auto-import
2)配置自动按需导入
// 引入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
// 配置插件
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
})
3)测试组件
在App.vue中测试
<template>
<el-button type="primary">i am button</el-button>
</template>
4.elementPlus主题定制
步骤:
1)安装sass
基于vite的项目默认不支持css预处理器,需要开发者单独安装
npm i sass -D
2)准备定制化的样式文件
在styles文件夹里创建element文件,里面创建index.scss文件,里面引入如下的样式
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
// 主色
'base': #27ba9b,
),
'success': (
// 成功色
'base': #1dc779,
),
'warning': (
// 警告色
'base': #ffb302,
),
'danger': (
// 危险色
'base': #e26237,
),
'error': (
// 错误色
'base': #cf4444,
),
)
)
3)通知Element采用scss语言,然后导入定制的scss文件覆盖
5. axios基础配置
步骤:
1)安装axios
npm i axios
2)配置基础实例(统一接口配置)
包含接口的基地址,接口超时时间,请求拦截器和响应拦截器
在utils文件夹下创建http.js
//axios基础的封装
import axios from 'axios'
// 创建axios实例
const httpInstance = axios.create({
baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
timeout: 5000
})
// axios请求拦截器
httpInstance.interceptors.request.use(config => {
return config
}, e => Promise.reject(e))
// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
return Promise.reject(e)
})
export default httpInstance
3)封装请求函数并测试
在apis文件夹下创建textAPI.js
import httpInstance from '@/utils/http'
export function getCategory(){
return httpInstance({url:'home/category/head'})
}
6. 项目的路由设计
路由设计原则:找页面的切换方式,如果是整体切换,则为一级路由,如果是在一级路由的内部进行的内容切换,则为二级路由。
第一步:先设计一级路由(首页Layout和登录页Login)
步骤:
1)在views文件夹下创建各页面
//src/views/Layout
<template>
<div>Layout</div>
</template>
//src/views/Login
<template>
<div>Login</div>
</template>
2)在router文件夹下进行路由配置
//src/router/index.js
// createRouter:创建router实例对象
// createWebHistory:创建history模式的路由
import { createRouter, createWebHistory } from 'vue-router'
// 因为使用vite,所以最好把路径写全
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path:'/',
component:Layout,
},
{
path:'/login',
component:Login
}
]
})
export default router
3)书写一级路由出口
//App.vue
<template>
<!-- 一级路由出口组件 -->
<RouterView></RouterView>
</template>
第二步:设计二级路由(分类页Category和默认Home页)
分类页和Home都是首页中进行切换,所以是首页的子路由
步骤:
1)和前面一样先创建组件
//src/views/Home
<template>
<div>Home</div>
</template>
//src/views/Category
<template>
<div>Category</div>
</template>
2)配置路由
//src/router/index.js
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path:'/',
component:Layout,
children:[
{
path:'',//表示默认页
component:Home
},
{
path:'category',
component:Category
}
]
},
{
path:'/login',
component:Login
}
]
})
export default router
3)在首页Layout里面书写二级路由出口
//src/views/Layout
<template>
<RouterView />
</template>
7. scss文件的自动导入
在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中。
正常组件中使用,需要
先导 入scss文件,再使用内部的变量
,比较繁琐。
自动导入
可以免去手动导入的步骤,直接使用内部的变量。
步骤:
1)创建var.scss
//src/styles/var.scss
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;
2)在vite.config.js中配置自动导入