vite+vue3+TS+创建项目配置

招手不见走来

已于 2022-04-14 16:39:32 修改

阅读量1k

点赞数

分类专栏： vite 文章标签： vue vue.js

于 2022-04-14 16:35:15 首次发布

本文链接：https://blog.csdn.net/weixin_60191381/article/details/124174244

版权

vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

cd 到我们创建的vite项目目录内先执行 nip i 安装下环境

环境生成后安装常用的四个插件 router vuex axios vuex-persister

在src目录下创建views文件夹配置页面home和about(根据自己需求配置)

在src目录下创建router/index.ts配置路由

配置main.js

配置@路径在vite.config.ts 中配置

安装

npm init vite@latest

配置项目名字

? Project name: » vite-project

选择vue回车

    vanilla
>   vue
    react
    preact
    lit
    svelte

使用TS

 vue
>   vue-ts

cd 到我们创建的vite项目目录内先执行 nip i 安装下环境

环境生成后安装常用的四个插件 router vuex axios vuex-persister

npm install vue-router@4 vuex@next axios vuex-persister

在src目录下创建views文件夹配置页面home和about(根据自己需求配置)

在src目录下创建router/index.ts配置路由

import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [{
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    //路由懒加载
    component: () => import('../views/About.vue')
  }
  ]
})
export default router

在src目录下创建store/index.ts配置路由 peizhi

import { createStore } from 'vuex'
//引入数据固化
import VuexPersister from 'vuex-persister'
const persister = new VuexPersister({
//根据需求写入存储位置，我这里用的localStorage
  storage: window.localStorage
})
const store = createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  plugins: [persister.persist]
})
export default store

配置main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'//引入路由
import store from './store/index'//引入vuex
createApp(App).use(store).use(router).mount('#app')

配置@路径在vite.config.ts 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  //加入以下片段可使用@路径
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})