vite+vue3快速构建项目+router、vuex、scss安装

安装 Vite

javascript 复制代码
npm install -g create-vite-app

创建vue3项目

javascript 复制代码
npm init vite@latest


npm i安装依赖

安装veux、router

javascript 复制代码
npm install vue-router vuex

新建router/index.js(自己创建home、login对应页面文件)

javascript 复制代码
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/home/home.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/login',
        name: 'login',
        component: () => import(/* webpackChunkName: "login" */ '../views/login/login.vue')
    }
]

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

export default router

新建store/index.js

javascript 复制代码
import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在当前文件中如果有报错Vue无法找到模块vuex,在tsconfig.app.json文件中,添加如下配置:

javascript 复制代码
"compilerOptions": {
    "paths": {
        "vuex": ["./node_modules/vuex/types"]
    },
}

在main.ts下引入

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(store).use(router)
app.mount('#app')

修改app.vue

javascript 复制代码
<template>
    <router-view />
</template>

最后重新运行npm run dev

安装scss

javascript 复制代码
npm i sass sass-loader --save-dev

最后npm run dev运行项目

相关推荐
帅夫帅夫1 分钟前
你真的知道怎么用CSS吗?
前端
蓝胖子的小叮当7 分钟前
JavaScript基础(十)对象方法总结
前端·javascript
艾小码40 分钟前
AI时代,编程简化:前端开发的范式革命
前端
讨厌吃蛋黄酥40 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
沫小北41 分钟前
HarmonyOS Lottie动画库总结
前端·harmonyos
Oriel43 分钟前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue43 分钟前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny44 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI1 小时前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端
前端Hardy1 小时前
Python 打造 Excel 到 JSON 转换工具:从开发到打包全攻略
前端·后端·python