搭建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
需要安装以下软件包：
创造-vite@latest
可以继续吗？（y）
输入y即可。
安装完毕：
image.png
用vscode打开：
运行node初始化：
npm i
安装完成：
image.png
vite项目默认端口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
TS还需要引入RouteRecordRaw，路由的泛型。
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，去官网抄：
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版本将图标单独打包，需要单独引入
)：
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
//将驼峰命名转换为横杠连接
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
为了更方便使用，可以优化如下：
修改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可以调整为：
<template>
<div>
<el-button type="primary">首页</el-button>
<el-icon-edit />
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped></style>
