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

小许_.2024-09-15 19:00

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