vue3 初体验vue3 已经发布一段时间了，今天我就从搭建项目逐步开始来尝试一下请确保你的电脑上成功安装 Node.

vue3 已经发布一段时间了，今天我就从搭建项目逐步开始来尝试一下

请确保你的电脑上成功安装 Node.js，在此使用 Vite 构建工具，需要 Node.js 版本 >= 12.0.0

查看 Node.js 版本

node -v

使用 Vite 快速初始化项目雏形

使用 NPM：

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

然后按照终端提示完成以下操作：

输入项目名称

本项目名称就取默认的vite-project

选择模板本项目需要使用 Vue3，所以我们选择 vue，会自动安装 Vue3。选择JavaScript

出现下面的即创建完成

然后按照步骤执行

cd vite-project  //  进入文件目录
npm install    // 安装依赖
npm run dev    // 启动项目

修改 Vite 配置文件

Vite 配置文件 vite.config.ts 位于根目录下，项目启动时会自动读取。

本项目先做一些简单配置，例如：设置 @ 指向 src 目录、服务启动端口、打包路径、代理等。

关于 Vite 更多配置项及用法，请查看 Vite 官网 vitejs.dev/config/

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域

    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})

集成路由工具 Vue Router

安装支持 Vue3 的路由工具 vue-router@4
```
 npm i vue-router@4
```

创建 src/router/index.ts 文件

在 src 下创建 router 目录，然后在 router 目录里新建 index.ts 文件：

    import {
      createRouter,
      createWebHashHistory,
      RouteRecordRaw
    } from 'vue-router'
    import Home from '@/views/home.vue'

    const routes: Array<RouteRecordRaw> = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/vuex',
        name: 'Vuex',
        component: import('@/views/vuex.vue')
      }
    ]

    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })

    export default router

根据本项目路由配置的实际情况，你需要在 src 下创建 views 目录，用来存储页面组件。

我们在 views 目录下创建 home.vue 、vuex.vue。

在 main.ts 文件中挂载路由配置

 import { createApp } from 'vue'
 import App from './App.vue'

 import router from './router/index'

 createApp(App).use(router).mount('#app')

集成状态管理工具 Vuex

安装支持 Vue3 的状态管理工具 vuex@next
```
  npm i vuex@next
```

创建 src/store/index.ts 文件

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

// Create a new store instance.
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state: typeof defaultState) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    double(state: typeof defaultState) {
      return 2 * state.count
    }
  }
})

在 main.ts 文件中挂载 Vuex 配置

 import { createApp } from 'vue'
 import App from './App.vue'

 import store from './store/index'

 createApp(App).use(store).mount('#app')

集成 UI 框架 Element Plus

安装支持 Vue3 的 UI 框架 Element Plus
```
 npm i element-plus
```

在 main.ts 文件中挂载 Element Plus

 import { createApp } from 'vue'
 import App from './App.vue'

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

 createApp(App).use(ElementPlus).mount('#app')

集成 HTTP 工具 Axios

安装 Axios（Axios 跟 Vue 版本没有直接关系，安装最新即可）
```
 npm i axios
```

配置 Axios

为了使项目的目录结构合理且规范，我们在 src 下创建 utils 目录来存储我们常用的工具函数。

Axios 作为 HTTP 工具，我们在 utils 目录下创建 axios.ts 作为 Axios 配置文件：

     import Axios from 'axios'
     import { ElMessage } from 'element-plus'

     const baseURL = 'https://api.github.com'

     const axios = Axios.create({
       baseURL,
       timeout: 20000 // 请求超时 20s
     })

     // 前置拦截器（发起请求之前的拦截）
     axios.interceptors.request.use(
       (response) => {
         /**
          * 根据你的项目实际情况来对 config 做处理
          * 这里对 config 不做任何处理，直接返回
          */
         return response
       },
       (error) => {
         return Promise.reject(error)
       }
     )

     // 后置拦截器（获取到响应时的拦截）
     axios.interceptors.response.use(
       (response) => {
         /**
          * 根据你的项目实际情况来对 response 和 error 做处理
          * 这里对 response 和 error 不做任何处理，直接返回
          */
         return response
       },
       (error) => {
         if (error.response && error.response.data) {
           const code = error.response.status
           const msg = error.response.data.message
           ElMessage.error(`Code: ${code}, Message: ${msg}`)
           console.error(`[Axios Error]`, error.response)
         } else {
           ElMessage.error(`${error}`)
         }
         return Promise.reject(error)
       }
     )

     export default axios

使用 Axios

在需要使用 Axios 文件里，引入 Axios 配置文件，参考如下：

 <template></template>
 <script lang="ts">
   import { defineComponent } from 'vue'
   import axios from '../utils/axios'

   export default defineComponent({
     setup() {
       axios
         .get('/users/XPoet')
         .then((res) => {
           console.log('res: ', res)
         })
         .catch((err) => {
           console.log('err: ', err)
         })
     }
   })
 </script>

这样就完成了项目的搭建配置了vue-router axios vuex 还可以根据自己需求配置第三方ui组件库