创建一个vue项目

1. 使用vite创建项目

?

1	npm create vite@latest

　　

2. 替换main.js

?

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

// 从 Vue.js 框架中导入 createApp 函数。createApp 是用来创建 Vue 应用的函数。 import { createApp } from 'vue'   // 导入一个 CSS 文件，这个文件包含了应用程序的样式信息。'./style.css' 表示这个 CSS 文件位于同一目录下 import './style.css'   // 导入了一个 Vue 组件，这个组件通常是整个应用的主组件。App.vue 是一个单文件组件，它包含了应用的模板、逻辑和样式 import App from './App.vue' import router from './router' // 首先使用 createApp 函数创建一个新的 Vue 应用实例，然后用 mount 方法将这个应用挂载（显示）到 HTML 中的一个元素上。 // 这里的 '#app' 是一个选择器，它指向 HTML 中一个具有 id="app" 的元素，下面的index.html   // 创建 Vue 应用实例，并使用 router const app = createApp(App)   // 使用 Vue Router 插件 app.use(router)   // 挂载 Vue 应用实例到 #app 元素 app.mount('#app')

　　

3.创建路由文件

在src下创建router文件夹，然后在里面创建index,js

?

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

// 1. 定义路由组件. import {createRouter,createWebHashHistory} from 'vue-router' import Home from '../views/Home.vue'   // 2. 定义一些路由F // 每个路由都需要映射到一个组件。 const routes = [   { path: '/', component: Home },   ]   // 3. 创建路由实例并传递 `routes` 配置 // 你可以在这里输入更多的配置，但我们在这里 const router = createRouter({   // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。   history: createWebHashHistory(),   routes, // `routes: routes` 的缩写 }) export default router;

　　

4. 改App.vue

?

1 2 3 4 5 6 7

<template> <div id="app">   <!-- 路由出口 -->   <!-- 路由匹配到的组件将渲染在这里 -->   <router-view></router-view> </div> </template>

　　

5. 下载包

?

1	npm install vue-router

　　

6. 在src创建views文件夹，在里面创建Home.vue 组件，写点内容

启动组件