Cree un proyecto vue3 + introduzca componentes del marco element-ui a pedido

Escenario : use vue create scaffolding para construir rápidamente un proyecto vue.
Requisito previo : Node.js, cnpm e hilo deben estar instalados
y cnpm debe configurarse como un espejo de Taobao. Hay muchos tutoriales de instalación de cnpm y hilo en Internet que pueden ser buscado por ti mismo

1. Utilice el comando DOS para instalar el andamio vue-cli

//这个是从镜像源下载
cnpm install -g @vue/cli 

Verifique la versión instalada (mostrar el número de versión indica que la instalación se realizó correctamente)

vue --version

2. Utilice el comando vue create para crear un proyecto vue

1. La ventana cmd salta a la carpeta donde se debe crear un nuevo proyecto y usa vue create.

//vuetest是我的项目名
vue create vue-element-plus

2. Aquí elijo la tercera operación de opción personalizada Seleccionar características manualmente y presiono Enter (en cuanto a la primera y segunda opción, puede crear rápidamente un proyecto con eslint y babel)

3. Seleccione el elemento de configuración
aquí, elijo Babel, TypeScript, Router , Vuex, Linter/Formatter tres opciones (moviendo 键盘上下键, use 空格键check), luego presione Enter

>( ) Babel                              //  代码编译
 ( ) TypeScript                         //  ts
 ( ) Progressive Web App (PWA) Support  //  支持渐进式网页应用程序
 ( ) Router                             //  vue路由
 ( ) Vuex                               //  状态管理模式
 ( ) CSS Pre-processors                 //  css预处理
 ( ) Linter / Formatter                 //  代码风格、格式校验
 ( ) Unit Testing                       //  单元测试
 ( ) E2E Testing                        //  端对端测试

4. Seleccione la versión de vue.
Aquí selecciono el primer 3.X y luego presiono Enter.

5. Seleccione un componente de estilo de clase
e ingrese N aquí

para comparar la diferencia entre y y N. La captura de pantalla es la siguiente y
seleccione NORTE:

Seleccione Y:

6. Seleccione Usar Babel junto con TypeScript e
ingrese Y aquí

7. Seleccione el modo de enrutador
vue-router se divide en dos modos

historial de hash

**hash：**
特征：
1.hash会在浏览器路径里带#号，比如http://locahost:8080/#/index
2.hash在浏览器改变路径触发页面跳转，即前进后退，但不会重新加载页面。
3.hash传参是基于url，如果要传递复杂的参数会有体积的限制


**history**
特征：
1.可以在url放参数，而且也可以将数据存放在一个特定的对象中，其利用HTML5 History inteface中新增的pushState()和replaceState()方法（限制：history只支持IE8以上）

2.需要后台配置支持,前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.test.com/user/id 如果后端缺少对 /user/id 的路由处理，将返回 404 错误。

Aquí uso el modo histórico de enrutamiento del enrutador, ingreso Y y luego presiono Enter (si usa hash, ingrese n) 8.

Verificación de errores de sintaxis
del código Elijo ESLint + Configuración estándar aquí , esto es estándar, y luego presiono Enter

9. Seleccione el momento para verificar la sintaxis del código.
Aquí selecciono el primer Lint al guardar y luego presiono Enter.

10. La forma en que existen los archivos de configuración de terceros.
Aquí selecciono el primero En archivos de configuración dedicados y presiono Enter.

11. Ya sea para guardar este tiempo Configurado como una plantilla de proyecto preestablecida,
elijo N aquí (también puede elegir Y, para que pueda usar directamente este esquema de configuración para construir rápidamente el proyecto la próxima vez), y luego presiono Enter, el proyecto es construido exitosamente

12. Ejemplo de compilación exitosa

13. Abra el proyecto e instale las dependencias
Ingrese el siguiente código en la terminal para instalar el paquete de dependencias

yarn install

14. Inicie el proyecto
Ingrese el siguiente código en la terminal, luego presione Enter para iniciar el proyecto

yarn serve

poner en vista previa del navegador

15. Instale el marco elementUI
Ingrese la siguiente instalación en la consola del terminal

yarn add element-plus

16. Importe componentes elementUI según sea necesario.
Cree un nuevo archivo element.ts en la carpeta src\core, el código es el siguiente

import {
    
    
    ElConfigProvider,
  ElAlert,
  ElAside,
  ElAutocomplete,
  // ElAvatar,
  // ElBacktop,
  // ElBadge,
  // ElBreadcrumb,
  // ElBreadcrumbItem,
  // ElButtonGroup,
  // ElCalendar,
  ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  // ElCollapse,
  // ElCollapseItem,
  // ElCollapseTransition,
  // ElColorPicker,
  ElContainer,
  // ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  // ElFooter,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElInputNumber,
  ElImage,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  ElOptionGroup,
  // ElPageHeader,
  ElPagination,
  // ElPopconfirm,
  ElPopover,
  // ElPopper,
  // ElProgress,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  // ElRate,
  ElCol,
  ElRow,
  // ElScrollbar,
  ElLink,
  // ElSlider,
  // ElStep,
  // ElSteps,
  ElSubMenu,
  ElSwitch,
  ElTabPane,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElTag,
  // ElTimePicker,
  // ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  ElTooltip,
  ElTransfer,
  ElTree,
  ElUpload,
  // ElInfiniteScroll,
  // ElLoading,
  // ElMessage,
  // ElMessageBox,
  // ElNotification,
  ElColorPicker,
  ElDatePicker,
  ElDescriptions,
  ElDescriptionsItem,
  ElEmpty,
} from 'element-plus'
const components = [
    ElConfigProvider,
    ElRadio,
    ElRadioButton,
    ElRadioGroup,
    ElCheckbox,
    ElCheckboxButton,
    ElCheckboxGroup,
    ElLink,
    ElCard,
    ElForm,
    ElFormItem,
    ElHeader,
    ElIcon,
    ElInputNumber,
    ElAside,
    ElContainer,
    ElMain,
    ElMenu,
    ElMenuItem,
    ElMenuItemGroup,
    ElSubMenu,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElTabPane,
    ElTabs,
    ElTable,
    ElTableColumn,
    ElPagination,
    ElTag,
    ElDialog,
    ElTree,
    ElOption,
    ElOptionGroup,
    ElCol,
    ElRow,
    ElColorPicker,
    ElDatePicker,
    ElSwitch,
    ElPopover,
    ElImage,
    ElDescriptions,
    ElDescriptionsItem,
    ElDivider,
    ElDrawer,
    ElTooltip,
    ElTransfer,
    ElUpload,
    ElAlert,
    ElEmpty,
    ElAutocomplete,
  ],
  options = {
    
     size: 'small', zIndex: 3000 }
//  eslint-disable-next-line
const install = function ins(app: any): void {
    
    
  // if (install.installed) { return }
  for (let i = 0; i < components.length; i++) {
    
    
    app.component(components[i].name, components[i])
  }
  app.config.globalProperties.$ELEMENT = options
}

const API = {
    
    
  install,
}
export default Object.assign(API, components)

En el código del archivo main.ts agregue lo siguiente

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from '@/core/element'
import 'element-plus/theme-chalk/index.css'



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

17. Utilice el componente para obtener una vista previa
del archivo App.vue, el código es el siguiente

<template>
  <ElConfigProvider :locale="locale">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view /> -->
    <el-table :data="list" border style="width: 66%" class="tableel12">
      <el-table-column prop="tradeId" label="序号" width="180" />
      <el-table-column prop="stockHolderId" label="股民id" width="180" />
      <el-table-column prop="bankCardId" label="卡号" />
      <el-table-column prop="addedMoney" label="交易金额" />
      <el-table-column prop="state" label="状态" />
      <el-table-column prop="type" label="操作股票方式" />
      <el-table-column label="重传">
        <template #default="scope">
          <el-button type="primary" @click="update2(scope.row.tradeId, scope.row.state)">重传</el-button>
          <!-- <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </ElConfigProvider>
</template>
<script >
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import {
    
     ref } from 'vue'
export default {
    
    
  setup() {
    
    
    const locale=ref(zhLocale)
     return {
    
    
       locale,
     }
  },
 
}
</script>


<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
    
    
  padding: 30px;
}

nav a {
    
    
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
    
    
  color: #42b983;
}
</style>

Las representaciones son las siguientes:

punto importante:

1. Mi versión de npm es 8.5.0, la versión de nodo es 16.14.2, la versión de hilo es 1.22.18, la
versión de vue-cli es 5.0.8, la versión de cnpm es 8.2.0

2. Sitio web oficial de elementUI: https://element -plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

3. Envíe el código al almacén de gitee: https://gitee.com/henrryhu/vue-element-plus