全局安装vite

后面跟上项目名称

npm init vite-app vue3-demo

此时我们可以看到，与vue/cli相比vite创建项目可以说是秒创建！！！

 然后根据提示运行：

cd vue3-demo
npm install
npm run dev

 输出：

$ npm run dev

> [email protected] dev C:\Users\86177\Desktop\vue3-demo
> vite

[vite] Optimizable dependencies detected:
vue
- Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)


  Dev server running at:
  > Network:  http://192.168.124.36:3000/
  > Local:    http://localhost:3000/

配置vite.config.js文件

在项目根目录创建vite.config.js文件

写入基本配置

const path = require('path')
module.exports = {
    base:"./",//公共基础路径 打包路径
    resolve: {
        alias:{
            '@': path.resolve(__dirname, './src')//别名设置
        }
    },
    // host: 'localhost',
    port:8888,//启动端口
    // https: true, // 开启https
    open: true, // 自动开启窗口
    proxy: { // 代理配置
        '/api': {
            target: 'http://jsonplaceholder.typicode.com',//后端服务地址
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
        }
    },
}

 

 

使用ant-design-vue组件库

安装组件库

npm install ant-design-vue@next --save

此处注意安装的时候ant-design-vue后面一定要加上@next : npm install ant-design-vue@next --save

在main.js中完整引入组件：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

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

在App.vue中测试是否引入成功：

运行结果：

我们可以看到此时ant-design-vue已经引入成功了！

 

 

使用Vue Router

安装 vue-router(注意加@next)

npm install --save vue-router@next

配置路由

新建router文件夹

增加index.js和router.config.js文件

index.js写入内容

import { createRouter, createWebHistory} from 'vue-router';
import routes from './router.config';

export const router = createRouter({
    history: createWebHistory(), // createWebHistory => 不带#号,需后端支持  createWebHashHistory带#号
    routes
});

router.config.js写入内容

export default [
    {
        path: '/',
        name: 'root',
        redirect: '/root',
        component: () => import('../App.vue'),
        children:[]
    },
    {
        path: '/btn',
        name: 'btn',
        component: () => import('../views/btn.vue'),
    }
]

在main.js中引入router并使用

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { router } from './router'
const app = createApp(App);
app.use(router);
app.use(Antd);
app.mount('#app')

测试路由是否正常

修改App.vue文件

<template>
  <img alt="Vue logo" src="./assets/logo.png"/>
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <router-link to='/btn'> btn </router-link>
  <router-view />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,
  },
}
</script>

创建views文件夹

在views文件夹下增加btn.vue文件

写入内容

<template>
  <a-button type="primary">Primary</a-button>
  <a-button>Default</a-button>
  <a-button type="dashed">Dashed</a-button>
  <a-button type="danger">Danger</a-button>

  <a-button type="primary">按钮</a-button>
  <a-button type="link">Link</a-button>
</template>

<script>
export default {
  name: "btn",
}
</script>

<style scoped>

</style>

 

运行项目测试

此时点击btn可以正常跳转

 

 

使用Vuex

安装vuex（注意增加@next）

npm install vuex@next --save

新建store文件夹

在store文件夹下创建index.js

写入内容

import { createStore } from "vuex";

export default createStore({
    state: {
        demo:'vuex'
    },
    getters:{},
    mutations: {},
    actions: {},
    modules: {}
});

在main.js中引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { router } from './router'
import store from "./store";
const app = createApp(App);
app.use(router);
app.use(store);
app.use(Antd);
app.mount('#app')

在App.vue中加入代码测试

<template>
  <img alt="Vue logo" src="./assets/logo.png"/>
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <h1>{
   {this.$store.state.demo}}</h1>
  <router-link to='/btn'> btn </router-link>
  <router-view />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,
  },
}
</script>

保存并重新运行

此时发现Vuex运行正常

 

 

使用axios

安装axios

npm install axios --save

配置axios

创建http文件夹

在http文件夹下创建index.js、axios.config.js、axios.interceptors.config.js、api.js文件

index.js写入代码

import axios from 'axios';
import config from './axios.config';
import {setInterceptors} from './axios.interceptors.config';
const axiosInstance = axios.create(config);

setInterceptors(axiosInstance);

export default axiosInstance

axios.config.js配置文件中写入代码

export default {
    baseURL: '/api', // 服务器地址或配置的代理的路径
    timeout: 10000,  // 超时时间
    headers: {} // 配置请求头
}

axios.interceptors.config.js拦截器文件中写入代码

export const setInterceptors = (axiosInstance) => {
    // 请求拦截
    axiosInstance.interceptors.request.use(request => {
        return request;
    }, error => Promise.reject(error));

    // 响应拦截
    axiosInstance.interceptors.response.use(response => {
        return response;
    }, error => {
        return Promise.reject(error.response);
    })
};

api.js文件中加入你要请求的接口

import axiosInstance from './index'

// 请求接口封装
export const axiosGet = (params) => axiosInstance.post('/demo',params);

axios已经完全配置好了，在你需要使用请求的地方直接从api.js文件中导出就可以啦。

 

至此项目已经搭建完成啦，记得重新运行一下项目，希望此文章对你有所帮助。