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运行项目

相关推荐
万少14 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL20 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0235 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang37 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼39 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿41 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再43 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试