proyecto Vue_shop

Proyecto y el uso de la tecnología`plugin`

Este proyecto utiliza Vue-CLI andamios

Esto es mis ajustes preestablecidos de proyecto

Aquí Insertar imagen Descripción

El uso de proyecto plug-in

vue-cli-plugin-elemento
- biblioteca de interfaz de usuario elemento ui-- hambre está integrado
@ Vue / cli-plugin-enrutador
- componente de carga ruta router--
@ Ver / cli-plugin-eslint
- plugin de Código eslint-- Comprobador
- Se utiliza principalmente para revisar el formato de código
@ Ver / cli-plugin-babel
- babel-- no sabía de qué se trata!

usos de proyectos dependientes

la dependencia de desarrollo

babel-plugin-componente
babel-plugin-transform-remove-consola (console.log delete () en el momento de la construcción)
menos / less_loader

Ejecutar la dependencia

axios
echarts
elemento-ui
procesamiento de datos loadsh (copia en profundidad)
barra de carga nprogress
vue-mesa-con-árbol de la red

En primer lugar, vamos a analizar el andamiaje archivo vue-cli generada

Aquí Insertar imagen Descripción

.vscode
- Andamios no generan este archivo
- Aquí, he utilizado las herramientas de desarrollo son vscode, que está relacionada con el fichero de configuración vscode
dist
- Andamios no generan este archivo
- Después de la finalización del proyecto de desarrollo se almacena aquí, construir todos los documentos almacenados aquí
- Este es el archivo que se utiliza la versión final
node_modules
- Andamio generar este archivo
- plug-in de almacenamiento aquí, independiente de la de archivos subyacente
- Esta carpeta es nuestro volumen más grande de todo el archivo de proyecto
public
- Andamio generar este archivo
- Esta carpeta incluye html vue un tiro y proyectos taza
- archivo html es el núcleo de todo nuestro proyecto, todos los módulos serán prestados aquí
src
- Andamio generar este archivo
- Hemos desarrollado la carpeta de archivo de proyecto
.browserslistrc
- Andamio generar este archivo
.editorconfig
- Andamio generar este archivo
.eslintrc.js
- Andamio generar este archivo
- Ese es nuestro código de verificación de la configuración relevante
.gitignore
- Andamio generar este archivo
- Aquí es un archivo cuando se utiliza git, se debe utilizar
- No quiero para almacenar archivos subidos al repositorio GitHub
.prettierrc
- Andamios no generan este archivo
babel.config.js
- Andamio generar este archivo
package-lock.json
- Andamio generar este archivo
- Versión gestión de la ayuda
package.json
- Andamio generar este archivo
- Gestión de versiones
README.md
- Andamio generar este archivo
vue.config.js
- Andamios no generan este archivo

relacionados

element.js

Cuando construimos el proyecto, seleccione Importar demanda
En una declaración aquí componentes

inport Vue from 'vue'
import { Button, Message } from 'element-ui'
// import 相关的组件名称，只有import,并且使用了组件，在我们的项目中才能生效
Vue.use(Button)
Vue.prototype.$message = Message
// 给方法重命名，这样我们后面的使用会更方便

Algunos componentes de interfaz de usuario relacionada se puede introducir aquí, y luego se usa en el montaje.

main.js

La introducción de un paquete fuente específica

paquete de fuentes de Alibaba
El paquete de la fuente en el proyecto relevante
Importe el paquete de fuentes relevantes import '../src/assets/fonts/iconfont.css'
Entonces directamente en el montaje vue, uso directo del uso oficial etiqueta inmediatamente

Editor de texto enriquecido

vue-quill-editor
De acuerdo con apiimportar el paquete correspondiente a los documentos. Importación: import VueQuillEditor from 'vue-quill-editor'a continuación, importar el estilo relevante
Haciendo referencia al documento en la posición apropiada de la etiqueta <quill-editor v-model="addForm.goods_introduce"></quill-editor>
El editor de texto enriquecido para ser registrado como componentes disponibles a nivel mundial VUe.use(VueQuillEditor)

`axios`

La importación de axiospaquete.import axios from 'axios'
configuración de ruta raíz relacionada. axios.default.baseURL = 'http://根路径/'

request拦截器

axios.interceptors.request.use(config => {
	//这是为了通过token，来进行登录验证
  config.header.Authorization = window.sessionStorage.getItem('token')
    //必须在最后返回config
    return config
})

Este proceso se lleva a cabo antes de la solicitud

interceptor respuesta `

axios.interceptors.request.use(config => {
    //必须在最后返回config
    return config
})

Este es el resultado solicitud de procesamiento de retorno

El cambio de nombre Vue.prototype.$http = axios

Filtros globales

//时间过滤器
Vue.filter('dataFormat',function(originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

padStart(a,'0')Después de que el procesamiento digital es, si no dos o excede 2, con 0 llenado.
proceso de retorno es que tenemos un buen tiempo.
Date(originVal)Este es un proceso de tiempo, vamos a utilizar este último método, se puede obtener los datos que queremos.

estructura de árbol de abajo

[Imagen volcado fuera de la cadena falla, la estación de origen puede tener un mecanismo de cadena de seguridad, se recomienda guardar las fotos subidas directamente hacia abajo (IMG-MqUeaSjV-1584337386849) (C: \ Users \ Zhang Hui \ AppData \ Roaming \ Typora \ typora-user-imágenes \ imagen 20200316125926781.png)]

vue-table-with-tree-grid
El paquete de importación. import TreeTable from 'vue-table-with-tree-grid'
La inscripción está componentes disponibles globalmenteVue.component('tree-table', TreeTable)

    <tree-table
      class="treeTable" 
      :data="catelist" //绑定的数据
      :columns="columns" //列属性的定义
      :selection-type="false"
      :expand-type="false"
      show-index //展示index列
      index-text="#"
      border	//边框
      :show-row-hover="false"
    >
          
      <!-- 是否有效,作用域插槽 -->
      <template slot="isok" slot-scope="scope">
        <i
          class="el-icon-success"
          v-if="scope.row.cat_deleted === false"
          style="color:lightgreen;"
        ></i>
        <i class="el-icon-error" v-else style="color:red;"></i>
      </template>
 
      <!-- 排序 -->
      <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
        <el-tag size="mini" type="warning" v-else>三级</el-tag>
      </template>
 
      <!-- 操作 -->
      <template slot="opt" slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-edit"
          @click="showEdit(scope.row.cat_id)"
        >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="dropCateByID(scope.row.cat_id)"
        >删除</el-button>
      </template>
    </tree-table>
 
    // 为table指定列的定义
    columns: [
      {
        label: '分类名称',
        prop: 'cat_name'
      },
      {
        label: '是否有效',
        // 表示将当前列定义为模板列
        type: 'template',
        // 表示当前这一列使用模板名称
        template: 'isok'
      },
      {
        label: '排序',
        // 表示将当前列定义为模板列
        type: 'template',
        // 表示当前这一列使用模板名称
        template: 'order'
      },
      {
        label: '操作',
        // 表示将当前列定义为模板列
        type: 'template',
        // 表示当前这一列使用模板名称
        template: 'opt'
      }
    ],

Barra de carga mundial`nprogress`

Importación de js,csslata
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
A continuación, axiosla requestsolicitud de apertura del recipiente:NProgress.start()
Finalmente responsesolicitantes Cerrar:NProgress.done()

`router.js`

guardia de navegación en ruta

router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从那个路径跳转而来
  // next 是一个函数，表示放行
  //  next() 放行  next('/login') 强制跳转

  if (to.path === '/login') return next()
  // 获取 token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

guardias de navegación de ruta deben ser escritos de manera que se puede colocar directamente a través del acceso de URL

ruta de redirección

{path: '/', redirect: '/login'}

otros conocimientos

`lodash`

cloneDeep (obj) copia profunda
combinar los datos combinados

`Echarts`

Las tablas de datos, gráficos

importación: import echarts from 'echarts'

async mounted() {
  // 3. 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
  
  const { data: res } = await this.$http.get('reports/type/1')
  if (res.meta.status !== 200) {
    return this.$message.error('获取折线数据失败！')
  }
  // 4. 指定图表的配置项和数据
  const result = _.merge(res.data, this.options)
  
  // 5. 展示数据
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(result)
},

Sr. platos ...

Publicado 77 artículos originales · ganado elogios 6 · vistas 6533

carta privada preocupaciones

Proyecto y el uso de la tecnologíaplugin