vue3 プロジェクトを最初から構築する方法

手順

Vue3 プロジェクトの構築プロセスを記録します。この記事は vue3.2.6 および vite2.51 バージョンに基づいており、UI ライブラリ Element plus、vue-router4、Layout レイアウトのカプセル化、axios リクエストのカプセル化、エイリアス設定などを使用しています。

Start

1. vscode 開発ツールを使用して、vue3 プラグイン Volar をインストールします。vue2 では Vetur を使用します。

• vue3 オンライン コード ツール ポータル sfc.vuejs.org/

2.

#npm init vite vite を初期化するこのプロセスでは、プロジェクト名を入力し、vue/react プロジェクトを選択し、js/ts 環境を選択できます。Vue3 は ts を完全にサポートしています。この記事では、 js. npm install 依存関係をインストールします。最後に npm run dev を実行してプロジェクトを実行します。

プロセスの実行中に上記のエラー メッセージが表示された場合は、手動で node node_modules/esbuild/install.js を実行してから、## を実行してください。 # npm run dev

3. vue-router のインストール

npm install vue-router@4、vue- に対応vue3 router と vuex のバージョンは両方とも 4.0 です。インストールコマンド実行後、ディレクトリ内に src/router/index.js を作成し、

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
// ...
]

export default createRouter({
history: createWebHistory(),
routes,
})

// ...+
import router from './router/index'
createApp(App).use(router).mount('#app')

createWebHashHistory ヒストリーモード createWebHistory 詳細は公式サイトをご確認ください。

4. グローバル スタイルと sass のインストール (@ パスを使用するにはエイリアスの設定が必要です。対応する手順は後で説明します)

npm i sass -D を実行し、ディレクトリに src/styles/index.scss を作成します。

// @import './a.scss'; 
// 作为出口组织这些样式文件，同时编写一些全局样式

import '@/styles/index.scss'

tips を紹介します: でスタイル貫通を使用します。 vue3 ::deep(.className) または deep(.className)

5. 要素とオンデマンドの導入およびグローバル導入

npm i element3 -S コマンド インストール。内部のほとんどのコンポーネントを使用できる場合は、次のようにグローバル インポート メソッドを使用します。

// main.js
import element3 from "element3";
import "element3/lib/theme-chalk/index.css";
createApp(App).use(router).use(element3).mount('#app')

// 按需引入 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. レイアウト レイアウト、ファイル 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>

ログイン後にコピー

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

npm i axios 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

// 引入封装好的 request.js
import request from '@/utils/request'

export function getList(query) {
  return request({
    url: '/list',
    method: 'get',
    params: query,
  })
}

<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 を使用します。環境変数関連プロジェクトのルートディレクトリに3つのファイルを作成

本番環境.env.development開発環境.env.staging テスト環境では、次のコードをそれぞれ追加します。異なるコンパイル環境では、パッケージ化時に現在の環境でコードが自動的に実行されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"># .env.production VITE_APP_BASEURL=https://www.prod.api/</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"># .env.development VITE_APP_BASEURL=https://www.test.api/</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"># .env.staging VITE_APP_BASEURL=https://www.test.api/</pre><div class="contentsignin">ログイン後にコピー</div></div>使用:

console.log(import.meta.env.VITE_APP_BASEURL)
// 在不同编译环境下控制台会输出不同的url路径

In

、--mode オプション フラグを渡して、コマンド <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> &quot;scripts&quot;: { &quot;dev&quot;: &quot;vite&quot;, &quot;build:stage&quot;: &quot;vite build --mode staging&quot;, &quot;build:prod&quot;: &quot;vite build --mode production&quot;, &quot;serve&quot;: &quot;vite preview&quot; },</pre><div class="contentsignin">ログイン後にコピー</div></div> で使用されるデフォルト モードをオーバーライドします。この方法で、運用環境がパッケージ化され、実行されます。

、テスト/プレリリース環境のパッケージ化npm run build:stage##9.

vite でのエイリアス構成。ルート ディレクトリの config.js ファイルに code

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: './',
})

ログイン後にコピー

を追加します

以上がvue3 プロジェクトを最初から構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。