vite2 + vue3搭建项目

vite

官网

npm初始化项目

npm init @vitejs/app

命名项目后
在command line options里选择template，这里选择了vue框架

然后根据提示

 Now run:

  cd vitetest1
  npm install
  npm run dev

run dev便可以编译出开发环境下的初始化文件

路由插件router

1. 安装 在这里安装的router4

npm install vue-router@4

2. 新建一个 关于router的js文件

//从VueRouter中导入需要的函数模块
import {createRouter, createWebHashHistory } from 'vue-router'
//引入要使用的组件
import Login from '../views/login.vue'
const routes = [
  { path: '/', component: Login}
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

//导出router
export default router

3. 在main.js 中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

4. 使用
   在app.vue中加入路由占位符

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

运行

可以看到路由生效

安装vuex

1. 安装vuex

   npm install vuex@next --save

2. 新建store文件夹 在文件夹下index.js中写入

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++ 
    }
  }
})

//导出store
export default store

在main.js中引入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store'

createApp(App)
 .use(router)
 .use(store)
 .mount('#app')

使用：

 created() {
    this.$store.commit("increment")
    console.log(this.$store.state.count)
  },

在这个过程中出现了小插曲，因为我之前的代码风格都是无分号的，结果我一格式化，他竟然出现了分号！好难受，经过一番周折和测试，发现是vscode的vetur插件格式化时会自动加上分号，可以通过修改格式化文档方式，改为prettier（前提是prettier格式化工具已经修改配置为无分号）

运行成功

安装element-plus

1. 安装

npm install element-plus --save

2. 引入文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

createApp(App)
 .use(router)
 .use(store)
 .use(ElementPlus)
 .mount('#app')

3. 使用

<template>
  <div>
    <el-button>123</el-button>
    <router-view></router-view>
  </div>
</template>

4. 运行成功
   

axios

1. 安装

npm install axios

引入及封装：

import axios from "axios"
import { ElLoading, ElNotification, ElMessage } from "element-plus"

const baseURL = "ip"

const api = axios.create({
  baseURL,
  timeout: 8000,
})
let loading = {}
api.interceptors.request.use(
  (config) => {
    loading = ElLoading.service({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    })
    const token = localStorage.getItem("token")
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  (error) => {
    return Promise.reject(error) //请求错误处理
  }
)

api.interceptors.response.use(
  (res) => {
    loading.close()
    //console.log(res.data.body)
    const { code, message } = res.data.body.error
    if (code == 0) {
      ElNotification({
        type: "success",
        message: message,
        duration: 1000,
      })
      return res.data.body
    } else {
      ElMessage.error(message)
      return { data: "error" }
    }
  },
  (error) => {
    loading.close()
    ElMessage.error("网络请求发生错误，请稍后再试")
    return Promise.reject(error)
  }
)

export default {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      api
        .get(url, {
          params,
        })
        .then((res) => {
          resolve(res.data)
        })

        .catch((err) => {
          reject(err)
        })
    })
  },
  post(url, params = {}) {
    return new Promise((resolve, reject) => {
      api
        .post(url, params)
        .then((res) => {
          resolve(res.data)
        })

        .catch((err) => {
          reject(err)
        })
    })
  },
}

这个是我自己结合项目具体需要封装的请求，可以根据需要自行修改
然后在具体api上引用：

import $http from "../api"

export const create = (data) => {
  return $http.post("/projectApplication/admin/create", data)
}

导入：

import { create } from "../../apis/audit/create"

 createItem() {
      let content = {
        paSimpleForm: {
          projectName: this.itemForm.projectName,
          schoolName: this.itemForm.schoolName,
        },
        schoolId: this.itemForm.schoolId,
      }
      console.log(content)
      create(content).then((res) => {
        console.log(res)
      })
    },

至此，项目的基本搭建工作完成，页面的路由，状态管理，网络请求，页面组件都可以依赖上述完成