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);

}