Vite小试（二）

Lmuy
222 阅读2分钟

之前就听说vite就是一个字快，但是一直没有去研究一下，刚好最近vite升级到了2.0已经比较稳定并且有时间那就特地来研究研究vite，顺便来记录一下碰到的问题。 书接上文：Vite小试（一）~

3.Vite开发

在我们安装完成Vite之后，就可以直接运行npm install、npm run dev将项目跑起来了，这个过程就能很直观的感受到vite的快了。由于Vite搭配vue3.0使用所以接下来会涉及到vue3.0的一些知识点，那么接下来就让我们用vue3.0来开发一个小demo吧，我会把我如何做的以及碰到的问题都记录下来。

  • 引入UI框架element-ui plus

// 安装element-plus
npm install element-plus --save

// main.ts文件中使用element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)

  • 引入vue-router

引入路由，这里因为使用的是vue3.0，所以我们使用vue-router4的版本。接下里就是创建路由文件，增加我们demo的路由。
注意：这里要在main.ts文件中引入vue-router，我一开始写路由的时候就忘记了，所以大家可以在引入路由的时候先在main.ts中引入，要不然还要调试才能发现问题。下面是router.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:'/test',
            component:() => import('../view/Test.vue')
        },
    ]
})

export default router;

接下来我们把App.vue改造一下使用上我们新增的路由，来跳转到不同的页面。

<template>
  <div id='nav'>
    <router-link to='/home'>Home</router-link> |
    <router-link to='/user'>User </router-link>
  </div>
  <router-view></router-view>
</template>

  • 引入axios

封装一下axios，这个大家肯定封装过直接拿来用就可以。主要是配置一下vite.config.ts，需要注意下proxy这里的配置跟vue-cli的配置不太一样。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'https://www.fastmock.site/mock/8802f1f460c9b63f8b1b48bc701da385/work',
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 这里要使用正则
      },
    },
  },
})

下面我们就来开发Test.vue页面。

<template>
  <el-button type="primary" @click="search">查询</el-button>

  <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 { getList } from '../api/test'
import { reactive, } from 'vue'

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

const search = () => {
  state.loading = true;
  let param = {
  }
  getList(param).then(res => {
    state.loading = false
    state.tableData = res.data.list
  })
}
</script>

这里就是正常vue3.0的开发，不过有一点需要注意一下：
<script setup>单文件组件，在每次组件实例被创建的时候执行，代表setup生命周期执行的内容，可以与普通的<script>一起使用，不需要return，更少的样板内容，更简介的代码。详细的特性可以查看官方文档。

好了到此一个简单的demo就做出来了，感兴趣的童鞋可以自行体验，本地开发体验真的很棒。

avatar
文章
阅读
粉丝