La última vez que usé andamios para construir un proyecto desde cero fue hace dos años. Simplemente sucedió que recientemente se lanzó un nuevo proyecto. Decidí reconstruir uno y resolver el proceso.
Pasos:
1. Instale el nodo: debe descargar una versión estable del sitio web oficial del nodo e instalarlo.
2. Instale andamios:
//这里是脚手架3
npm install -g @vue/cli
3. Crea un proyecto:
vue create 项目名
Luego aparecen las siguientes opciones, ahora elijo vue2 y vue3; aquí elijo vue2, la consideración principal es que vue2 es relativamente maduro, lo cual es conveniente para que otros colegas participen y mantengan.
Una vez completada la instalación, los paquetes dependientes se instalarán automáticamente y solo necesita ejecutar el proyecto.
npm run serve
Una vez instalado el proyecto, la estructura del directorio es como se muestra en la siguiente figura:
4. Modifique el ícono favicon.ico en la carpeta pública y reemplácelo con su propio ícono.
5. Instale y configure el enrutador
npm i vue-router
Cree una nueva carpeta del enrutador en la carpeta src y configure el archivo de enrutamiento.
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);
let routes = [
{
path:'/',
redirect: '/login'
},{
path:'/login',
name:'login',
component: () => import('@/view/login/index'),
meta:{
title:'登陆'
}
}
]
const router = new Router({
mode:'hash',
routes
})
export default router;
Después de la configuración, impórtelo a mai.js y móntelo en la instancia.
import router from './router';
new Vue({
router,
render: h => h(App),
}).$mount('#app')
6. Modificar App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
7. Configurar las instrucciones de empaquetado para diferentes entornos.
Este paso se debe a que ahora estamos completamente separados de los extremos frontal y posterior del proyecto. Es muy necesario abrir los paquetes en diferentes entornos de acuerdo con las instrucciones al empaquetar y conectar.
Puede consultar la configuración de las instrucciones de empaquetado de vue en diferentes entornos (vue-cli2, vue-cli3)
Después de la configuración, cree un nuevo archivo config.js en el mismo directorio de nivel de src para configurar las direcciones de servicio de diferentes entornos y luego exponerlas
let baseUrl = '';
switch (process.env.VUE_APP_TITLE) {
case 'test': //测试
baseUrl = 'xxxxxx';
break
default: //默认 - 本地开发
baseUrl = 'xxxxxx'; // 必须是 http 或者 https 开头
}
export default baseUrl;
8. Instale axios
npm i axios
Cree una carpeta axios en la carpeta src
import axios from 'axios';
const service = axios.create({
withCredentials: false,//表示跨域请求时是否需要使用凭证
timeout: 8000 //指定请求超时的毫秒数
})
//请求拦截器
service.interceptors.request.use(request => {
return request
},(error) =>{
return Promise.reject(error);
})
//响应拦截器
service.interceptors.response.use(response => {
return response;
},(error) =>{
return Promise.reject(error);
})
export default service;
Cree un nuevo archivo http.js en la carpeta axios para encapsular el método de solicitud de interfaz.
import service from './index';
import baseUrl from '../../config'
function http( method, url, params ){
method = method.toLocaleLowerCase()
/**
* post 新增
* put 修改
* get 查询
* delete 删除
* */
if(method == 'post') {
return service.post(url, params)
} else if (method == 'put'){
return service.put(url, params)
} else if (method == 'get'){
return service.get(url, {
params:params})
} else if (method == 'delete'){
return service.delete(url, {
params:params})
}
}
export {
http, baseUrl };
Luego, se puede introducir y usar directamente en la API de la interfaz.
import {
http, baseUrl } from '@/axios/http';
const loginApi = {
login(data){
return http('post', `${
baseUrl}/xxxx`, data);
}
}
export default loginApi;
9. Cree el archivo vue.config.js en el mismo nivel que el src. He desactivado el modo estricto aquí.
module.exports = {
lintOnSave: false,
productionSourceMap: false,
publicPath: './'
}
10.
No se recomienda el proyecto de configuración de Vuex para usar eventBus, el mantenimiento posterior es demasiado problemático. Vuex se usa aquí
npm i vuex --save
Cree una carpeta de la tienda en la carpeta src para configurar los atributos relacionados.
Aquí utilizo un complemento para resolver el problema de la pérdida de datos en vuex al actualizar la página, consulte el problema de la pérdida de datos en vuex al actualizar la página.
La configuración se introduce en main.js y se monta en la instancia.
import store from './store';
new Vue({
store,
render: h => h(App),
}).$mount('#app')
11. Introduzca el complemento de estilo de inicialización
npm install --save normalize.css
main.js introducido
import 'normalize.css/normalize.css';
12. La biblioteca de componentes introduce el elemento
npm i element-ui -S
Luego impórtelo globalmente en main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/css/element-variables.scss'
Vue.use(ElementUI);
13, instale sass
npm install sass-loader@10.x --save-dev
npm install node-sass@4.x --save-dev
La instalación aquí especificará la versión porque la versión superior de node-sass no se puede instalar y la versión superior de sass-loader informará un error.
14. Gestión unificada
de filtros, componentes e instrucciones Cree las carpetas de filtros, componentes y directivas en la carpeta src. Los filtros, componentes e instrucciones comunes se definen de forma centralizada en los archivos correspondientes.
De esta forma, básicamente se construye un proyecto con éxito, y el resto es el diseño estructural de las páginas del proyecto.