时间总是过得飞快,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";
const routes = [
{ path: '/', name: "Index", component: Home },
{
path: "/home",
name: "Home",
component: Home,
},
{
path: "/test",
name: "Test",
component: () =>
import( "../view/Test.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
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库有以下几种。
* <a href="https://www.antdv.com/docs/vue/introduce-cn/" target="_blank">Ant Design Vue</a>
* <a href="https://vant-contrib.gitee.io/vant/next/#/zh-CN/" target="_blank">Vant</a>
* <a href="https://github.com/element-plus/element-plus" target="_blank">element-plus</a>
- 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';
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
![代码 图标](https://img-blog.csdnimg.cn/img_convert/3c96197e4dac0acdc518b1298287117a.bmp)
2. main.js可以以下方式引入
```
import '/@/index.css'
import Vant from 'vant';
import '/@nodeModul/vant/lib/index.css';
```
8. 未完待续~