vite+vue3快速构建项目+router、vuex、scss安装
安装 Vite
npm install -g create-vite-app
创建vue3项目
npm init vite@latest
npm i安装依赖
安装veux、router
npm install vue-router vuex
新建router/index.js（自己创建home、login对应页面文件）
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
import { createStore } from 'vuex'
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
在当前文件中如果有报错Vue无法找到模块vuex，在tsconfig.app.json文件中，添加如下配置：
"compilerOptions": {
"paths": {
"vuex": ["./node_modules/vuex/types"]
},
}
在main.ts下引入
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
<template>
<router-view />
</template>
最后重新运行npm run dev
安装scss
npm i sass sass-loader --save-dev
最后npm run dev运行项目