vue3+vite2 初始配置 axios router vuex

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>

希望此文章對你有幫助