vite4.x+vue3.x项目搭建一vue-router_vite4.x+vue3.x项目搭建axios

分几个单元做，分别 vue-router axios vuex element-plus sass typescript（这个比较火，我也尝试做）
我用的是vscode 提前安装好vscode、node.js最新稳定版

一、安装vite+vue3.x
vite搭建vue3.x很快的

cd F:\vue3\
// nmp 6.x版本安装方法
npm create @vitejs/app my-vue-app --template 
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue
1
2
3
4
5
6
7
8

然后 npm install npm run dev
浏览器打开http://localhost:3000
二、配置vite.config.js
你的项目要开启gzip压缩的话，安装

npm i vite-plugin-compression -D
or
yarn add vite-plugin-compression -D
1
2
3

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

//开启gzip压缩
import viteCompression from "vite-plugin-compression";
export default defineConfig({
  resolve: {
    //路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  //插件
  plugins: [vue(), viteCompression()],

  publicDir: "public",
  server: {
    hostname: "localhost", // 默认是 localhost
    port: "8000", // 默认是 3000 端口
    open: true, // 浏览器自动打开
    https: false, // 是否开启 https
    ssr: false, // 服务端渲染
    base: "./", // 生产环境下的公共路径
    outDir: "dist", // 打包构建输出路径，默认 dist ，如果路径存在，构建之前会被删除
    proxy: {
      // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      "/api": {
        target: "http://127.0.0.1:7001", // 后端服务实际地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
    //限制为工作区 root 路径以外的文件的访问
    fs: {
      strict: false,
    },
  },

  //生产模式打包配置
  build: {
    outDir: "dist", //Specify the output directory (relative to project root).

	//这个用于打包。打包会出现大小限制
    chunkSizeWarningLimit:1500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

打包会出现这个问题，上面已写出解决方案

三、路由管理
安装

npm install vue-router@4
1

1.准备工作
在src下新建目录views，并在该目录下新建一个页面home.vue和child.vue
新建router目录，并新建index.js页面
![在这里插入图片描述](https://img-blog.csdnimg.cn/cacb4c18ab6449ecbf89f0c941374e68.png
2.App.vue 修改

<template>
  <router-view></router-view>
</template>
<script>
export default {
  name: "App",
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
createApp(App).use(router).mount('#app')
1
2
3
4

4.router.js代码

import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
//  createWebHashHistory, hash模式
const router = createRouter({
  history: createWebHistory(), //history模式使用HTML5模式
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes: [
    {
      path:"/",
      redirect:"/home/child"
    },
    {
      path: "/home",
      name: "home",
      component: () => import("@/views/home.vue"),
      children: [
        {
          path: "child",
          name: "child",
          meta: {
            title: "子级",
          },
          component: () => import("@/views/child.vue"),
        },
      ],
    },
  ],
});
export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

5.home.vue页面代码

<template>
  <div>
    {{ msg }}
    <router-view v-slot="{ Component }">
        <transition name="router-fade" mode="out-in">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    /*<div class="content-box">
      <transition name="move" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    这个代码会发出警告提示：
	[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
		Use slot props instead:
		
		<router-view v-slot="{ Component }">
		  <transition>
		    <component :is="Component" />
		  </transition>
		</router-view>
*/
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  data() {
    return {
      
    };
  },
  setup(props) {
    let msg = ref("主页");
    return {
      msg,
    };
  },
  components: {},
  computed: {},
  created() {},
  methods: {},
};
</script>
<style>
.content-box {
  width: 100%;
  height: 500px;
  padding-bottom: 40px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f0f0f0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

6.child代码

<template>
  <div>
     子级
  </div>
</template>

<script>
export default {
  data () {
    return {
        child:"子级"
    };
  },

  components: {},
  computed: {},
  created(){},
  methods: {}
}

</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果

小结：下一篇是安装 sass