[Tutoriel complet d'installation, de configuration et de construction de projet de l'environnement de développement front-end]

Tutoriel complet d'installation, de configuration et de construction de projets d'environnement de développement frontal

1.Installation de l'environnement de nœud

简单的说 Node.js 就是运行在服务端的 JavaScrip，基于 Chrome JavaScript 运行时建立的一个平台，Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

1. Téléchargement du site officiel de Node.js : lien de téléchargement

2. Choisissez d'installer en fonction de votre ordinateur Windows, macOS :

3. Une fois le téléchargement terminé, suivez le processus d'installation pour une installation en un clic. Ensuite, ouvrez la fenêtre de ligne de commande cmd et entrez node -vpour voir si le nœud est installé avec succès

2. Installation de l'outil de développement VsCode

VS Code是这两年非常热门的一款开发工具，它不仅有提升开发体验的界面、轻量化的编辑器，还有丰富而强大的插件，这些优秀的插件使得VS Code生态体系更加吸引人，让开发效率大大提升

1. Téléchargement du site officiel de Vscode : adresse de téléchargement

Choisissez la version correspondante à télécharger en fonction de votre système informatique
, puis installez-la en un clic

2. Vscode Plug-ins de base essentiels couramment utilisés

1.Pack de langue chinoise (simplifiée) pour Visual Studio Code.

Fonction : sinisation du compilateur

2.Prettier - Formateur de code

Fonction : formater rapidement le code

3. Balise de renommage automatique

Rôle : Renommer automatiquement les balises HTML/XML

4. Balise de fermeture automatique

Rôle : Fermer automatiquement les balises HTML/XML :

5.Historique Git

Fonction : Intégrez les outils git dans le code VS, affichez les enregistrements git, l'historique des fichiers, comparez les branches et soumettez les codes, etc.

D'autres plug-ins excellents et efficaces dans vscode peuvent être partagés dans la zone de commentaires

3. Installation de l'outil Git

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目

1. Adresse de téléchargement du site officiel de Git

Sélectionnez le téléchargement correspondant en fonction du système informatique
Installation en un clic pour les imbéciles

Après l'installation, entrez dans la fenêtre de commande cmd git --versionpour voir

2. Configuration de Git

Après l'installation, faites un clic droit n'importe où sur le bureau, cliquez sur Git bash here, et une fenêtre de commande apparaîtra

Configurer les informations utilisateur

$ git config --global user.name ""
$ git config --global user.email ""

Commandes courantes de Git

git init                                                  # 初始化本地git仓库（创建新仓库）
git status                                                # 查看当前版本状态（是否修改）
git add .                                                 # 增加当前子目录下所有更改过的文件
git commit -m 'xxx'                                       # 提交
git branch                                                # 显示本地分支
git push origin master                                    # 将当前分支push到远程master分支
git pull origin master                                    # 获取远程分支master并merge到当前分支

4. Installation d'échafaudage à ossature frontale (pile technique construction vite+vue3+ts à titre d'exemple)

vite+vue3+ts为目前最新技术栈，很有可能也是今后vue前端趋势，接下来则手把手教你学会构建一个项目

Vite construction rapide

1. Ouvrez la fenêtre de ligne de commande

2. Utilisez du npm ou du fil

npm

npm init @vitejs/app

fil

yarn create @vitejs/app

1. Entrez le nom du projet
2. choisissez la vue
3. Sélectionnez TS
4. entrer dans le projet
5. installation npm
6. Le développeur npm run ci-dessus
   
   
   a terminé la construction initiale d'un projet vue3

5. Routage intégré, Vuex, Axios (stack technique vite+vue3+ts construction à titre d'exemple)

Source de référence : Découvrez tout le processus de construction d'un projet avec vite + vue3 + ts

routage intégré

1. Installez une route prenant en charge vue3 (vue-router@4)

npm i vue-router@4

2. Créez le fichier src/router/index.ts

import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '@/views/home.vue')
  },
  {
    
     path: '/', redirect: {
    
     name: 'Home' } }
]

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

export default router

3. Montez dans le fichier main.ts

import {
    
     createApp } from 'vue'
import App from '@/App.vue'

import router from '@/router/index'

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

Intégrer Vuex

1. Installez l'outil de gestion d'état vue3 vuex@next

npm i vuex@next

2. Créez le fichier src/store/index.ts

import {
    
     createStore } from 'vuex'

const defaultState = {
    
    
  count: 0
}

// Create a new store instance.
export default createStore({
    
    
  state() {
    
    
    return defaultState
  },
  mutations: {
    
    
    increment(state: typeof defaultState) {
    
    
      state.count += 1
    }
  },
  actions: {
    
    
    increment(context) {
    
    
      context.commit('increment')
    }
  },
  getters: {
    
    
    double(state: typeof defaultState) {
    
    
      return 2 * state.count
    }
  }
})

3. Montez dans le fichier main.ts

import {
    
     createApp } from 'vue'
import App from '@/App.vue'

import router from '@/router/index'
import store from '@/store/index'

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

Outils HTTP intégrés

1. Installez Axios

npm i axios

2. Configurer Axios

Encapsuler une méthode outil, stockée dans src/utils/http.ts

import axios from 'axios'
import {
    
     Message } from 'element-plus'
// 创建axios实例
// 创建请求时可以用的配置选项

const instance = axios.create({
    
    
  withCredentials: true,
  timeout: 1000,
  baseURL: ''
})
// axios的全局配置
instance.defaults.headers.post = {
    
    
  'Content-Type': 'application/x-www-form-urlencoded'
}
instance.defaults.headers.common = {
    
    
  'Auth-Type': 'company-web',
  'X-Requested-With': 'XMLHttpRequest',
  token: 'sdfjlsdfjlsdjflsjflsfjlskd'
}

// 添加请求拦截器(post只能接受字符串类型数据)
instance.interceptors.request.use(
  (config) => {
    
    
    return config
  },
  (error) => {
    
    
    return Promise.reject(error)
  }
)

const errorHandle = (status, other) => {
    
    
  switch (status) {
    
    
    case 400:
      Message.error('信息校验失败')
      break
    case 401:
      Message.error('认证失败')
      break
    case 403:
      Message.error('token校验失败')
      break
    case 404:
      Message.error('请求的资源不存在')
      break
    default:
      Message.error(other)
      break
  }
}

// 添加响应拦截器
instance.interceptors.response.use(
  // 响应包含以下信息data,status,statusText,headers,config
  (res) => (res.status === 200 ? Promise.resolve(res) : Promise.reject(res)),
  (err) => {
    
    
    Message.error(err)
    const {
    
     response } = err
    if (response) {
    
    
      errorHandle(response.status, response.data)
      return Promise.reject(response)
    }
    Message.error('请求失败')
    return true
  }
)

export default instance

3. Introduisez le fichier http.ts là où il doit être utilisé

import Http from '@/utils/http'
export default defineComponent({
    
    
  setup() {
    
    
    const store = useStore()
    const getData = () => {
    
    
      Http.get('url').then((res: Object) => {
    
    
        console.log(res)
      })
    }
    return {
    
    
      store,
      getData
    }
  }
})

Ce qui précède représente l'ensemble du processus de configuration de l'environnement frontal et de construction du projet. S'il y a des lacunes, veuillez me corriger.