Comment créer un projet vue3 à partir de zéro

Description

Enregistrez un processus de construction de projet Vue3. L'article est basé sur les versions vue3.2.6 et vite2.51 et utilise la bibliothèque d'interface utilisateur Element plus, vue-router4, l'encapsulation de la mise en page, l'encapsulation des requêtes axios, la configuration des alias, etc.

Start

1. Utilisez l'outil de développement vscode pour installer le plug-in vue3 Volar#🎜 🎜#, dans In vue2 nous utilisons Vetur.

• vue3 portail d'outils de code en ligne sfc.vuejs.org/

2. 🎜🎜# Exécutez la commande d'initialisation et d'installation : npm init vite Pour initialiser vite, vous pouvez saisir le nom du projet, sélectionner le projet vue/react et l'environnement js/ts selection, vue3 Il est entièrement pris en charge ts. Cet article utilise js. npm install installe les dépendances. Enfin, exécutez npm run dev pour exécuter le projet.

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

Si le message d'erreur ci-dessus apparaît lors de l'exécution du processus, vous pouvez exécuter manuellement node node_modules/esbuild/install.js, puis exécuter npm run dev<h4> <strong></strong>3.</h4> Installer vue-router<p></p>Exécuter <code>npm install vue-router@4, correspondant à vue3 Les versions de vue-router et vuex sont toutes deux 4.0. Après avoir exécuté la commande pour installer, créez src/router/index.js dans le répertoire et écrivez la configuration suivante : #🎜🎜#

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 utilise #🎜🎜#rrreee#🎜🎜#vue-router4 writing méthode Il existe quelques différences par rapport au mode d'historique createWebHashHistory du mode de hachage précédent createWebHistory, veuillez consulter le site officiel pour plus de détails. #🎜🎜##🎜🎜##🎜🎜#4.#🎜🎜# Style global et installation sass (l'utilisation de @path nécessite la configuration des alias, il y a des instructions correspondantes plus tard) #🎜🎜##🎜🎜#Exécuter la commande npm i sass -D, puis créez src/styles/index.scss dans le répertoire : #🎜🎜#rrreee#🎜🎜#Introduce #🎜🎜#rrreee#🎜🎜##🎜 dans main.js 🎜 #tips:#🎜🎜# La pénétration du style dans vue3 utilise ::deep(.className) ou deep(.className)#🎜🎜##🎜🎜##🎜🎜#5.#🎜🎜# Element plus est introduit à la demande Et global import #🎜🎜##🎜🎜#Exécutez la commande npm i element3 -S pour installer si vous pouvez utiliser la plupart des composants à l'intérieur, utilisez la méthode d'importation globale, comme suit : #🎜🎜 # rrreee#🎜🎜#Si vous n'utilisez que quelques composants, vous pouvez les charger à la demande pour optimiser les performances et créer src/plugins/element3.js, comme suit#🎜🎜#rrreee#🎜🎜##🎜🎜#6. #🎜🎜 # Mise en page, créez le fichier src/layout/index.vue#🎜🎜#rrreee#🎜🎜#Concevez la mise en page en fonction de vos propres besoins Lorsque vous utilisez la mise en page, vous devez faire attention à l'utilisation de Layout.vue. comme route parent.La conception du routage est probablement la suivante：#🎜🎜#rrreee#🎜🎜##🎜🎜#7.#🎜🎜# axios request package #🎜🎜##🎜🎜#Exécuter la commande npm je axios pour installer axios#🎜🎜## 🎜🎜#Créez un nouveau src/utils/request.js et encapsulez axios dans ce fichier#🎜🎜#rrreee#🎜🎜#Afin de faciliter la gestion et la maintenance de l'API, vous pouvez créer un nouveau répertoire src/api pour chaque module ou créer chacun un fichier JS distinct pour la page. Pour donner un exemple ici, créez un fichier appelé src/api/home.js et écrivez-y le code #🎜🎜#rrreee#🎜🎜#Utilisez #🎜🎜#rrreee#🎜🎜## dans home.vue 🎜🎜# 8.#🎜🎜# Variable d'environnement liée#🎜🎜##🎜🎜#Créer trois fichiers dans le répertoire racine du projet .env.production Environnement de production .env.developmentcode> Environnement de développement .env.staging Environnement de test, ajoutez respectivement les codes suivants, dans différents environnements de compilation, exécutez automatiquement le code dans l'environnement actuel lors de l'empaquetage #🎜🎜#rrreeerrreeerrreee#🎜🎜#Utilisation : #🎜 🎜#rrreee#🎜🎜# Remplacez le mode par défaut utilisé par la commande en passant l'indicateur d'option --mode dans package.json#🎜🎜#rrreee#🎜 🎜# De cette façon, l'environnement de production est empaqueté et exécuté npm run build:prod, et l'environnement de test/pré-version est empaqueté npm run build:stage#🎜🎜# #🎜🎜##🎜🎜 #9.#🎜🎜#Configuration de l'alias dans vite#🎜🎜##🎜🎜#Ajouter du code au fichier vite.config.js dans le répertoire racine#🎜🎜#rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!