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

最新推荐文章于 2024-10-04 00:18:00 发布

别问我，我什么都不知道

最新推荐文章于 2024-10-04 00:18:00 发布

阅读量662

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74924621/article/details/133395765

版权

以下方法均要首先要安装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随便写点

<template>
    <h1>hahaha</h1>
</template>

在main.js写入以下代码

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
</body>
</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做如下修改

<template>
    <router-view></router-view>
    <h1>hahaha</h1>
</template>

最后在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^)\\\~~~

别问我，我什么都不知道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫