為了熟悉vue3+ts的開發風格，搭建的一個仿小紅書的WebApp（已開源）;持續迭代中......
gitHub倉庫 ：https://github.com/xxljunjun/vue3-webApp
線上地址：http://www.xxljunjun.com/redbook
一、搭建項目
- npm init vite@latest
踩坑：vite項目需要node版本大于16！！！ - 通過vite@latest創建的是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預編譯語言（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'
//創建應用實例對象
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官網
六、移動端適配
- 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'
//創建應用實例對象
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: ['*'], // 需要轉換的屬性，這里選擇全部都進行轉換
})
]
}
},
})
七、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項目就搭建完了，可以進行頁面的開發了！！！
缺陷：暫時還沒有加入vuex的通信，感興趣的同學可以自己去探索一下
