vue3+vant自動導(dǎo)入+pina+vite+js+pnpm搭建項目框架
要搭建一個使用Vue 3、Vant組件庫、Pina狀態(tài)管理、Vite作為構(gòu)建工具、JavaScript語言、pnpm作為包管理工具的項目框架，可以按照以下步驟進行操作：
1. 安裝pnpm（如果還沒有安裝）：
npm install -g pnpm
2. 創(chuàng)建項目目錄并進入該目錄：
mkdir my-project
cd my-project
3. 初始化項目：
pnpm init
這將生成一個package.json文件。文章來源：http://www.zghlxwxcb.cn/news/detail-851519.html
4. 安裝Vite作為構(gòu)建工具：
pnpm add -D vite
5. 創(chuàng)建Vite配置文件vite.config.js，并添加以下內(nèi)容：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
import path from 'path'
// 自動導(dǎo)入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自動導(dǎo)入ui-組件 比如說ant-design-vue element-plus vant等
import Components from 'unplugin-vue-components/vite';
// 注冊 Vant 組件
import { VantResolver } from '@vant/auto-import-resolver';
// https://vitejs.dev/config/
export default defineConfig({
base: './',// 指定輸出路徑
publicPath: './',// 指定輸出路徑
build: {
outDir: '../發(fā)布包/dist',// 指定輸出路徑
cssCodeSplit: true,// 啟用 CSS 代碼拆分
extract: true, // 是否使用css分離插件 ExtractTextPlugin
minify: 'terser', // 啟用 terser 壓縮
sourcemap: false, // 構(gòu)建后是否生成 source map 文件
terserOptions: {
compress: {
drop_console: true, // 刪除所有 console
drop_debugger: true, // 刪除 debugger
}
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')// @代替src
}
},
plugins: [
vue(),
AutoImport({
//安裝兩行后你會發(fā)現(xiàn)在組件中不用再導(dǎo)入ref，reactive等
imports: ['vue', 'vue-router'],// 自動導(dǎo)入vue和vue-router相關(guān)函數(shù)
//存放的位置
dts: "src/auto-import.d.ts",// 生成位置
}),
Components({
// 引入組件的,包括自定義組件
// 存放的位置
dts: "src/components.d.ts",// 生成位置
// 全局注冊 Vant 組件庫
resolvers: [VantResolver()],// 自動導(dǎo)入組件庫
}),
{
name: 'vite-plugin-babel',// 插件名稱
enforce: 'pre',// Vite 核心插件之前調(diào)用該插件
},
],
server: {
// host: '127.0.0.1', // 指定服務(wù)器應(yīng)該監(jiān)聽哪個 IP 地址
hot: true,// 保存文件時自動刷新
strictPort: false,//通過server.strictPort控制端口沖突時是否自動刷新
port: 8080, // 指定開發(fā)服務(wù)器端口
open: true, // 啟動時自動在瀏覽器中打開應(yīng)用程序
proxy: { // 配置自定義代理規(guī)則
'/api': {
target: 'http://jsonplaceholder.typicode.com',// 代理目標(biāo)地址
changeOrigin: true,// 是否需要代理跨域
// rewrite: (path) => path.replace(/^\/api/, '')// 重寫路徑
}
},
},
})
6. 在src目錄下創(chuàng)建main.js文件，添加以下內(nèi)容：
import { createApp } from 'vue'
// 1. 引入公共樣式
import '@/styles/style.css'
import '@/styles/common.css'
// 2. 引入組件樣式
import 'vant/lib/index.css';
//routes
import router from "@/router/index";
import Vconsole from "vconsole";
import pinia from '@/store/index'
import App from '@/App.vue'
// amfe-flexible會根據(jù)當(dāng)前頁面的尺寸去設(shè)置根元素的font-size
import 'amfe-flexible/index'
const app = createApp(App)
//routes
app.use(router)
// pinia
app.use(pinia)
// Vconsole
if (process.env.NODE_ENV !== 'production') {
const vconsole = new Vconsole()
window['vconsole'] = vconsole
}
router.beforeEach((to, _from, next) => {
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
app.mount('#app')
7. 創(chuàng)建App.vue文件，添加以下內(nèi)容：
<template>
<div id="app">
<router-view />
</div>
</template>
<style scoped lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
color: #333;
}
</style>
8. 安裝Vue 3：
pnpm add vue@next
9. 安裝Vant組件庫：
pnpm add vant@next
10. 安裝Pina狀態(tài)管理：
pnpm add pina@next
11. 在src目錄下創(chuàng)建store.js文件，添加以下內(nèi)容：
import { createStore } from 'pina';
const store = createStore();
export default store;
12. 在main.js文件中添加以下內(nèi)容，以使用Pina狀態(tài)管理：
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');
13. 安裝其他依賴：
pnpm install
至此，你已經(jīng)搭建好了一個使用Vue 3、Vant組件庫、Pina狀態(tài)管理、Vite作為構(gòu)建工具、JavaScript語言、pnpm作為包管理工具的項目框架。你可以根據(jù)自己的需求繼續(xù)開發(fā)和配置項目。文章來源地址http://www.zghlxwxcb.cn/news/detail-851519.html
14. gitee 地址:https://gitee.com/Beichenguren/vue3-h5
到了這里，關(guān)于vue3+vant自動導(dǎo)入+pina+vite+js+pnpm搭建項目框架的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
