从零开始创建vue3+vite项目

最新推荐文章于 2025-08-04 19:10:34 发布

原创最新推荐文章于 2025-08-04 19:10:34 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

查看当前node版本

node -v

如果版本低于18需要升级至18版本以上，建议使用nvm操作切换版本

nvm install 18

nvm use 18

创建vite+vue3项目

npm create vite@latest

输入文件名

选择vue项目

选中js或者ts看你需求，我选择的js

按顺序执行接下来的命令，isc就是你之前的创建项目名

安装route，vuex，css预处理器

npm install vue-router@4
npm install vuex@next --save 
npm install -D sass sass-loader

自行在src文件下创建2个文件夹分别为route 和store,里面代码分别为

//route文件
import { createStore } from 'vuex'

const store = createStore({
    state: {

    },
    mutations: {
    },
    actions: {

    },
    getters: {

    }
})

export default store

//route文件

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        //路由初始指向
        path: '/',
        name: 'HelloWorld',
        component: () => import('../components/HelloWorld.vue'),
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

修改main.js

//main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './route'
import store from './store'
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');