搭建vite項目的命令。

npm -v

我的目前是6.14.15，升級一下：

npm install -g npm

目前是8.3.0

新建vite項目命令行：

npm init vite@latest vue3-element-ui-baseline -- --template vue-ts

image.png

需要安裝以下軟件包：

創(chuàng)造-vite@latest

可以繼續(xù)嗎？（y）

輸入y即可。
安裝完畢：

image.png

用vscode打開：

運行node初始化：

npm i

安裝完成：

image.png

vite項目默認(rèn)端口3000，修改方式如下：

    server: {
        port: 8080,
    },

修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        port: 8080,
    },
})

啟動命令：

npm run dev

image.png

image.png

安裝路由和element-plus：

 npm i -S vue-router@next element-plus

安裝完成：

image.png

image.png

新建src\router\index.ts

image.png

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

新建src\views\Home\index.ts

<template>
    <div>Home</div>
</template>
<script lang="ts" setup>

</script>

<style lang="scss" scoped></style>

修改src\router\index.ts

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

import Home from '../views/Home/index.vue'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: Home,
    },
]

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

修改main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)

app.use(router)

app.mount('#app')

修改src\App.vue

<template>
    <router-view></router-view>
</template>
<style lang="scss"></style>

運行項目:

image.png

引用element-ui，去官網(wǎng)抄：

image.png

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
import App from './App.vue'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)
app.mount('#app')

修改src\views\Home\index.vue

<template>
    <div><el-button type="primary">首頁</el-button></div>
</template>
<script lang="ts" setup>

</script>

<style lang="scss" scoped></style>

image.png

因為我們要用到sass（全新版本叫scss），需要安裝一下sass
：

npm i -D sass sass-loader

安裝完成：

image.png

修改src\App.vue

<template>
    <router-view></router-view>
</template>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}
</style>

image.png

element-plus版本將圖標(biāo)單獨打包，需要單獨引入
)：

npm install @element-plus/icons-vue

修改src\main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'

const app = createApp(App)

for (let i in Icons) {
  console.log(i)
  
}

app.use(router)
app.use(ElementPlus)
app.mount('#app')

image.png

可以看到打印了很多對象名稱。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'

const app = createApp(App)

for (let i in Icons) {
    console.log(`i:`, i)
    console.log('Icons[i]', (Icons as any)[i])
}

app.use(router)
app.use(ElementPlus)
app.mount('#app')

image.png

新建src\utils\index.ts

//將駝峰命名轉(zhuǎn)換為橫杠連接
export const toLine = (value: String) => {
    return value.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()
}

修改src\main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import { toLine } from './utils'
const app = createApp(App)

//全局組件注冊，犧牲一些性能，但方便使用
//封裝成el-icon-xxx
for (let i in Icons) {
    // console.log(`i:`, i)
    // console.log('Icons[i]', (Icons as any)[i])
    app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])
}

app.use(router)
app.use(ElementPlus)
app.mount('#app')

使用,修改src\App.vue

<template>
    <div>
        <el-button type="primary">首頁</el-button>
        <el-icon-edit style="width: 1em; height: 1em; margin-right: 8px" />
    </div>
</template>
<script lang="ts" setup>
</script>

<style lang="scss" scoped></style>

image.png

為了更方便使用，可以優(yōu)化如下：
修改src\App.vue

<template>
    <router-view></router-view>
</template>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}
svg {
    width: 1em;
    height: 1em;
}
</style>

這樣src\views\Home\index.vue可以調(diào)整為：

<template>
    <div>
        <el-button type="primary">首頁</el-button>
        <el-icon-edit />
    </div>
</template>
<script lang="ts" setup>
</script>

<style lang="scss" scoped></style>