小白入手vite。从0开始打造一个简单的项目。vite讲究的就是一个速度极快，体积小

下载vite

1、首先要清楚vite目前支持的模板

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

以下我们以vue为模板

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

启动项目

进入项目之后启动该项目

cd my-vue-app
npm i
npm run dev

在网页上以localhost访问

但是前端我们这边一般以ip访问。这就是需要配置一下们的ip。找到vite.config.js,添加server配置上ip即可

添加工作项目必备的vue全家桶

npm i vue-router@4 axios vuex@next --save

配置router

1、在src目录中创建router/index.js目录文件
router/index.js

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

/* 路由文件写入和之前的vue-router是一样的 */
const routes = [
  {
    path: '/',
    component: () => import('@/views/home/index.vue')
  },
  { 
    path: '/activity', 
    component: () => import('@/views/activity/index.vue')
  }
]

const router = createRouter({
  // 内部是有history模式，这里我启用了hash路由模式
  history: createWebHashHistory(),
  routes
})

export default router

2、在main.js中引入路由配置文件

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

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

到这里路由引入成功, 在路由的引入中都是根据相对路径比较麻烦，在以往项目都是习惯使用“@”作为src目录。所以我们可以配置一下vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 设置别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // 配置IP
  server: {
    host: '0.0.0.0'
  }
})

在home.vue中跳转路由/ativity，使用useRouter API跳转路由， useRoute获取路由信息

<script setup>
import { useRouter, useRoute } from 'vue-router'
import HelloWorld from '../../components/HelloWorld.vue'

const router = useRouter() // 相当于vue2 中的 this.$router
const route = useRoute() // 获取路由信息使用这个，相当于vue2+中的 this.$route
const goPage = () => {
  const query = route.query
  router.replace({
    path: '/activity',
    query
  })
}
</script>

<template>
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <button @click="goPage">跳转Activity</button>
</template>

配置vuex

在src目录下，创建store/index.js目录文件：
这里以最简单的计数为例

import { createStore } from 'vuex'

const store = {
  state: {
    count: 0
  },
  getters: {
    num: state => state.count
  },
  mutations: {
    COUNT (state, data) {
      state.count = data
    }
  },
  actions: {
    increment ({ commit, state }, data) {
      commit('COUNT', data)
    }
  },
  modules: {}
}

export default createStore(store)

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index'
import Store from './store/index'

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

在home中使用

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
/* 计数 */
const store = useStore()
const count = computed(() => store.state.count)

const handleCount = () => {
  store.dispatch('increment', count.value + 1)
}
</script>

<template>
  <button @click="handleCount">count: {{ count }}</button>
</template>

到这里简单的使用vue-router，vuex都已经完毕。用法上较以前的会有写改变，但是核心使用起来和以前出入不大。

配置全局axios，以及设置代理

在src目录下，创建api/request.js目录文件

import axios from 'axios'
import { Toast } from 'vant'


axios.defaults.baseURL = '/api'

axios.defaults.timeout = 30000

axios.interceptors.request.use(function (config) {
  return config
}, function (error) {
  Toast('网络异常')
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  Toast.clear()
  if (response.data.code !== 200) {
    Toast(response.data.msg)
    return Promise.reject(response.data)
  }
  return response.data
}, function (error) {
  Toast.clear()
  Toast('网络异常')
  return Promise.reject(error)
})

export default axios

本地项目中都是有跨域的问题，所以我们要通过vite.config.js来配置访问代理。其中我引入了vantUI组件库，设置为按需引入

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    })
  ],
  resolve: {
    // 设置别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // 配置代理IP：代理会把项目中的/api的访问都代理到目标的请求链接上
  server: {
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://ts-****.cn',
        changeOrigin: true,
        ws: true
      }
    }
  }
})

API接口按文件区分，在api/activity.js创建活动访问接口

import axios from './request.js'

export const Activity = {
  info: params => axios.get(`/activityInfo/${params.id}`, params)
}

views/activity/inde.vue

<script setup>
import { Activity } from '@/api/activity.js'
Activity.info({ id: 8 }).then(res => {
  console.log(res)
})
</script>

<template>
  <van-button type="primary">主要按钮</van-button>
</template>

一个简单项目的架子就完成啦，通过实战才是上手vue3最快的途径

Hello vite, vue3.0