Vite2.0创建项目（Vue3.0 + ts + element-ui）

安装环境 源码地址

npm i pnpm -g

创建项目

npm init @vitejs/app --template vue-ts

配置依赖

复制下面代码替换package.json

//package.json
{
    
    
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    
    
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    
    
    "element-plus": "^1.0.2-beta.33",
    "vue": "^3.0.5",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-router": "^4.0.4",
    "vuex": "^4.0.0",
    "vuex-persistedstate": "^4.0.0-beta.3"
  },
  "devDependencies": {
    
    
    "@vitejs/plugin-vue": "^1.1.5",
    "@vue/compiler-sfc": "^3.0.5",
    "babel-plugin-import": "^1.13.3",
    "typescript": "^4.1.3",
    "vite": "^2.0.5",
    "sass": "^1.32.8"
  }
}

安装依赖

//打开项目，在控制台输入
pnpm install

配置路由vue-router

在src下创建目录router，创建index.ts

//src/router/index.ts
import {
    
     createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../views/layouts/index.vue'

const routes: Array<RouteRecordRaw> = [
    {
    
    
        path: '/',
        name: 'Layout',
        component: Layout,
        redirect: '/index',
        children: [
            {
    
    
                path: 'index',
                name: 'Index',
                component: () => import( '../views/index/index.vue')
            }
        ]
    },
]

const router = createRouter({
    
    
    history: createWebHistory(),
    routes
})

export default router

//main.ts
// @ts-ignore
import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App).use(router)
app.mount('#app')

配置vuex

在src下创建目录store，创建index.ts

//src/store/index.ts
import {
    
     createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

export default createStore({
    
    
    state: {
    
    
        vuex_count: 0,
    },
    mutations: {
    
    
        setCount(state, num: number): void {
    
    
            state.vuex_count += num
        }
    },
    actions: {
    
    
    },
    modules: {
    
    
    },
    plugins: [
        createPersistedState({
    
    
            storage: {
    
    
                getItem: (key) => localStorage.getItem(key),
                setItem: (key, value) => localStorage.setItem(key, value),
                removeItem: (key) => localStorage.removeItem(key),
            }
        })
    ]
})

//main.ts
// @ts-ignore
import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App).use(store).use(router)
app.mount('#app')

配置element-plus

在src下创建目录element-ui，创建index.js

//src/element-ui/index.js
import {
    
    ElButton, ElSelect} from "element-plus";
import 'element-plus/lib/theme-chalk/index.css'

const install = (Vue) => {
    
    
    Vue.component(ElButton.name, ElButton);
    Vue.component(ElSelect.name, ElSelect);
}

export default install

//main.ts
// @ts-ignore
import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// @ts-ignore
import elementUi from './element-ui'

const app = createApp(App).use(store).use(router)
elementUi(app)
app.mount('#app')