vue3+TS+vite 如何创建项目

说明：创建的方式很多种，我在此只是记录一下以免我这小脑袋记不住（不做过多讲解但绝对有效）

官网的脚手架创建方法：快速上手 | Vue.js

1.安装 Node.js 和 npm： 如果您还没有安装 Node.js 和 npm，可以在官方网站 Node.js 下载并安装（这里不必多说）
2.全局安装Vite

npm install -g create-vite

3.刚才安装好的Vite然后创建一个名字为 vue3的项目

create-vite vue3 --template vue-ts

4.安装好之后会告诉你怎么整

1.cd vue3           进入刚才创建的项目
2.npm install        （不必多说）
3.npm run dev        （不必多说）

 到这里就已经运行起来了

基础的已完结

一、然后可以安装一下router

npm install vue-router@4 

安装好之后需要分别配置一下路由跟min.ts

// src下面新建router文件夹下面创建index.ts，代码如下
import { createRouter, createWebHashHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes = [{ path: '/', component: HelloWorld }]
export default createRouter({
	history: createWebHashHistory(),
	routes
})


// min.ts  主要是引入了router-------------------------------------
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')


// App.vue文件里面 主要是添加<router-view></router-view>--------------------
<script setup lang="ts">
	// import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
	<div>
		<a href="https://vitejs.dev" target="_blank">
			<img src="/vite.svg" class="logo" alt="Vite logo" />
		</a>
		<a href="https://vuejs.org/" target="_blank">
			<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
		</a>
	</div>
	<!-- <HelloWorld msg="Vite + Vue" /> -->
	-----------------------
	<router-view></router-view>
	-----------------------
</template>

<style scoped>
	.logo {
		height: 6em;
		padding: 1.5em;
		will-change: filter;
		transition: filter 300ms;
	}

	.logo:hover {
		filter: drop-shadow(0 0 2em #646cffaa);
	}

	.logo.vue:hover {
		filter: drop-shadow(0 0 2em #42b883aa);
	}
</style>

这里看看有没有生效，正常显示就生效不正常就不生效，不生效建议检查min.ts

二、然后安装最新的vuex：

npm install vuex@next -S

《在三src文件夹下面创建store文件夹，然后index.ts》
// 不过多测试了
import { createStore } from 'vuex'
const store = createStore({
	state() {
		return {
			count: 0
		}
	}
})
export default store

-------------------------------然后在min.ts引用--------------------（跟安装路由引入的的流程基本一直）

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

const app = createApp(App)

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

三、安装UI组件，这里我还是搞一个element plus，常用的

这个是官方文档建议看看 安装 | Element Plus

 我的是全局引入，按需请看文档快速开始 | Element Plus

npm install element-plus --save

// min.ts 文件继续引入  这是全局引入。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'  // element-plus
import 'element-plus/dist/index.css'// 样式

const app = createApp(App)

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

// 然后文档找几个测试一下

四、封装请求的axios

npm i axios

在src下面创建utils文件夹下面创建request.ts
自己封装吧 我还没写。。。。

五、安装sess/less预处理语言

npm install --save-dev sass

npm install less less-loader

剩下的有空再写吧。。。。