vite+vue3实用依赖安装
1. ECharts
引入
通过npm安装echarts
npm install echarts@4.9.0 --save
在main.js中引入echarts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import * as echarts from "echarts"; //引入
const app = createApp(App);
// app.config.productionTip = false;
app.config.globalProperties.$echarts = echarts; //添加到全局
app.mount('#app')
注意：全局挂载开发不会有问题，但是打包部署到nginx上会报错，因此正常使用通常选择两种方式
组件中引入在App.vue中引入，子组件就可以直接使用(自己测试发现好像不能这样)
2. Axios
引入
通过npm安装axios
npm install axios --save
封装
通常开发中，axios不会直接使用，而是先封装一下
在根目录创建.env.development和.env.production文件
VITE_APP_TITLE = "xhx"
# 端口号
VITE_APP_PORT = "3000"
# 请求接口
VITE_APP_DEV_URL = "不同环境对应的请求地址"
# 前缀
VITE_APP_BASE_API = "/api"
在src目录下创建request文件夹，并在request文件夹下创建index.js(.ts)文件
// index.ts
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
// 创建实例
const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
timeout: 5000,
});
// 添加请求拦截器
axiosInstance.interceptors.request.use(function(config: AxiosRequestConfig) {
// 在发送请求前做的操作
return config;
}, function(error) {
// 对请求错误做的操作
return Promise.reject(error);
})
// 添加响应拦截器
axiosInstance.interceptors.response.use(function(response: AxiosResponse) {
// 对2xx的状态码触发该函数
// 对响应做的操作
return response;
}, function(error) {
// 对超出2xx范围的状态码触发该函数
// 对响应错误做的操作
return Promise.reject(error);
})
export default axiosInstance;
然后在src目录下新建api文件夹，并在其下面创建index.js(.ts)文件
// index.ts
import request from '../request'
// 示例
export const login = (data) => {
return request({
url: '/login',
method: 'post',
data
})
}
3. Sass
引入
npm install sass --save-dev
全局样式设置
在assets文件夹下创建scss目录，添加globalMixin.scss和globalVar.scss文件
下面是一个示例
//globalVar.scss
$bg-color: #1989fa;
//globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
-webkit-box-shadow: 0px 0px $bulr $color;
-moz-box-shadow: 0px 0px $bulr $color;
box-shadow: 0px 0px $bulr $color;
}
全局引入
在vite.config.js文件中，添加配置信息
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
//配置sass
css: {
preprocessorOptions: {
scss: {
// '@import "assets/scss/globalVar.scss";@import "assets/scss/globalMixin.scss";'
additionalData: '@import "../assets/scss/globalVar.scss";@import "../assets/scss/globalMixin.scss";'
}
}
},
})
然后就可以在样式中使用了
.box {
width: 200px;
height: 200px;
background-color: $bg-color;
@include box-shadow;
}
4. tailwindcss
引入
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
创建配置文件
输入下面命令生成tailwind.config.js和postcss.config.js文件(如果是vite项目中生成的后缀名为.cjs)
npx tailwindcss init -p
vite中生成的tailwind.config.cjs内容如下：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx,vue}", /** 生成后需要加上这句，不然会报错 */
],
theme: {
extend: {},
},
plugins: [],
}
全局引入
在src目录下创建index.css文件
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
在main.js中引入
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css' //引入tailwind基础样式
createApp(App).mount('#app')
5. router
引入
npm install vue-router@4
配置路由
在src目录下新建文件夹router，并在该文件夹下创建index.js(.ts)文件
// index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'
const routes: Array
{
path: '/',
name: 'HelloWorld',
component:()=>import('@/components/HelloWorld.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
在main.js(.ts)中挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' // 引入路由配置
createApp(App).use(router).mount('#app')
修改App.vue管理路由
6. element-plus
引入
npm install element-plus --save
在main.js(.ts)中引入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus' // 引入element-plus
import 'element-plus/dist/index.css' // 引入element-plus的样式
createApp(App).use(router).use(ElementPlus).mount('#app')
7. pinia
引入
npm install pinia
全局引入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from "pinia"; // 引入pinia
const pinia = createPinia();
createApp(App).use(pinia).mount('#app')
配置store
在src目录下创建store文件夹，再在文件夹下面创建对应模块的文件
//src/store/user.ts
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
// 其它配置项
state: () => {
return {
name: "李华",
age: 25,
sex: "男",
}
},
})
相关链接
发表评论