我正在参与掘金创作者训练营第5期，点击了解活动详情
前言
vite 和 vue3 出来也有些时日了， 公司的也有一些项目已经转 vite + vue3 的开发，同时也使用了 script setup 语法。现在记录一下使用 vite + vue3 的时候用的一些依赖和配置。
使用 vite 创建 vue3 项目
pnpm create vue
通过上面的命令来创建vue项目
第一步 输入我们的项目名
第二步 选择框架, 这里我们选择 vue
第三步 选择语法 就是 JavaScript 或 TypeScript
最后 项目创建成功, 进入项目目录, 安装依赖, 运行项目
安装 vue-router
pnpm i vue-router
路由安装成功之后，我们在 src 目录下创建一个 router/index.ts 的目录，在这个文件的内容如下
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/login',
name: 'Login',
meta: {
title: '登录',
},
component: () => import('@/views/Login/index.vue'),
},
{
path: '/home',
name: 'Home',
meta: {
title: '首页',
},
component: () => import('@/views/Home/index.vue'),
},
]
const router = createRouter({
history: createWebHashHistory(), // createWebHistory 历史路由
routes,
})
export default router;
createWebHashHistory 这个是hash路由
createWebHistory 这个是历史路由
路由文件创建成功之后在 main.ts（入口文件）中导入
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import router from './router/index'
const app = createApp(App);
app.use(router).mount('#app')
还有App.vue文件
<template>
<router-view></router-view>
</template>
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out <https://vuejs.org/api/sfc-script-setup.html#script-setup>
</script>
<style scoped>
</style>
这时候运行肯定有一个错误， 因为我们在路由文件中使用 @ 符，这里在 vite.config.js 配置下这个文件
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [vue()],
// 别名设置
resolve: {
alias: {
'@': resolve(__dirname, './src') // 把 @ 指向到 src 目录去
}
},
})
到此我路由就完成了
使用 scss css预处理
安装 scss
pnpm i scss
在 vite 中直接安装， 无需配置就可以直接使用了，但是我们有时候会在项目中全局注入css变量，就需要在 vite.config.js 中配置一下，配置内容如下
css:{
preprocessorOptions:{
scss:{
additionalData:'@import "@/styles/variables.scss";'
}
}
},
这里我们创建 styles/variables.scss 文件用来管理项目中 css 变量
$sjl-color: red;
在组件中直接使用就可以
color: $sjl-color;
最后如果你在运行时报错：vite Internal server error: Preprocessor dependency "sass" not found. Did you install it?
解决办法
1. pnpm install node-sass
2. pnpm install sass --save-dev
element-plus 一个 vue3 组件库
安装
pnpm i element-plus
一、全局引入
全局引入比较简单直接在main.ts中导入即可
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
二、按需引入
在 vite 中我们可以安装依赖，帮我们按需加载我们所使用的组件
pnpm install -D unplugin-vue-components unplugin-auto-import
安装成功配置 vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
配置好之后，我们在 main.ts（入口文件）中的 ElementPlus 就可以删除了
最后
关于 vue3 的项目先写到这里， 后续还会有一些插件的安装及使用（例如： axios、pinia、vueuse）
