Vue 3 + TypeScript + Vite + ElementPlus

主题：Vue 3 + TypeScript + Vite + ElementPlus

 

1.安装node环境

安装包：node-v14.17.6-x64.msi

2.Vite创建Vue项目

npm init @vitejs/app项目初始化，选择vue-ts

目录结构：

 

npm install

npm run dev

 

1. UI框架：ElementPlus

npm install element-plus

完整引入所有组件

修改src/main.ts

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

// import 'element-plus/dist/index.css'

import zhCn from 'element-plus/es/locale/lang/zh-cn'

import './element-variables.scss'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus, {

locale: zhCn,

})

app.mount('#app')

修改src/app.vue

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />

  <el-button>Button</el-button>

</template>

<script>

  import HelloWorld from './components/HelloWorld.vue'

import { defineComponent } from 'vue'

  export default defineComponent({

    name: 'app',

    components: {

      HelloWorld,

    },

  })

</script>

1. vue-router、axios、vuex、mock...

npm install axios

npm install vue-router@4

npm install vuex@next

npm install mockjs

npm install vite-plugin-mockapp.mount('#app')

创建router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [

   {

    path: '/',

    name: 'Home',

    component: () => import('../views/Home.vue')

  },

  {

    path: '/about',

    name: 'About',

    component: () => import('../views/About.vue')

  }

]

const router = createRouter({

  history: createWebHistory(),

  routes

})

export default router

创建store/index.ts

import { createStore } from 'vuex'

export default createStore({

  state: {

  },

  mutations: {

  },

  actions: {

  },

  modules: {

  }

})

修改src/main.ts

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

import router from './router'

import store from './store'

app.use(ElementPlus)

app.use(store)

app.use(router)

app.mount('#app')

mock 模拟各种请求数据场景,修改vite.config.ts

import { defineConfig } from 'vite'

import { viteMockServe } from 'vite-plugin-mock'

import vue from '@vitejs/plugin-vue'

export default defineConfig({

  plugins: [

vue(),

viteMockServe({}),

  ],

})

创建mock/system/user.ts

import { MockMethod } from 'vite-plugin-mock'

const userList = [

{ id: 1, name: 'vite' },

{ id: 2, name: 'vue' },

{ id: 3, name: 'typescript' },

{ id: 4, name: 'vue-router' },

{ id: 5, name: 'axios' },

{ id: 6, name: 'vuex' },

{ id: 7, name: 'mock' },

{ id: 8, name: 'vite-plugin-mock' },

]

export default [

  {

    url: '/user/list',

    method: 'get',

    response: ({ query }) => {

      return {

        code: 0,

        data: userList,

      }

    },

  },

] as MockMethod[]

• 个性化

1.自定义主题

安装sass

npm install sass

创建 src/element-variables.scss文件

@use "sass:map";

/* Color

-------------------------- */

$--colors: () !default;

$--colors: map.deep-merge(

  (

    'white': #ffffff,

    'black': #000000,

/* 主题色 */

    'primary': (

      /*'base': #409eff,*/

  'base': #5352ed,

    ),

    'success': (

      'base': #67c23a,

    ),

    'warning': (

      'base': #e6a23c,

    ),

    'danger': (

      'base': #f56c6c,

    ),

    'error': (

      'base': #f56c6c,

    ),

    'info': (

      'base': #909399,

    ),

  ),

  $--colors

);

@import "element-plus/packages/theme-chalk/src/index";

修改src/mian.ts

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import './element-variables.scss'

import App from './App.vue'

const app = createApp(App)

import router from './router'

import store from './store'

app.use(ElementPlus)

app.use(store)

app.use(router)

app.mount('#app')

色彩调配

 

#55efc4 #81ecec #74b9ff #a29bfe #dfe6e9

#00b894 #00cec9 #0984e3 #6c5ce7 #b2bec3

#ffeaa7 #fab1a0 #ff7675 #fd79a8 #636e72

#fdcb6e #e17055 #d63031 #e84393 #2d3436

 

 

#eccc68 #ff7f50 #ff6b81 #a4b0be #57606f

#ffa502 #ff6348 #ff4757 #747d8c #2f3542

#7bed9f #70a1ff #5352ed #ffffff #dfe4ea

#2ed573 #1e90ff #3742fa #f1f2f6 #ced6e0