vue3+vite2 初始配置 axios router vuex element-plus

vite
*注意不支持ie11

1,创建项目

npm init @vitejs/app

命名：

选择你需要的框架这里选择vue

选择语言 这里用javaScript或者TypeScript都可以

这样一个vite2+vue3项目就创建完成了

cd 项目目录
npm install npm run dev

然后成功启动，几乎是秒开程序

浏览器运行localhost:3000/

#配置路由(下载router4版本)

npm install vue-router@4 -s
npm i

src/router/index.js

import {createRouter,createWebHashHistory} from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: "/",
            name: "index",
            component: () => import( "@/views/index/index"),
        },
    ]
})

export default router;

main.js

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

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

配置vuex

npm install vuex@next --save
npm i

src/store/index.js

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state : {
      count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
     actions: {},
    modules: {}
})
export default store

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(router).use(store)
app.mount('#app')

vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  alias: {
    // 配置路径别名
    '@': path.resolve(__dirname, 'src'),
    'view': path.resolve(__dirname, 'src/view'),
    'com': path.resolve(__dirname, 'src/components'),
    'api': path.resolve(__dirname, 'src/api'),
    'utils': path.resolve(__dirname, 'src/utils'),
  },
  // 引入第三方的配置
  // optimizeDeps: {
  //   include: ["echarts", "axios", ]
  // },
  plugins: [vue()],
  // hostname: '0.0.0.0',
  // port: 8090,
  // 是否自动在浏览器打开
  // open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
   base: './',
   /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'dist',
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      },
    },
  }
})

axios

npm install axios -S
npm i

utils/axios.js

import axios from 'axios'
import router from '@/router/index'
import { localGet } from './index'
import config from '~/config'


// 这边由于后端没有区分测试和正式，姑且都写成一个接口。
axios.defaults.baseURL = config[import.meta.env.MODE].baseUrl
// 携带 cookie，对目前的项目没有什么作用，因为我们是 token 鉴权
axios.defaults.withCredentials = true
// 请求头，headers 信息
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localGet('token') || ''
// 默认 post 请求，使用 application/json 形式
axios.defaults.headers.post['Content-Type'] = 'application/json'

// 请求拦截器，内部根据返回值，重新组装，统一管理。
axios.interceptors.response.use(res => {
  if (typeof res.data !== 'object') {
    this.$message.error('服务端异常！')
    return Promise.reject(res)
  }
  if (res.data.resultCode != 200) {
    if (res.data.message)  this.$message.error(res.data.message)
    if (res.data.resultCode == 419) {
      router.push({ path: '/login' })
    }
    return Promise.reject(res.data)
  }

  return res.data.data
})

export default axios

vue3写法
变量声明改变，不用在创建data函数，使用reactive声明

eg:

<template>
  <el-card class="account-container">
    <!-- 渲染数据 -->
    <div class="title" @click="get">{{text}}</div>
  </el-card>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue"; //引入vue
import axios from "@/utils/axios"; //axios请求地址
export default {
  name: "Introduce",
  setup() {
    //定义字段
    const state = reactive({
      text: "标题",
      message: "我是一条消息",
    });
    // 获取列表
    const getCarousels = () => {
      state.loading = true;
      axios
        .post("/user/order/showList", {
          params: {},
        })
        .then((res) => {
          console.log(res);
        });
    };
    //事件
    const get = () => {
      console.log(123);
      state.text = "123";
    };
    //页面挂载
    onMounted(() => {
      getCarousels();
    });
    //将定义的数据全部返回给setup函数
    return {
      get,
      ...toRefs(state),
    };
  },
};
</script>
<style scoped>
/* 样式 */
.title {
  font-size: 50px;
}
</style>

其他写法就不在这里一一列出了 其他文章里有vue3写法介绍

vuex使用

import {useStore} from 'vuex'
const store=useStore()

//在使用的地方直接使用 相当于  vue2的this.store
store.state.collapse;
store.commit("hadndleCollapse", !collapse);

computed 计算属性使用

import {computed} from 'vue'
setup(){
    let username=computed(()=>{
    let myname = localStorage.getItem("ms_username");
        return myname ? myname : name.value;
    })
}

相当于vue2

computed:{
    username(){
        let myname = localStorage.getItem("ms_username");
        return myname ? myname : name.value;
    }
}

router 使用

import {useRouter} from 'vue-router'
let router=useRouter()
//router 就相当于this.router

watch监听

import {watch} from 'vue'
watch(
    ()=>state.count,//要监听的值
    (new,old)=>{
        console.log(new)
        console.log(old)
    }
)

多个监听

watch(
    ()=>[state.count,state.title],//要监听的值
    ([newcount,oldcount],[newtitle,oldtitle])=>{
    }
)

onBeforeRouteUpdate 监听路由 watch监听路由已被废弃

onBeforeRouteUpdate((to,from)=>{
            console.log(to,from)
        })

Teleport 将子节点渲染到存在于父组件以外的 DOM 节点

  <button @click="showToast" class="btn">打开 toast</button>
  <!-- to 属性就是目标位置 -->
  <teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
  </teleport>

希望此文章对你有帮助