tutorial para principiantes de vite+vue3+ts
-
- 0. Presentar el proyecto
- 1. Crear [proyecto vue3]
- 2. Instalar menos/scss
- 3. Instale el enrutador
- 4. Instalar axios
- 5. Instalar pinia
- 6. Instale la biblioteca de componentes element-puls
- 7. Instale la biblioteca de componentes Ant Design Vue
- 8. Instalar md5 (seleccionar según el proyecto)
- 9. Importación automática
- 10. Configure variables de entorno y estilos de codificación estándar y cree código para el entorno de producción.
0. Presentar el proyecto
Creado a través vitede andamios y copiado por todas partes.
Marcos utilizados principalmente: ((Install less/scss, router, axios, pinia, biblioteca de componentes de elementos, biblioteca de componentes Ant Design, md5, etc.)
Para la gestión de paquetes, elija pnpm para gestionar proyectos (razones: rápido, eficiente, estricto, etc.)
Instalar pnpm
node -v //安装之前查看node版本
n stable //更新自己的node(可以选择不更新)
npm install pnpm -g //全局安装
1. Crear [proyecto vue3]
pnpm/hilo
pnpm create vite@latest //使用npu或cnpm等, 也是可以的, 根据需求选择
yarn create vite //或者使用yarn也是一种选择(后续统一pnpm)
Introduzca el nombre del proyecto
Project name: » vite-project //这样输入t3
Project name: ... t3
Elige usar un marco
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue //选择vue
React
Preact
Lit
Svelte
Others
Seleccione ts
? Select a variant: » - Use arrow-keys. Return to submit.
JavaScript
> TypeScript //选择ts
Customize with create-vue
Nuxt
En la consola, copie e ingrese lo siguiente
Done. Now run:
cd t3 //进入此文件夹
pnpm install //安装依赖安装包
pnpm run dev //启动项目
En este punto, el proyecto ha completado la inicialización básica.
2. Instalar menos/scss
pnpm add -D sass //推荐sass(只需一个即可)
pnpm add -D less //或者选择less
sitio web oficial descarado: https://www.sass.hk/
3. Instale el enrutador
pnpm install vue-router@4
4. Instalar axios
pnpm install axios
5. Instalar pinia
pinia funciona mucho mejor cuando se usa vue3+ts
pnpm install pinia //效果等于vuex
6. Instale la biblioteca de componentes element-puls
pnpm install element-plus --save
pnpm install @element-plus/icons-vue //icon图片安装
Detalles de uso de element-puls
7. Instale la biblioteca de componentes Ant Design Vue
pnpm install ant-design-vue --save
pnpm install --save @ant-design/icons-vue //icon图片安装
introducción a main.ts
//ant-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // 引入AntDesign样式文件
//element-puls
app.use(ElementPlus);
Solo úsalo directamente
8. Instalar md5 (seleccionar según el proyecto)
pnpm install md5
pnpm install --save-dev @types/md5
9. Importación automática
La instalación de estos dos paquetes puede hacer que el desarrollo de proyectos vue.js sea más eficiente e inteligente.
Se utiliza para introducir dos complementos en el proyecto Vue.js: unplugin-vue-components y unplugin-auto-import.
unplugin-vue-components Es un complemento de Vue.js que puede importar automáticamente los componentes utilizados en el proyecto bajo demanda, reduciendo el tamaño del código.
unplugin-auto-importEs un complemento de JavaScript que puede importar automáticamente los módulos utilizados en el proyecto y reducir la cantidad de código.
Detalles de uso para la importación automática
pnpm install -D unplugin-vue-components unplugin-auto-import //安装
10. Configure variables de entorno y estilos de codificación estándar y cree código para el entorno de producción.
Beneficios de configurar variables de entorno:
1. Distinguir entre entorno de desarrollo y entorno de producción. (Al configurar variables de entorno, el proyecto puede utilizar diferente información de configuración cuando se ejecuta en diferentes entornos)
2. Ocultar información confidencial. (Alguna información de configuración, como direcciones API y claves, puede contener información confidencial y no desea exponerse directamente en el código)
estilo de codificación
1. Mejorar la calidad del código (un buen estilo de codificación puede hacer que el código sea más fácil de leer y mantener, y reducir la probabilidad de errores de código)
2. Facilitar la colaboración en equipo. (El estilo de codificación estándar puede facilitar que los miembros del equipo comprendan el código de los demás)
3. Cumplir con los estándares de la industria. (Esto hará que el código sea más fácil de compartir y usar entre equipos y organizaciones)
Código de compilación para entorno de producción.
1. Optimice el rendimiento del código. (Para las aplicaciones front-end, la experiencia del usuario es muy importante)
2. Reducir el tamaño del código. (A medida que la aplicación crece y se agregan funciones, la complejidad y el tamaño del código también aumentarán)
3. Eliminar la información de depuración en el entorno de desarrollo. (Los entornos de desarrollo suelen contener mucha información y herramientas de depuración que no son necesarias en un entorno de producción)
4. Utilice nuevas funciones de JavaScript (las nuevas funciones de JavaScript pueden causar problemas de compatibilidad en entornos de producción)