So erstellen Sie ein Vue3-Projekt von Grund auf

Anleitung

Zeichnen Sie den Vue3-Projekterstellungsprozess auf. Der Artikel basiert auf den Versionen vue3.2.6 und vite2.51 und verwendet die UI-Bibliothek Element plus, vue-router4, Layout-Layout-Kapselung, Axios-Anforderungskapselung, Alias-Konfiguration usw.

Start

1. Verwenden Sie das vscode-Entwicklungstool, um das vue3-Plug-in Volar zu installieren. In vue2 verwenden wir Vetur.

• vue3 Online-Code-Tool-Portal sfc.vuejs.org/

2. Führen Sie den Initialisierungs- und Installationsbefehl aus:

npm init vite Um Vite zu initialisieren, können Sie Folgendes eingeben Projektname während dieses Prozesses, wählen Sie das vue/react-Projekt und die js/ts-Umgebung aus, vue3 unterstützt ts vollständig, dieser Artikel verwendet js. npm install installiert Abhängigkeiten. Führen Sie abschließend npm run dev aus, um das Projekt auszuführen. 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 , vue3对应的vue-router和vuex的版本都是 4.0。执行命令安装完成之后,在目录下创建 src/router/index.js 写入下面的配置：

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

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

main.js中使用

// ...+
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：

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

在 mian.js 中引入

import '@/styles/index.scss'

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

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

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

如果你只用到几个组件，就可以按需加载优化性能，创建src/plugins/element3.js，如下

// 按需引入 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

// 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作为父路由，路由设计大概像下面这样：

// 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请求封装

执行命令 npm i axios 安装axios

新建 src/utils/request.js，在此文件中进行封装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

为了方便管理和维护API，你可以在 src/api 目录下为每个模块或每个页面单独创建一个JS文件。在这里提供示例，创建一个名为 src/api/home.js 的文件，并将代码写入其中

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

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

在 home.vue 中使用

<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 测试环境 ，分别加入下面的代码，在不同的编译环境下，打包时自动执行当前环境下的代码

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

使用：

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

在package.json中通过传递 --mode 选项标志来覆盖命令使用的默认模式

  "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

Wenn beim Ausführen Der Prozess Wenn die Fehlermeldung im Bild oben erscheint, können Sie node node_modules/esbuild/install.js manuell ausführen und dann npm run dev

3 ausführen.

um vue-router zu installieren🎜 🎜Führen Sie npm install vue-router@4 aus. Die Versionen von vue-router und vuex, die vue3 entsprechen, sind beide 4.0. Nachdem Sie den Befehl zur Installation ausgeführt haben, erstellen Sie src/router/index.js im Verzeichnis und schreiben Sie die folgende Konfiguration: 🎜

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

🎜main.js verwendet 🎜rrreee🎜vue-router4. Die Schreibmethode unterscheidet sich etwas vom vorherigen Hash-Modus createWebHashHistory Verlaufsmodus createWebHistory, Einzelheiten finden Sie auf der offiziellen Website. 🎜🎜🎜4.🎜 Globaler Stil und Sass-Installation (die Verwendung des @-Pfads erfordert die Konfiguration eines Alias, entsprechende Anweisungen finden Sie später) 🎜🎜Führen Sie den Befehl npm i sass -D aus und erstellen Sie dann src/ im Verzeichnis styles/index.scss: 🎜rrreee🎜Eingeführt in main.js🎜rrreee🎜🎜Tipps:🎜 Verwenden Sie::deep(.className) oder deep(.className) für die Stildurchdringung in vue3🎜🎜🎜5.🎜 Element plus drücken Muss importiert und global importiert werden🎜🎜Führen Sie den Befehl npm i element3 -S zur Installation aus. Wenn Sie die meisten darin enthaltenen Komponenten verwenden können, verwenden Sie die globale Importmethode wie folgt:🎜rrreee 🎜Wenn Sie es nur verwenden, können Sie bei Bedarf mehrere Komponenten laden, um die Leistung zu optimieren 🎜Entwerfen Sie das Layout entsprechend Ihren eigenen Anforderungen. Wenn Sie das Layout-Layout verwenden, müssen Sie darauf achten, Layout.vue als übergeordnete Route zu verwenden. Das Routendesign sieht ungefähr wie folgt aus: 🎜rrreee🎜🎜7.🎜 Axios-Anforderungskapselung🎜🎜 Führen Sie den Befehl npm i axios aus, um Axios zu installieren🎜 🎜Erstellen Sie eine neue src/utils/request.js und kapseln Sie Axios in dieser Datei🎜rrreee🎜Um die Verwaltung und Wartung der API zu erleichtern, können Sie eine erstellen eine separate JS-Datei für jedes Modul oder jede Seite im Verzeichnis src/api. Geben Sie hier ein Beispiel an, erstellen Sie eine Datei mit dem Namen src/api/home.js und schreiben Sie den Code hinein. 🎜rrreee🎜 Verwenden Sie ihn in home.vue Dateien .env.produktion Produktionsumgebung .env.development Entwicklungsumgebung .env.staging Testumgebung, fügen Sie jeweils den folgenden Code hinzu, in unterschiedlicher Kompilierung Umgebungen führen beim Packen automatisch den Code in der aktuellen Umgebung aus Wird vom Befehl verwendet🎜rrreee🎜Auf diese Weise wird die Produktionsumgebung gepackt und ausgeführt npm run build:prod, und die Test-/Vorabversionsumgebung wird gepackt npm run build:stage🎜🎜🎜 9.🎜 Alias-Konfiguration in Vite🎜🎜Fügen Sie Code zur Datei vite.config.js im Stammverzeichnis hinzu🎜rrreee

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Vue3-Projekt von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!