vue3创建vite项目
一、创建vue3 vite项目：
命令行创建：npm create vite@latest vue3-tdly-demo -- --template vue
(1)先进入项目文件夹，cd vue3-tdly-demo
(2)之后执行， npm install
(3)最后运行，npm run dev
将main.js文件内容改成如下：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app');设置别名：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
// 添加别名
resolve:{
alias:[
{
find:"@",
replacement: path.resolve(__dirname,'src')
},
{
find:'components',
replacement: path.resolve(__dirname,'src/components')
}
]
}
})二、项目创建后下载必要依赖：
npm install @arcgis/core (ArcGIS 依赖)
1、router依赖
命令行：npm install vue-router@4 --save
在src文件夹下创建router文件夹，并在该文件夹下创建index.js文件，文件中引入以下内容：
import {createRouter, createWebHashHistory} from "vue-router";
// 制定路由规则
const routes = [
{
path:'/',
name:'main',
component: () => import("@/views/Main.vue"),
},
{
path:'/home',
name:'home',
component: () => import("@/views/home/Home.vue"),
}
];
/**创建路由 */
const router = createRouter({
// 设置路由模式
history: createWebHashHistory(),
routes,
});
export default router;在main.js主文件中引入以下内容：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');
注意：这是创建vue项目，不是vite项目
如果报错如下：
E:\VSWorkSpace\vue3-tdly-demo\src\views\home\home.vue
1:1 error Component name "home" should always be multi-word vue/multi-word-component-names解决方法：
vue.config.js 文件中修改如下添加标红代码：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})2、element-plus依赖
官网：https://element-plus.org/zh-CN/
命令行：npm install element-plus --save
在main.js主文件中引入以下内容：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');自动导入需要安装插件：
命令行：npm install -D unplugin-vue-components unplugin-auto-import
修改vite.config.js文件内容：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// element-plus自动导入
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
// 添加别名
resolve:{
alias:[
{
find:"@",
replacement: path.resolve(__dirname,'src')
},
{
find:'components',
replacement: path.resolve(__dirname,'src/components')
}
]
}
})
注意：
// 使用自动导入无需在main.js中引入如下文件
//import ElementPlus from 'element-plus';
//import 'element-plus/dist/index.css'
3、less依赖
命令行：
npm install less --save使用：
<style lang="less" scoped>
***
***
</style>
4、@element-plus/icons依赖
命令行：
npm install @element-plus/icons --save在main.js配置如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
// 使用自动导入无需在main.js中引入如下文件
//import ElementPlus from 'element-plus';
//import 'element-plus/dist/index.css'
//图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const app = createApp(App);
app.use(router)
//app.use(ElementPlus)
for(const [key,componemt] of Object.entries(ElementPlusIconsVue)){
app.component(key,componemt);
}
app.mount('#app');5、pinia依赖
官网：简介 | Pinia
命令行：npm install pinia -D
在main.js引入pinia:
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
// 使用自动导入无需在main.js中引入如下文件
//import ElementPlus from 'element-plus';
//import 'element-plus/dist/index.css'
//图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import {createPinia} from 'pinia'
const pinia = createPinia();
const app = createApp(App);
app.use(pinia)
app.use(router);
//app.use(ElementPlus)
for(const [key,componemt] of Object.entries(ElementPlusIconsVue)){
app.component(key,componemt);
};
app.mount('#app');src文件夹下新建stores文件夹，并在该文件夹下创建index.js文件，内容如下：
import {defineStore} from 'pinia';
import {ref} from "vue";
function initState(){
return {
// 根据需要进行属性的增加和修改
isCollapse:false,
}
}
export const useAllDataStore = defineStore("allData",() => {
// ref state属性
// computed getters
// function actions
const state = ref(initState());
return {
state,
};
});
使用方法：
（1）在*.vue中引入
import {useAllDataStore} from "@/stores"（2）创建
const store = useAllDataStore()（3）赋值使用
console.log("store",store.state.isCollapse)
function demoClick(){
store.state.isCollapse = !store.state.isCollapse
}6、axios依赖
官网：https://www.axios-http.cn/docs/intro
命令行：npm install axios -D
封装axios请求
在src文件夹下创建api文件夹，并在该文件夹中创建request.js文件，内容如下：
import axios from "axios";
import { ElMessage } from "element-plus";
// 1. 创建axios实例
const instance = axios.create({
baseURL: "http://jsonplaceholder.typicode.com",//请求的域名 url = baseURL + requestUrl
timeout: 5000,// 请求超时时间
// headers: { //设置请求头
// "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
// },
});
// 2. axios拦截器的使用
/** 需要拦截请求的原因
* 1.config中包含了某些不符合服务器要求的信息
* 2.发送网络请求的时候需要向用户展示一些加载中的图标
* 3.网站需要登录才能请求资源，也就是需要token才能请求资源
*/
// 2.1 添加请求拦截器
// 添加公共请求头、处理请求参数等
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config; //拦截器里一定要记得将拦截的结果处理后返回，否则无法进行数据获取
},
(err) => {
// 对请求错误做些什么
return Promise.reject(err); // 在请求错误的时候的逻辑处理
}
);
// 2.2 添加响应拦截器
// 修改响应信息，比如数据转换、错误处理等
instance.interceptors.response.use(
(res) => {
// 在请求成功后对响应数据做处理
// console.log(res.data);
if (res.status === 200) {
return res.data;
}
},
(err) => {
// 对响应错误做些什么
if(err.response.status){
switch (err.response.status) {
case 400:
// 处理错误信息，例如抛出错误信息提示，或者跳转页面等处理方式。
err.message = "错误请求";
break;
case 401:
err.message = "未授权，请重新登录";
break;
case 403:
err.message = "拒绝访问";
break;
case 404:
err.message = "请求错误,未找到该资源!!!!";
alert(err.message)
break;
case 405:
err.message = "请求方法未允许";
break;
case 408:
err.message = "请求超时";
break;
case 500:
err.message = "服务器端出错";
break;
case 501:
err.message = "网络未实现";
break;
case 502:
err.message = "网络错误";
break;
case 503:
err.message = "服务不可用";
break;
case 504:
err.message = "网络超时";
break;
case 505:
err.message = "http版本不支持该请求";
break;
default:
err.message = `连接错误${err.response.status}`;
}
}
ElMessage.error(err.message);
return Promise.reject(err); // 在响应错误的时候的逻辑处理
}
);
export default instance;在api文件下创建api.js,进行而出封装，内容如下：
import http from "./request.js";
export const getInfo = () =>{
return http({
url:"/posts",
method:"get"
});
}
export const getInfoDetail = (params)=>{
return http({
url:"/posts",
method:"get",
params
})
}
export const postInfo = () =>{
return http({
url:"/posts",
method:"post"
});
}使用方法：
在所需文件中引入import {getInfo,getInfoDetail,postInfo} from "@/api/api"
执行如下代码：
get();
// 异步请求
async function get(){
const allData = await getInfo();
console.log("allData",allData);
const data = await getInfoDetail({id:2});
console.log("data",data);
const postData = await postInfo();
console.log("postData",postData);
}
原文地址：https://blog.csdn.net/qq_19688207/article/details/140684009
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！