為了熟悉vue3+ts的開發(fā)風(fēng)格扇住，搭建的一個仿小紅書的WebApp（已開源）;持續(xù)迭代中......
gitHub倉庫 ：https://github.com/xxljunjun/vue3-webApp
線上地址：http://www.xxljunjun.com/redbook
一镰官、搭建項目
- npm init vite@latest
踩坑：vite項目需要node版本大于16２磷谩０悦谩粱坤！ - 通過vite@latest創(chuàng)建的是vite3.0.7的版本
-
npm run dev啟動項目
二店印、配置路徑別名
踩坑：vite中不支持require()語法８栽凇！按摘！
- 編輯vite.config.ts
//如果報錯就安裝：npm install --save-dev @types/node
import path from 'path'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
resolve:{
// 配置路徑別名
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
三、安裝css預(yù)編譯語言（sass纫谅、less炫贤、stylus三者選一即可）
// # Sass
npm install -D sass-loader sass
// # Less
npm install -D less-loader less
// # Stylus
npm install -D stylus-loader stylus
npm install style-resources-loader -D
四、配置路由
- 1付秕、npm install -S vue-router@next
- 2兰珍、新建路由文件：vue3-webApp/src/router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: "/",
name: "home",
//記得順便新建home文件的index.vue組件
component: () => import("@/views/home/index.vue"),
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
+3、更改App.vue文件
<template>
<router-view></router-view>
</template>
- 4询吴、更改main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
//創(chuàng)建應(yīng)用實例對象
const app = createApp(App)
app.use(router).mount('#app')
- 5掠河、路由在vue文件中的使用
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const goBack = () => {
router.push({ path: "/home" });
};
</script>
五亮元、安裝vant-UI組件庫
npm install vant -S
//按需引入
npm i unplugin-vue-components -D
//需要配置vite.config
+vant支持vue3：https://vant-contrib.gitee.io/vant/#/zh-CN
vant官網(wǎng)
六、移動端適配
- npm install postcss-pxtorem --save-dev
- npm install amfe-flexible --save-dev
- 配置main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 移動端適配
import 'amfe-flexible'
//創(chuàng)建應(yīng)用實例對象
const app = createApp(App)
app.use(router).mount('#app')
- 配置vite.config.js
//vite.config.js中配置postcss-pxtorem
export default defineConfig({
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 37.5, // 1rem的大小
propList: ['*'], // 需要轉(zhuǎn)換的屬性唠摹，這里選擇全部都進行轉(zhuǎn)換
})
]
}
},
})
七爆捞、vue3中的事件總線通信
在vue3中兄弟組件之間的通信不存在eventBus了，官方推薦使用mitt
npm install --save mitt
//bus.js
import mitt from "mitt";
const emitter = mitt()
export default emitter
//使用
emitter.emit()
emitter.on()
最后
這個vue3+ts+vite的前端Web項目就搭建完了勾拉，可以進行頁面的開發(fā)了Ｖ笊！藕赞！
缺陷：暫時還沒有加入vuex的通信成肘，感興趣的同學(xué)可以自己去探索一下
