Directorio de artículos
Hablar sobre
Desde que me uní a esta empresa, no he asignado ningún trabajo de front-end. En la empresa anterior, podía escribir tanto front-end como back-end. Ahora realmente no puedo hacer coincidir el código de Vue. Cuando intercambié conocimientos de front-end con amigos de front-end hace unos días, descubrí que el código de front-end en mi mente parece haber sido robado, así que rápidamente encontré un proyecto para practicar. Aunque ahora es Java, todavía quiero para hacer un full-stack en el futuro ( ▽ ) (jajaja, todavía estoy tratando de no rociar), y tengo razón sobre el código y las notas sobre los puntos de conocimiento, amigos que quieren aprender, ¡aprendan rápido! ! ! Este proyecto es bastante similar al de la empresa.
1. Antecedentes
Gestión de fondo simple, el tipo de proyecto no es importante, siempre que pueda estar familiarizado con todos los puntos técnicos del mismo.
En la empresa generalmente hay más segundas vacantes, este sistema se construyó desde cero con el fin de aprender más sobre él. Porque tengo un poco de base Vue, por lo que algunas cosas pueden simplemente omitirse, y todos los que no entiendan pueden iniciar una discusión.
dos, construye
Crear un proyecto vue
vue create vue-project
Debido a que mi versión es baja, no se puede usar el comando de creación:
Riendo, la versión que no se ha usado durante mucho tiempo no puede seguir el ritmo, así que actualicémosla por cierto,
npm uninstall -g vue-cli
npm install -g @vue/cli
Si no tiene esta pregunta, puede omitirla directamente. Creé un proyecto vue.
Introducción a la estructura del proyecto Vue
Los diversos archivos de configuración requeridos por el proyecto package.json son similares a los archivos pom en Java.
El archivo package-lock.json se genera automáticamente cuando se ejecuta la instalación de npm y se utiliza para registrar el origen específico y el número de versión de cada paquete dependiente realmente instalado en el estado actual y de qué dependencias depende este módulo. Simplemente puede entenderlo como una descripción precisa de dependencias y devDependencies en package.json.
babel.config.js Babel se usa como una herramienta de traducción para hacer que nuestro código JavaScript se ejecute normalmente en el entorno antiguo o que no admite la nueva sintaxis y API. Y este archivo se usa para la configuración de babel. Por lo general, no seremos demasiado detallados para convertir la sintaxis involucrada en el entorno de destino y configurarlos uno por uno, sino que usaremos el paquete @babel/preset-env para realizar una preconfiguración "inteligente". configuración preestablecida.
src El directorio src contiene nuestro "código fuente" real, y también es el principal campo de batalla de nuestro desarrollo, es decir, las páginas, estilos y scripts involucrados en el proyecto están todos escritos aquí.
Archivos bajo src:
main.js : el valor predeterminado es el archivo de entrada de todo el proyecto.
App.vue : Es el componente principal del proyecto y el archivo de entrada de la página.
assets : directorio de almacenamiento de recursos estáticos, que es diferente del directorio público en que este directorio se empaquetará y debe referenciarse mediante una ruta relativa.
componentes : el directorio de almacenamiento de componentes, donde los componentes públicos del proyecto se pueden almacenar para su uso en otro lugar.
público Cualquier recurso estático colocado en la carpeta pública simplemente se copiará sin pasar por webpack (la herramienta de empaquetado de la que depende vue-cli). Debe referirse a ellos por ruta absoluta.
Por lo general, solo debemos prestar atención al archivo public/index.html, que se inyectará con enlaces de recursos como JavaScript procesado y CSS durante el proceso de construcción. Al mismo tiempo, también proporciona un objetivo para montar la instancia de Vue.
Como se mencionó anteriormente, node_modules es el directorio de almacenamiento del que depende el proyecto actual.
Instale la biblioteca de la interfaz de usuario de Element
Después de crear el proyecto, ingrese el archivo, instale:
vue add element
importe según sea necesario, y también se presenta en el sitio web oficial de element:
npm install babel-plugin-component -D
esto en realidad no importa, todas las importaciones están bien.
instalar axios
npm i axios -S
instalar cadena de consulta
npm i querystring -S
Instalar normalize.css
npm i normalize.css -S
Instalar echarts
npm i echarts -S
correr
Intente ejecutarlo, npm run serve
no hay nada malo con el viejo hierro.
Eliminar componentes inútiles
helloword.vue eliminar
app.vue borra los datos de demostración, dejando un estante.
Importación de estilo css básico
base.css es un archivo nuevo, solo escribo algunos estilos:
h1,h2,h3,h4,p,ul,li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
/* 下划线 */
text-decoration: none;
}
img {
/* 垂直方向居中 */
vertical-align: middle;
}
body {
font-size: 14px;
font-family:'微软雅黑', 'Arial Narrow', Arial, sans-serif;
}
Presentar la biblioteca de iconos vectoriales de Alibaba
para probar la usabilidad de los iconos
icon-icon_baitian-taiyang
reiniciar el proyecto
ok mi sol salió, el problema no es grande.
3. Diseño de página
configurar el enrutamiento
Cuando creé el proyecto, no elegí vue-router, así que agregué:
Instale el último vue-router: npm install vue-router -S
Nota:
vue2 impulsado por vue-router3
vue3 impulsado por vue-router4
Instalé la versión incorrecta y reporté un error al principio, así que presta atención y el comando de desinstalación
Desinstale esta versión de enrutamiento incompatible y vuelva a instalar la versión correspondiente:
npm uninstall vue-router
Instale la versión 3:
npm install [email protected]
Crear una nueva carpeta enrutador
índice.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/index.vue'
import Login from '@/views/login/index.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component:Layout
},{
path:'/login',
name:'login',
component:Login
}
]
const router = new VueRouter({
mode: 'history',
//base: process.env.BASE.URL,
routes
})
export default router
main.js se agrega para
configurar la página de inicio de sesión básica y la página de diseño en la ruta:
Agregue la salida de enrutamiento a App.vue, porque el valor predeterminado es ingresar a la página de app.vue. Después de agregar la vista del enrutador, saltará a la /página de enrutamiento configurada
. Run down:
puede haber errores en el nombre del informe.
Esto se debe a que la nueva versión tiene un control más estricto de los nombres de archivo:
se puede agregar en package.json
"no-unused-vars": "off", // Cuando hay variables definidas pero no utilizadas, desactiva el error
"vue/multi-word-component-names": "off", //Si el nombre del archivo no es estandarizado, desactive el error
"vue/no-unused-components": "off" // Desactive el informe de errores cuando haya componentes sin usar definidos
repetición
Aviso:
Al configurar el enrutamiento, si el cinturón de acceso
se busca desde la ruta raíz, por lo que la lista no puede traer/product/list//
disposición
diseño en este formato
npm install -D [email protected]
Preste atención a los problemas de versión al instalar menos
Cree varias páginas nuevas en el diseño para usarlas como componentes del diseño.
diseño flexible (caja elástica)
Diseño en el índice de diseño:
<template>
<div class="layout">
<div class="menu">
<Menu></Menu>
</div>
<div class="content">
<Content></Content>
</div>
</div>
</template>
<script>
import Menu from './menu/index.vue'
import Content from './content/index.vue'
export default {
components:{
Menu,
Content
}
}
</script>
<style lang="less" scoped>
.layout{
display: flex;
.menu {
width: 200px; //左边200px
background: gainsboro;
}
.content {
flex: 1;//占满剩余
background: rebeccapurple;
}
}
</style>
El efecto presentado:
diseño fijo
<template>
<div class="layout">
<div class="menu">
<Menu></Menu>
</div>
<div class="content">
<Content></Content>
</div>
</div>
</template>
<script>
import Menu from './menu/index.vue'
import Content from './content/index.vue'
export default {
components:{
Menu,
Content
}
}
</script>
<style lang="less" scoped>
.layout{
// display: flex;
.menu {
width: 200px; //左边200px
background: gainsboro;
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
.content {
// flex: 1;//占满剩余
background: rebeccapurple;
}
}
</style>
Enrutamiento de configuración de diseño fijo
Revísalo como un todo:
De esta forma, al acceder /a la ruta, la ruta secundaria en el área de contenido solo apunta a la página home.vue:
consulte el siguiente artículo en la columna de la página de inicio para el siguiente contenido