用vite创建vue项目的几种方法

  以下方法均要首先要安装node获取npm的安装工具

  第一种，在任意搜索引擎上直接搜索vue进入官网，在快速上手上直接获取快速创建vue项目的命令

npm create vue@latest

小白后续狂摁enter，有其他需要的人根据需要去对vue进行一个配置。接着根据提示输入指令即可快速创建vue的一个项目。(官网默认采用的是一个vite的一个创建工具）

  第二钟，在任意搜索引擎上直接搜索vite进入官网，同样在快速上手上获取一个快速安装的命令

npm create vite@latest

方法同第一种较为类似，但在vite官网上，我们可以创建的不仅是一个vue项目，还可以快速创建react等项目

  第三种，直接亲手从0搭建一个vite+vue3的项目，对创建一个vue项目的流程和细节学习有更深一步的学习

首先在桌面通过ctrl+shift+n在桌面快速创建一个文件夹，拖入vscode，按下ctrl+~打开终端，输入以下命令

npm i vite -D

npm init -y

npm i vue

接着创建一个src文件夹，在该文件夹内创建一个App.vue和一个main.js

在App.vue随便写点

在main.js写入以下代码

import {createApp} from 'vue'
import App from './App.vue'
const app=createApp(App)
app.mount('#app')

接着在根目录设置index.html，写入以下代码

在packjson做如下修改

"scripts": {
    "dev":"vite"
  },

接着在终端输入

npm i @vitejs/plugin-vue -D

然后在根目录创建vite.config.js，在其中编写以下代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
    plugins:[vue()]
})

接着在终端输入npm run dev就能运行了

如果有对路由的需求，那么又需要对该项目做进一步的配置

首先在终端输入以下代码，并创建一个home.vue和about.vue

npm i vue-router -D

然后在src创建一个router.js输入以下代码

import { createRouter,createWebHashHistory } from "vue-router";
const router=createRouter({
    routes:[{
        name:"首页",
        component:()=>import("./home.vue")
    },{
        name:"about",
        path:"/about",
        component:()=>import("./about.vue")
    }],
    history:createWebHashHistory()
})
export default router

接着在App.vue做如下修改

最后在main.js做如下修改

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
const app=createApp(App)
app.use(router)
app.mount('#app')

就完成路由配置了，可以输入npm run dev试试~~~///(^v^)\\\~~~