webapck+vue3+elemento
instalar nodo
Instalar Vue
npm instalar vue
Instalar andamios vue-cli
npm i -g @vue/cli-init
Cree una carpeta de proyecto y ejecute el script de creación.
vue create nombre del proyecto / vue init webpack nombre del proyecto
- vue create es el método de inicialización de vue-cli3.x. Actualmente, la plantilla es fija y las opciones de la plantilla se pueden configurar libremente. Se crea el proyecto vue-cli3, que es diferente de la estructura y el método de configuración del proyecto cue-cli2. Para métodos de configuración específicos, consulte la documentación oficial.
- Vue init es el método de inicialización de vue-cli2.x, puede usar algunas plantillas en github para inicializar el proyecto, y webpack es el nombre de plantilla estándar recomendado oficialmente
Seleccione manualmente la configuración de los complementos requeridos vuex, enrutador, babel, versión vue, preprocesador Css, etc
.: el proceso de creación del proyecto se ha integrado y es muy simple.
La estructura del proyecto después de la creación
ya ha incluido el enrutador disponible y los complementos vuex, no es necesario volver a introducirlos manualmente
Presentamos la interfaz de usuario de elementos
Nota: La nueva versión 3.x no es compatible con ElementUI por el momento. Puede usar element-plus
para instalarlo. También es muy simple de instalar. Ingrese al directorio raíz, luego
agregue vue element-plus
y otros son consistentes con vue2.x a continuación
1. Cree la carpeta src/styles y cree el archivo ele-variables.scss en el que controlar la fuente de color del tema del elemento, etc.
La introducción de scss es relativamente problemática o también puede usar este método: cambie el tema
/* 改变主题色变量 */
$--color-primary: #60BB69;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
2. Cree la carpeta src/utils y cree el archivo element.js en el que se introduce la lista completa de componentes, el control de elementos y el control de estilo general.
import {
Button,
Table,
TableColumn,
Select,
Option,
Input,
Message,
MessageBox,
Menu,
Submenu,
MenuItemGroup,
MenuItem,
Dropdown,
Switch,
Header,
Pagination,
DropdownMenu,
DropdownItem,
Container,
Card,
Main,
Aside,
Breadcrumb,
BreadcrumbItem,
DatePicker,
Radio,
RadioGroup,
Tag,
Dialog,
Checkbox,
CheckboxGroup,
CheckboxButton,
Tabs,
TabPane,
Upload,
Badge,
Cascader,
Carousel,
CarouselItem,
Loading,
Tooltip
} from 'element-ui';
const element = {
install : (Vue) => {
Vue.use(Button),
Vue.use(Table),
Vue.use(TableColumn),
Vue.use(Select),
Vue.use(Option),
Vue.use(Menu),
Vue.use(MenuItem),
Vue.use(MenuItemGroup),
Vue.use(Submenu),
Vue.use(Input),
Vue.use(Header);
Vue.use(Switch),
Vue.use(Pagination),
Vue.use(Main);
Vue.use(Card);
Vue.use(Dropdown),
Vue.use(DropdownMenu),
Vue.use(DropdownItem),
Vue.use(Breadcrumb),
Vue.use(BreadcrumbItem),
Vue.use(Radio),
Vue.use(Aside);
Vue.use(DatePicker),
Vue.use(RadioGroup),
Vue.use(Tag),
Vue.use(Dialog),
Vue.use(Checkbox),
Vue.use(CheckboxGroup),
Vue.use(CheckboxButton),
Vue.use(Tabs),
Vue.use(TabPane),
Vue.use(Upload),
Vue.use(Container);
Vue.use(Badge),
Vue.use(Cascader),
Vue.use(Carousel),
Vue.use(CarouselItem),
Vue.use(Loading),
Vue.use(Tooltip),
Vue.prototype.$message = Message;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
}
};
import '@styles/ele-variables.scss';
export default element;
3. No introduzca elementos directamente en el archivo de entrada main.js,
importar elemento desde './utils/element';
Introducir instalar
temas personalizados
Configurar menos
Less es relativamente claro, fácil de usar y tiene requisitos relativamente flexibles para el entorno de compilación. Teniendo en cuenta que necesita instalar Ruby para compilar Sass, y no se puede acceder al sitio web oficial de Ruby en China, prefiero elegir Menos en el desarrollo real.
menos sitio web oficial
configuración del paquete web
Los proyectos creados con scaffolding tendrán un paquete web incorporado, y se puede crear vue.config para configurar y
comprender el paquete web
y comprender el paquete web2
. . .
ver.config.js
El sitio web oficial
vue.config.js es un archivo de configuración opcional. Si este archivo existe en el directorio raíz del proyecto (similar a package.json), @vue/cli-service lo cargará automáticamente. También puede usar el campo vue en package.json, pero tenga en cuenta que esta forma de escribir requiere que siga estrictamente el formato JSON.
comprensión del servicio vue-cli
Instalado junto con vue-cli, escrito en el script package.json, después de ser ejecutado por el comando npm run
1. Obtenga las dependencias en package.json ——>
2. Inicialice los complementos relacionados (vue-cli-plugin-element- plus) — —>
3. Analice el modo utilizado por el comando (desarrollo, prueba, producción) —>
4. Cargue las variables de entorno, cargue la configuración del usuario, aplique complementos —>
5. Inicie el servicio (después de iniciar webpack-dev -servidor, en el archivo de destino No puede ver los archivos compilados en la carpeta, y todos los archivos compilados en tiempo real se guardan en la memoria)
vite+vue3+VantUI
Seleccione el directorio powershell en el disco local Use Vite para construir el proyecto Vue3TS y luego realice la inicialización de Git git init
Instale y configure varios complementos
npm i vant npm install vue-router npm install axios
Otros ajustes@Alias de ruta Se pueden resolver varios problemas, como el enrutamiento de configuración no reconocido, sin una explicación detallada. El
inicio de sesión debe tener en cuenta el cifrado md5 de la contraseña. El código de verificación para inicios de sesión múltiples especifica la redirección del acceso al enlace. Después del inicio de sesión, la sesión se guarda y se escribe el encabezado de la solicitud, etc. Consulte el proyecto gitee
para obtener un código detallado