Bagaimana untuk membina projek vue3 dari awal

Arahan

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.

Mula

1. Gunakan alat pembangunan vscode untuk memasang pemalam vue3 Volar Dalam vue2 kami menggunakan Vetur.

• portal alat kod dalam talian vue3 sfc.vuejs.org/

2. Laksanakan arahan permulaan dan pemasangan:

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

3 . Pasang vue-router

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.

4. Gaya global dan pemasangan sass (menggunakan @ path memerlukan konfigurasi alias dan terdapat arahan yang sepadan kemudiannya)

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)

5. Elemen tambah diperkenalkan atas permintaan dan secara global

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')

6. Reka letak susun atur, buat fail src/layout/index.vue

// src/layout/index.vue
<template>
   <!-- 顶部导航 -->
  <Navbar />
  <!-- 页面内容部分、路由出口 -->
  <AppMain />
  <!-- 底部内容 -->
  <Footer />
</template>

<script setup>
import Navbar from &#39;./Navbar.vue&#39;
import AppMain from &#39;./AppMain.vue&#39;
import Footer from &#39;./Footer.vue&#39;
</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,
})

7. axios request enkapsulasi

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 service

Untuk 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 &#39;@/api/home.js&#39;
const query = { pagenum: 1 }
getList(query)
  .then((res) => {
    console.log(res) // 调用成功返回的数据
  })
  .error((err) => {
    console.log(err) // 调用失败要执行的逻辑
  })
</script>

8 dalam home.vue Berkaitan pembolehubah persekitaran

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

9. Alias ​​​​configuration in vite

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!