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更新项目了

果然知识是学不完的，继续加油加油

posted @ 2021-03-03 00:14 -鹿- 阅读(2735) 评论(1) 收藏举报

刷新页面返回顶部

鹿

Vite2.0 (尝鲜，绝)

前沿

安装vite

集成vue-router

安装axios

公告