vite初始化vue3项目

877 阅读1分钟

创建项目

yarn create @vitejs/app vue-antd-learn

代码结构

{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite", // 默认运行方式
    "build": "vue-tsc --noEmit && vite build", // 打包
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.3",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.3.2",
    "vite": "^2.3.7",
    "vue-tsc": "^0.0.24"
  }
}

安装 antd-vue的依赖

 yarn add ant-design-vue@next

安装路由和数据仓库

yarn add vuex@next vue-router@next

引入antd-vue


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

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

创建路由

定义路由

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = []
const router = createRouter(
    {
        history: createWebHashHistory(),
        routes: routes
    }
)

export default router
  • RouteRecordRaw 一个接口,他定义了路由的格式
  • createWebHashHistory 路由模式
  • routes: RouteRecordRaw[] 这个数组存放我们所有的路由

创建我的第一个页面

image-20210617163438257

<template>login</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>

注册路由,把登录页面注册进来

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Index from '../pages/login/Index.vue'
const routes: RouteRecordRaw[] = [
    {
        path: '/login',
        component: Index
    }
]
const router = createRouter(
    {
        history: createWebHashHistory(),
        routes: routes
    }
)

export default router

引入路由

main.js 引入我们的路由

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

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

挂在路由

挂在在了App.vue下面

<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {},
});
</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>

视频介绍地址