[Tutorial completo de instalación, configuración y construcción de proyectos del entorno de desarrollo front-end]

Tutorial completo de instalación, configuración y construcción de proyectos del entorno de desarrollo front-end

1.Instalación del entorno de nodo

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

1. Descarga del sitio web oficial de Node.js: dirección de descarga

2. Elija instalar según su computadora Windows, macOS:

3. Una vez completada la descarga, siga el proceso de instalación para realizar la instalación con un solo clic. Luego abra la ventana de línea de comando cmd e ingrese node -vpara ver si el nodo se instaló correctamente

2. Instalación de la herramienta de desarrollo VsCode

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

1. Descarga del sitio web oficial de Vscode: dirección de descarga

Elija la versión correspondiente para descargar según su sistema informático
y luego instálela con un clic

2. Complementos básicos esenciales de uso común de Vscode

1.Paquete de idioma chino (simplificado) para Visual Studio Code.

Función: Sinización del compilador

2.Prettier: formateador de código

Función: formatear rápidamente el código

3. Etiqueta de cambio de nombre automático

Función: cambiar automáticamente el nombre de las etiquetas HTML/XML

4.Etiqueta de cierre automático

Función: cerrar automáticamente etiquetas HTML/XML:

5.Historia de Git

Función: integre herramientas de git en el código VS, vea registros de git, historial de archivos, compare ramas y envíe código, etc. Se

pueden compartir otros complementos excelentes y eficientes en vscode en el área de comentarios

3. Instalación de la herramienta Git

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

1. Dirección de descarga del sitio web oficial de Git

Seleccione la descarga correspondiente según el sistema informático
Instalación con un clic para tontos

Después de la instalación, ingrese en la ventana de comando cmd git --versionpara ver

2. Configuración de Git

Después de la instalación, haga clic derecho en cualquier parte del escritorio, haga clic en Git bash herey aparecerá una ventana de comando

Configurar la información del usuario

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

Comandos comunes 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. Instalación de andamios de estructura frontal (construcción de pila técnica vite+vue3+ts como ejemplo)

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

Vite construcción rápida

1. Abra la ventana de la línea de comando

2. Utilice npm o hilo

npm

npm init @vitejs/app

hilo

yarn create @vitejs/app

1. Introduzca el nombre del proyecto
2. elige vista
3. Seleccione TS
4. entrar al proyecto
5. instalación npm
6. El desarrollador de npm run anterior
   
   
   ha completado la construcción inicial de un proyecto vue3

5. Enrutamiento integrado, Vuex, Axios (construcción técnica de pila vite+vue3+ts como ejemplo)

Fuente de referencia: Experimente todo el proceso de construcción de un proyecto con vite + vue3 + ts

enrutamiento integrado

1. Instale una ruta que admita vue3 (vue-router@4)

npm i vue-router@4

2. Cree el archivo 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. Montar en el archivo main.ts

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

import router from '@/router/index'

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

Integrar Vuex

1. Instale la herramienta de administración de estado vue3 vuex@next

npm i vuex@next

2. Cree el archivo 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. Montar en el archivo 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')

Herramientas HTTP integradas

1. Instalar Axios

npm i axios

2. Configurar Axios

Encapsule un método de herramienta, almacenado en 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. Introduzca el archivo http.ts donde deba usarse.

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
    }
  }
})

Lo anterior es todo el proceso de configuración del entorno front-end y construcción del proyecto. Si hay alguna deficiencia, corríjame.