首頁 > web前端 > Vue.js > 如何從零開始建構vue3項目

如何從零開始建構vue3項目

王林
發布: 2023-06-02 17:34:50
轉載
4165 人瀏覽過

    說明

    記錄一次Vue3的專案建置流程。文章基於 vue3.2.6 和 vite2.51 版本,使用了ui庫 Element plus,vue-router4,Layout佈局封裝,axios請求封裝,別名配置等。

    開始

    1. 使用 vscode 開發工具安裝vue3的外掛程式 Volar ,在vue2中我們使用的是Vetur。

    • vue3線上code工具傳送門sfc.vuejs.org/

    2. 執行初始化及安裝指令:

    npm init vite 初始化vite此過程可以輸入專案名稱、選擇vue/react專案及js/ts環境選擇,vue3已經完全支援ts,這篇文章使用的是js。 npm install 安裝依賴。最後執行npm run dev運行項目。

    如何從零開始建構vue3項目

    執行過程時如果出現上圖的報錯訊息,可以手動執行node node_modules/esbuild/install.js,然後再執行 npm run dev

    3. 安裝vue-router

    執行npm install vue-router@4 , vue3對應的vue- router和vuex的版本都是4.0。執行指令安裝完成之後,在目錄下建立src/router/index.js 寫入下面的設定:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    import { createRouter, createWebHistory } from 'vue-router'

    const routes = [

    // ...

    ]

     

    export default createRouter({

    history: createWebHistory(),

    routes,

    })

    登入後複製

    main.js中使用

    1

    2

    3

    // ...+

    import router from './router/index'

    createApp(App).use(router).mount('#app')

    登入後複製

    vue-router4寫法和先前的有些區別hash模式createWebHashHistory history模式createWebHistory,可檢視官網。

    4. 全域樣式及sass安裝(使用@路徑需要設定別名,後文有對應的說明)

    執行指令npm i sass -D,然後在目錄下建立src/styles/index.scss:

    1

    2

    // @import './a.scss';

    // 作为出口组织这些样式文件,同时编写一些全局样式

    登入後複製

    在mian.js 中引入

    1

    import '@/styles/index.scss'

    登入後複製

    tips: vue3中樣式穿透使用::deep(.className) 或deep(.className)

    5. Element plus按需引入和全域引入

    執行npm i element3 -S 指令安裝,如果你能用到裡面的大多數元件,就用全域引入方式,如下:

    1

    2

    3

    4

    // main.js

    import element3 from "element3";

    import "element3/lib/theme-chalk/index.css";

    createApp(App).use(router).use(element3).mount('#app')

    登入後複製

    如果你只用到幾個元件,就可以按需載入最佳化效能,創建src/plugins/element3.js,如下

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    // 按需引入 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. Layout佈局,建立檔案src/layout/index.vue

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    // 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>

    登入後複製

    根據自己的需求設計佈局,使用Layout佈局時,需要注意Layout.vue作為父路由,路由設計大概像下面這樣:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    // src/router/index.js

    import { createRouter, createWebHistory } from &#39;vue-router&#39;

    import Layout from &#39;@/layout/index.vue&#39;

    import Home from &#39;@/views/home/Home.vue&#39;

    import Test from &#39;@/views/test/Test.vue&#39;

    const routes = [

      {

        path: &#39;/&#39;,

        component: Layout,

        children: [{ path: &#39;&#39;, component: Home }],

      },

      {

        path: &#39;/test&#39;,

        component: Layout,

        children: [{ path: &#39;&#39;, component: Test }],

      },

    ]

     

    export default createRouter({

      history: createWebHistory(),

      routes,

    })

    登入後複製

    7. axios請求封裝

    執行指令npm i axios 安裝axios

    新src/utils/request.js,在此檔案中進行封裝axios

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    import axios from &#39;axios&#39;

    // 可以导入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(&#39;服务器内部出现异常,请稍后再试&#39;)

          }

          return Promise.reject(new Error(res.msg || &#39;Error&#39;))

        } else {

          // 调用成功返回数据

          return Promise.resolve(res)

        }

      },

      (error) => {

        console.log(&#39;err&#39; + error) // 出现异常的处理

        return Promise.reject(error)

      }

    )

     

    export default service

    登入後複製

    為了方便管理和維護API,你可以在src/ api 目錄下為每個模組或每個頁面單獨建立一個JS檔案。這裡提供範例,建立一個名為src/api/home.js 的文件,並將程式碼寫入其中

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    // 引入封装好的 request.js

    import request from &#39;@/utils/request&#39;

     

    export function getList(query) {

      return request({

        url: &#39;/list&#39;,

        method: &#39;get&#39;,

        params: query,

      })

    }

    登入後複製

    在home.vue 中使用

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    <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. 環境變數相關

    專案根目錄下建立三個檔案.env.production 生產環境.env.development 開發環境.env. staging 測試環境,分別加入下面的程式碼,在不同的編譯環境下,打包時自動執行目前環境下的程式碼

    1

    2

    # .env.production

    VITE_APP_BASEURL=https://www.prod.api/

    登入後複製

    1

    2

    # .env.development

    VITE_APP_BASEURL=https://www.test.api/

    登入後複製

    1

    2

    # .env.staging

    VITE_APP_BASEURL=https://www.test.api/

    登入後複製

    使用:

    1

    2

    console.log(import.meta.env.VITE_APP_BASEURL)

    // 在不同编译环境下控制台会输出不同的url路径

    登入後複製

    package .json中透過傳遞 --mode 選項標誌來覆寫指令使用的預設模式

    1

    2

    3

    4

    5

    6

    "scripts": {

      "dev": "vite",

      "build:stage": "vite build --mode staging",

      "build:prod": "vite build --mode production",

      "serve": "vite preview"

    },

    登入後複製

    這樣,生產環境打包執行npm run build:prod ,測試/預發布環境打包npm run build:stage

    #9. vite中別名配置

    根目錄下vite.config.js檔案添加代碼

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    import { defineConfig } from &#39;vite&#39;

    import vue from &#39;@vitejs/plugin-vue&#39;

    import { resolve } from &#39;path&#39;

     

    // https://vitejs.dev/config/

    export default defineConfig({

      plugins: [vue()],

      resolve: {

        alias: [{ find: &#39;@&#39;, replacement: resolve(__dirname, &#39;src&#39;) }],

      },

      base: &#39;./&#39;,

    })

    登入後複製

    以上是如何從零開始建構vue3項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板