Rumah > Artikel > hujung hadapan web > Bagaimana untuk membina projek vue3 dari awal
Rakam proses pembinaan projek Vue3. Artikel adalah berdasarkan versi vue3.2.6 dan vite2.51, dan menggunakan pustaka UI Element plus, vue-router4, Pengkapsulan reka letak susun atur, pengkapsulan permintaan aksios, konfigurasi alias, dsb.
portal alat kod dalam talian vue3 sfc.vuejs.org/
npm init vite Dalam proses memulakan vite ini, anda boleh memasukkan nama projek, pilih projek vue/react dan pemilihan persekitaran js/ts Vue3 sepenuhnya Artikel ini menggunakan js. npm install Pasang kebergantungan. Akhirnya laksanakan npm run dev untuk menjalankan projek.
Jika mesej ralat di atas muncul semasa menjalankan proses, anda boleh melaksanakan secara manual node node_modules/esbuild/install.js dan kemudian melaksanakan npm run dev
dan laksanakan npm install vue-router@4 Versi vue-router dan vuex yang sepadan dengan vue3 adalah 4.0. Selepas melaksanakan arahan untuk memasang, cipta src/router/index.js dalam direktori dan tulis konfigurasi berikut:
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
// ...
]
export default createRouter({
history: createWebHistory(),
routes,
})main.js menggunakan
// ...+ import router from './router/index' createApp(App).use(router).mount('#app')
vue-router4 agak berbeza daripada yang sebelumnya. Bezakan mod cincang createWebHashHistory mod sejarah createWebHistory, sila semak tapak web rasmi untuk mendapatkan butiran.
Laksanakan arahan npm i sass -D, dan kemudian dalam direktori Cipta src/styles/index.scss:
// @import './a.scss'; // 作为出口组织这些样式文件，同时编写一些全局样式
Perkenalkan
import '@/styles/index.scss'
petua dalam main.js: Gunakan::deep(.className) untuk penembusan gaya dalam vue3 Atau deep(.className)
Laksanakan perintah npm i element3 -S untuk memasang, jika anda boleh menggunakan kebanyakan daripadanya Untuk komponen, gunakan kaedah import global, seperti berikut:
// main.js import element3 from "element3"; import "element3/lib/theme-chalk/index.css"; createApp(App).use(router).use(element3).mount('#app')
Jika anda hanya menggunakan beberapa komponen, anda boleh memuatkannya atas permintaan untuk mengoptimumkan prestasi dan mencipta src/plugins/element3.js, seperti berikut
// 按需引入 plugins/element3.js
import { ElButton, ElMenu, ElMenuItem } from 'element3'
import 'element3/lib/theme-chalk/button.css'
import 'element3/lib/theme-chalk/menu.css'
import 'element3/lib/theme-chalk/menu-item.css'
export default function (app) {
app.use(ElButton)
app.use(ElMenu)
app.use(ElMenuItem)
}
// main.js中引用
import element3 from '@/plugins/element3.js'
createApp(App).use(router).use(element3).mount('#app')// src/layout/index.vue <template> <!-- 顶部导航 --> <Navbar /> <!-- 页面内容部分、路由出口 --> <AppMain /> <!-- 底部内容 --> <Footer /> </template> <script setup> import Navbar from './Navbar.vue' import AppMain from './AppMain.vue' import Footer from './Footer.vue' </script>
Reka bentuk susun atur mengikut keperluan anda sendiri Apabila menggunakan susun atur, anda perlu memberi perhatian untuk menggunakan Layout.vue sebagai laluan induk Reka bentuk penghalaan adalah kira-kira seperti berikut:
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'
import Home from '@/views/home/Home.vue'
import Test from '@/views/test/Test.vue'
const routes = [
{
path: '/',
component: Layout,
children: [{ path: '', component: Home }],
},
{
path: '/test',
component: Layout,
children: [{ path: '', component: Test }],
},
]
export default createRouter({
history: createWebHistory(),
routes,
})Jalankan arahannpm i axios Pasang axios
src/utils/request .js baharu, terkandung dalam fail ini axios
import axios from 'axios'
// 可以导入element plus 的弹出框代替alert进行交互操作
// create an axios instance
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASEURL, // 使用设置好的全局环境
timeout: 30 * 1000, // request timeout
})
// request interceptor
service.interceptors.request.use(
(config) => {
// 此处可以执行处理添加token等逻辑
// config.headers["Authorization"] = getToken();
return config
},
(error) => {
console.log(error)
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
(response) => {
const res = response.data // 根据接口返回参数自行处理
if (res.code !== 200) {
if (res.code === 50000) {
// 根据状态码自行处理
alert('服务器内部出现异常，请稍后再试')
}
return Promise.reject(new Error(res.msg || 'Error'))
} else {
// 调用成功返回数据
return Promise.resolve(res)
}
},
(error) => {
console.log('err' + error) // 出现异常的处理
return Promise.reject(error)
}
)
export default serviceUntuk memudahkan pengurusan dan penyelenggaraan API, anda boleh mencipta fail JS yang berasingan untuk setiap modul atau setiap halaman dalam direktori src/api. Untuk memberikan contoh di sini, buat fail bernama src/api/home.js dan tulis kod ke dalamnya
// 引入封装好的 request.js
import request from '@/utils/request'
export function getList(query) {
return request({
url: '/list',
method: 'get',
params: query,
})
}Gunakan
<script setup>
import { getList } from '@/api/home.js'
const query = { pagenum: 1 }
getList(query)
.then((res) => {
console.log(res) // 调用成功返回的数据
})
.error((err) => {
console.log(err) // 调用失败要执行的逻辑
})
</script>Buat tiga fail dalam direktori akar projek .env.production Persekitaran pengeluaran .env.development Persekitaran pembangunan .env.staging Uji persekitaran, tambah kod berikut masing-masing dan pakej di bawah persekitaran kompilasi yang berbeza Laksanakan kod secara automatik dalam persekitaran semasa
# .env.production VITE_APP_BASEURL=https://www.prod.api/
# .env.development VITE_APP_BASEURL=https://www.test.api/
# .env.staging VITE_APP_BASEURL=https://www.test.api/
Gunakan:
console.log(import.meta.env.VITE_APP_BASEURL) // 在不同编译环境下控制台会输出不同的url路径
Dalam package.json, luluskan bendera pilihan --mode untuk mengatasi mod lalai yang digunakan oleh arahan
"scripts": {
"dev": "vite",
"build:stage": "vite build --mode staging",
"build:prod": "vite build --mode production",
"serve": "vite preview"
}, Dengan cara ini , persekitaran pengeluaran dibungkus dan dilaksanakan npm run build:prod, dan persekitaran ujian/pra-keluaran dibungkus npm run build:stage
vite.config dalam direktori akar fail js menambah kod
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
},
base: './',
})Atas ialah kandungan terperinci Bagaimana untuk membina projek vue3 dari awal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!