vite+vue3+vuex+element-plus项目搭建基础

npm create vite创建项目
cd 项目路径，进入项目
npm install下载依赖
npm run dev启动项目

main.js是入口文件，所有的执行必须经过main.js
app.vue根组件实例，挂载在index.html上

每一个.vue组件都有三个顶层，template、script、style
每一个组件中的变量，类名都是互不影响的，所以可以重复使用

npm i axios下载axios请求工具
src下创建service文件夹，axios.js文件
封装axios

import axios from 'axios'

import store from '@/store/index.js'

//设置不同开发环境路径
if (process.env.NODE_ENV == 'development') {//开发环境下，默认地址
  axios.defaults.baseURL = 'http://ludir.cn:8888/api/private/v1/'
} else if (process.env.NODE_ENV == 'debug') {//测试环境下，默认地址
  axios.defaults.baseURL = 'https://www.ceshi.com'
} else if (process.env.NODE_ENV == 'production') {//线上环境下，默认地址
  axios.defaults.baseURL = 'https://www.production.com'
}

//设置请求超时时间
axios.defaults.timeout = 5000
//设置post请求响应头
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-from-urlencoded;charset=UTF-8';

//添加请求拦截器
axios.interceptors.request.use(function (config) {
  //获取token
  let myToken = store.state.token
  //如果存在token，设置进响应头，Authorization是后端给的字段
  if(myToken){
    config.headers['Authorization']=myToken
  }
  
  return config //这里必须return
}, function (error) {
  //对错误做处理
  return Promise.reject(error);
})

//添加响应拦截器
axios.interceptors.response.use(function (res) {
  //响应成功时，处理
  return res.data
}, function (error) {
  //状态码超出200的就会触发这里的函数
  return Promise.reject(error)
})

//封装get，post.delete.put请求并导出
export const get = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(res => resolve(res)).catch(err => reject(err.data))
  })
}

export const post = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(res => resolve(res)).catch(err => reject(err.data))
  })
}
export const deletes = (url, params)=>{
  return new Promise((resolve, reject) => {
    axios.delete(url, {params}).then(res => resolve(res)).catch(err => reject(err.data))
  })
}
export const put = (url, params)=>{
  return new Promise((resolve, reject) => {
    axios.put(url, params).then(res => resolve(res)).catch(err => reject(err.data))
  })
}



export default axios

src下创建api文件夹，这里放各页面的接口文件
下载一个重置默认样式的文件 npm i normalize
安装组件框架，这里用element-plus
安装路由，npm i vue-router
main.js中配置

import { createApp } from 'vue'

import App from './App.vue'
import router from './router/router'

import 'normalize.css'//引入一个重置默认样式的css

import 'element-plus/dist/index.css'//引入element-plus样式
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'//中文显示，比如分页功能的英文改成中文
createApp(App).use(router).use(store).use(ElementPlus,{locale: zhCn}).mount('#app')

安装element按需引入的插件，npm install -D unplugin-vue-components unplugin-auto-import
在vite.config.js中配置element按需引入，和@路径别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'

//配置element
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(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),],
  //配置路径别名
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'./src')
    }
  }
})

安装vuex，npm i vuex
src下创建一个store文件夹，index.js文件
配置vuex

import { createStore } from 'vuex'
//这个插件用于自动把state数据存储到localStorage，需要先npm安装
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  state: {
    token: '',
    username:'',
  },
  mutations: {
    
  },
  actions: {

  },
  getters: {},
  //设置自动存储localStorage
  plugins: [createPersistedState({
    storage: window.localStorage
  })]
})

export default store

在main.js中引入router

import router from './router/router'

.use(router)

在App.vue中放一个路由占位符

<router-view></router-view>

配置路由
src创建一个router文件夹，router.js文件

import { createRouter, createWebHashHistory} from 'vue-router'
import Login from '@/layout/login/login.vue'

const router = createRouter({
  history:createWebHashHistory(),
  routes:[
    {
      path:'/login',
      name:'login',
      component:Login
    }    
  ]
})

//导航守卫
router.beforeEach((to, from, next) => {
  let data = JSON.parse(window.localStorage.getItem('vuex'))
  if (data && data.token) {
    next()
  } else {
    if (to.path != '/login') {
      next('/login')
    } else {
      next()
    }
  }
})

export default router

src下创建views文件夹，这里就放主要的页面，写一个login页
到这里就差不多创建完项目了，剩下的就是写页面，写方法，写api请求，调接口
下面是项目整体文件夹的基本规范描述，以上没提到的可以后面边写边加，基本上所有的操作都在src目录下进行了