Vite2.0 (嘗鮮，絕)

前沿

最近前端太火的vite，啊，這個人不簡單，而且太魔鬼，瘋狂更新版本

熬個夜，立馬寫DEMO 出來，啊還是有點東西的呀 

 

啊，趁着空閑時間，怎么能放過這個 牛逼的 vite ，啊，就是一個字:  快快快快快，

這簡直嘆為觀止，和webpack啊這速度，啊這，要不要這么快，無解

 

安裝vite

npm init @vitejs/app

然后選中你想要的項目 

　

 

 我選擇了vue ,當然你也可以這樣選擇

npm init @vitejs/app my-vue-app --template vue

 

 

 你會看到這樣的項目目錄，其實也就是我們常用的vue 目錄，

配置文件都存放一個文件，叫做vite.config.js

里面的內容；

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

然后運行： 

npm run dev

你會看到： 眨眼之間就運行了，

 

　

 

 

啊 牛逼 ，接着你安裝 因為使用的Vue3.0,所以要使用Element-ui的話就必須要使

npm install element-plus --sav然后在入口文件main.js中引入相應的庫

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

然后將ElementPlus掛載到Vue的原型上,並將主題的大小設置為 small

createApp(App).use(ElementPlus,{size: 'small'}).mount('#app')

找到HelloWorld.vue組件， 添加一行代碼

  <el-button type="primary">點擊我呀</el-button>

集成vue-router

安裝vue-router 這里注意一下，一點要安裝vue-router的4.x版本，要不然無法和Vue3.x搭配使用。

npm install vue-router@4 --save

然后

創建  /src/router/index.js 寫入以下內容

 

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

const router = new createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            redirect:'/home'
        },
        {
            path:'/home',
            component:() => import('../view/Home.vue')
        },
    {
            path:'/user',
            component:() => import('../view/Users.vue')
        },
    ]
})

router.beforeEach((to,from,next) => {
    console.log(to,from,111);
    next();
})

export default router;

創建了router對象，是hash模式的路徑， 主要配置了二個路徑， 分別是

• /home 指向 /src/view/Homme.vue
• /user 指向 /src/view/User.vue

修改 App.vue的內容

<template>
   <div id='nav'>
    <router-link class="link" to='/home'>Home</router-link> |
    <router-link class="link" to='/user'>User </router-link>
  </div>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
  <router-view></router-view>
</template>

你會看到

 

 修改vite.js 文件在 vite.config.js中配置 將請求地址

 

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://zzcmstest.datayi.cn/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      },
    },
  },
})

 然后 你會發現 修改這個請求地址不需要 重新運行 npm run dev ，啊真的太方便了

安裝axios

npm i axios --save

 

然后創建 src/api/http.js, 內容如下

import axios from "axios";

var service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  responseType: "json",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    "token": "adminc1eb838d6c2645fca5e04a868d077c50"
    // Authorization:
    //   "Bearer eyJrIjoiZ1BkdjFuVWhpVFJYVDFnNlI4aWVkNjloM3hGSDRUbXkiLCJuIjoidGVzdCIsImlkIjoxfQ=="
  }
});

// 添加請求攔截器
service.interceptors.request.use(
  function(config) {
    // 在發送請求之前做些什么
    return config;
  },
  function(error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應攔截器
service.interceptors.response.use(
  function(response) {
    // 對響應數據做點什么
    return response.data;
  },
  function(error) {
    // 對響應錯誤做點什么
    return Promise.reject(error);
  }
);
export default service;

 

 

然后創建一個文件 請求文件api/article文件

 

import fetch from '../api/http'

export function getUser (data) {
  return fetch({
    url: '/articleApi/getArticlePageListNew',
    method: 'post',
    data: data
  })
}

 在你的user 頁面上書寫代碼 ：OK

<template><el-form-item>
  <el-button type="primary" @click="onSubmit">點擊</el-button>
</el-form-item>

<el-row>
  <el-col :span="12" :offset="6" >
    <el-table :data="state.tableData" style="width: 100%" v-loading="state.loading">
      <el-table-column prop="title" label="文章名稱" width="180"></el-table-column>
      <el-table-column prop="articleTypeString" label="分類" width="180"></el-table-column>
      <el-table-column prop="createTimeString" label="發布日期"></el-table-column>
    </el-table>
  </el-col>
</el-row>

</template>

<script setup>
import { getArticle } from '../api/article'
import { reactive, } from 'vue'

const state = reactive({
  loading:false,
  tableData: []
})

const onSubmit = () => {
  state.loading = true;
  let param = {
    articleType: 1,
    hallId: "cacf47805e17446cadd4efd7d505d3b1",
    page: 1,
    pageSize: 10,
    status: null,
    title: "",
  }
  getArticle(param).then(res => {
    state.loading = false
    state.tableData = res.data.list
    console.log(state.tableData)
  })
}
</script>

 

下面呢就出現這樣的頁面

 

 

 這個是整體的項目目錄：

 

 

就真的體驗不一般， 感受到了vite2.0的厲害，絕了，后面可以用vite2.0更新項目了

果然知識是學不完的， 繼續加油加油