一、创建项目

npm create vite

1.project-name 输入项目名vue3-vite
2.select a framework 选择框架
3.select a variant 选择语言

二、启动项目

cd vue3-vite
npm install
npm run dev

三、配置项目

1、添加编辑器配置文件

在根目录下添加编辑器配置文件： .editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style=space
index_size=2
trim_trailing_whitespace=true
insert_final-newline=true

2、配置别名

vue开发过程中，习惯使用@代替src,vite默认不识别。需要在vite.config.ts配置路径别名。

import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{'@':path.resolve(__dirname,'./src')}
  }
})

可以在alias中给常用的目录定义其他别名。
tsconfig.json文件，在compilerOptions节点中添加两个属性配置beseUrl和paths,如下：

3、处理sass/scss

npm install sass -D

4、处理tsx(不用的话可以不处理)

npm install @vuejs/plugin-vue-jsx -D
vite.config.ts

import vueJsx from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()],
  resolve:{
    alias:{'@':path.resolve(__dirname,'./src')}
  }
})

四、添加Eslint

npm install eslint -D

初始化Eslint配置。。。。

五、添加vue-router

1. 安装：npm install vue-router@next
2. 准备新页面，新建文件夹 src/router/index.ts
3. 配置路由router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRow} from 'vue-router';
const routes:Array<RouteRecordRow> = [
	{
		path:'/',
		name:'Home',
		component:Home
	}
	//...
]
const router = createRouter({
	history: createWebHashHistory(),
	routes,
	// 是否应该禁止尾部斜杠。默认为假
 	strict: true,
  	scrollBehavior: () => ({ left: 0, top: 0 }),
})
export default router;

4.引入配置src/main.ts

import { createApp } from 'vue';
import '/style/css';
import App from './App.vue';
import router from './router'

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

5. 添加链路和路由插座src/App.vue

<template>
	<router-link to='/'>Home</router-link>
	<router-link to='/about'>About</router-link>
	<router-view />
	// <RouterView />
</template>

vue-router详情

六、状态管理Pinia

Pinia：轻量化的状态管理工具

七、使用Element Plus

1. 安装依赖：npm install element-plus
2. 引入配置：src/main.ts

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
...
app.use(ElementPlus)
...

3. 在vue文件测试
4. 全局注册图标
   ①安装依赖：npm install @element-plus/icons-vue
   ②创建src/utils/str-utils.ts,定义驼峰命名转中划线命名的函数：

export const camelCaseToLine = (v:string):string=>{
	return v.replace(/[A-Z]/g,'-$1').toLowerCase();
}

③引入配置：src/main.ts

...
import * as ElmentPlusIconsVue from '@element-plus/icons-vue';
import { camelCaseToLine } from '@/utils/str-utils.ts';
...
for(const [key,component] of Object.entries(ElementPlusIconsValue)){
	app.component(`el-icon${camelCaseToLine (key)}`,component)
}
...

④在vue文件中测试

在element-ui中，安装element-ui后便可以直接使用图标，但element-plus需要单独安装依赖，并在使用图标时引入对应的图标组件。

八、Vue3组件详情

Vue3组件详情