vite+vue3刨坑记

---

时间总是过得飞快，vue3又出来这么久了，今天就来实际上手操作一番。

首先是进行安装网上搜了很多教程大同小异。

1. 下载安装vite

   1.  yarn global add create-vite-app@1.18.0 或 npm install -g create-vite-app
   2.  yarn global add create-vite-app@next

2. 使用vite创建项目

  找到一个空的目录 打开命令行 mkdir viteVue => create-vite-app 项目名 || cva 项目名
  基本操作就是 cva demoVue  => cd demoVue => (yarn 或 cnpm install) 

3. 启动项目

  npm run dev || yarn dev

---

到这里vue启动是很快已经能看到页面了，但是不免会发出疑问到底是更新了一些什么东西让我们趋之如骛。

4. 各大博友们说的大致更新方向

1. 一个是 Composition API，另一个是对 TypeScript 的全面支持。
2. 团队还会出一个 Vue 2.7 的版本，给予 2.x 用户一些在 3.0 版本中被删除方法的警告，这有助于用户的平稳升级。
3. Nuxt3 好像还在路上，但是目前看来，市面上的各大组件库还没来得及针对 Vue3.0 进行改版升级。
4. 周边的插件如 Vue-Router、Vuex、VSCode 插件 Vetur 等都在有序的进行

5. 对vite增加路由Vue-Router插件

• 5.1 以为很简单跟vue配置一样，真是蠢萌蠢萌的.

• 5.2 直接上手 yarn add vue-router@next

• 5.3 在src目录下创建router文件夹 md router => cd router => cd . > index.js

• 5.4 在index.js中引入vue-router (src/router/index.js)

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

	import Home from "../view/Home.vue"; //引入页面跟vue2的引入方式相同

	const routes = [
		{ path: '/', name: "Index", component: Home }, //此处name不能与下面Home的 name相同否则页面报错
		{
			path: "/home",
			name: "Home",
			component: Home,
		},
		{
			path: "/test",
			name: "Test",
			component: () =>
				import(/* webpackChunkName: "about" */ "../view/Test.vue"),
		},
	];
	const router = createRouter({
		history: createWebHashHistory(),
    		//createWebHistory 方法返回的是 History 模式,createWebHashHistory 方法返回的是 Hash 模式
		routes,
	});

	export default router;

• 5.5 main.js修改成以下代码(src/main.js)

	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	import './index.css'
	const app = createApp(App)
	app.use(router)
	app.mount('#app')

• 5.6 根目录App.vue 增加路由视图跟路由导航

	<template>
  		<router-link to="/home">home</router-link> --- <router-link to="/test">test</router-link>
  		<router-view></router-view>
	</template>
    // 到此路由模块可以使用了

6. 引入了路由怎么能不引入一个UI库，不然写出的页面太丑了了，为了增加美观查了下现在vue3支持的ui库有以下几种。
   • Ant Design Vue
   • Vant
   • element-plus

• 6.1：因为本人移动端使用比较多就进行了Vant的安装

   1. npm i vant@next -S || yarn add vant@next -S
   2. 在main.js中引入
   
   	import Vant from 'vant';
   	import '/node_modules/vant/lib/index.css'; 
       //按官方的提示引入是有报错的至于什么原因就得去看vite的打包原理了，哈哈 我也菜解释不清自己搜下。
   	app.use(Vant)
    3. 在（src/view/Home.vue）中的template按官方的写法就行了
    	<van-button type="primary">主要按钮</van-button>
    4. 按需引入官方也说的很清楚就不在详说了。
   

7. webpack有vue.config.js，vite也有那就是vite.config.js

   • 7.1 说一下vite引入路径的问题每次写import '/node_modules/vant/lib/index.css';总感觉不是很美观，有的路径要补全岂不是都要去../啥的，后面了解到可以以下方式解决

   1. 在项目根目录创建vite.config.js

   2. main.js可以以下方式引入

   import '/@/index.css'
   import Vant from 'vant';
   import '/@nodeModul/vant/lib/index.css';
   

8. 未完待续~