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

相关推荐
耶啵奶膘13 分钟前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家1 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
charlee442 小时前
nginx部署发布Vite项目
nginx·性能优化·https·部署·vite
小白变怪兽3 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头3 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全4 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing4 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆4 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding5 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js