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')}]}
})

二、项目创建后下载必要依赖：

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.vue1: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');

使用方法：

 <!--图标-->
<el-icon><Setting />
</el-icon>

或者

// class="icon" 在style中设置图标大小 
<Setting class="icon"></Setting>

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 actionsconst 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 + requestUrltimeout: 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);}