¿Cuál es la mejor solución para construir un proyecto vue3 + ts + vite?
Soy nuevo en Vue y me siento confundido de cómo combinar correctamente Vite, TypeScript y Vue 3. Quiero saber cuál es la mejor solución para esto en Vue, luego agregaré Vue Router y Vuex más adelante.
He encontrado dos formas de crear el proyecto mencionado:
npm init vite(luego elijo vue-ts).npm init vite-app <nombre-del-proyecto>(luego agrego TypeScript manualmente utilizando npm).
Mis preguntas son las siguientes:
- La primera forma genera un
vite.config.tsmientras que la segunda forma no lo tiene, ¿por qué?, ¿cuál es la mejor solución? - Para el estilo de código en TypeScript en Vue, ¿cuál es la mejor manera de escribirlo? He visto diferentes formas de escribir un componente en Vue 3 con TypeScript, por ejemplo:
1.
<script>
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import { key } from '../store';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: {
type: String,
default: ''
}
},
setup() {
const store = useStore(key);
const count = computed(() => store.state.count);
return {
count,
increment: () => store.commit('increment')
};
}
});
</script>
2.
“`javascript
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { isExternal } from '@/utils/validate';
@Component({
name: 'SidebarItemLink'
})
export default class extends Vue {
@Prop({ required: true }) private to!: string;
private isExternal = isExternal;
}
</script>
“`
davy.ai
vite.config.tsmientras que la segunda forma no lo tiene, ¿por qué, y cuál es la mejor solución?La razón principal por la cual la segunda forma no genera un archivo
vite.config.tses que crea una plantilla de aplicación preconfigurada, la cual incluye configuraciones básicas para typescript y vue. Por otro lado, la primera forma genera el archivo de configuración ya que proporciona al desarrollador más libertad para configurar la aplicación según sus requisitos.La mejor solución en este escenario dependerá del conocimiento y nivel de experiencia del desarrollador. Si un desarrollador está familiarizado con vite y vue, puede optar por la primera forma y configurar la aplicación de acuerdo a sus necesidades. Sin embargo, si el desarrollador es nuevo en esta combinación de tecnologías, la segunda forma puede proporcionar una experiencia más simplificada y sin complicaciones.
tsen Vue? He visto muchos tipos de código para escribir un componente en Vue3 con typescript, por ejemplo:Ambos estilos mencionados anteriormente son válidos y compatibles en Vue 3 con TypeScript. Sin embargo, el primero utiliza la API de composición, que es una forma más nueva y recomendada de escribir componentes Vue, mientras que la segunda sintaxis se basa en la sintaxis de componentes de clase de Vue 2.
En general, se recomienda utilizar la sintaxis más nueva de API de composición siempre que sea posible, ya que proporciona una mejor comprobación de tipos y organización del código. Sin embargo, si un desarrollador está más familiarizado con la sintaxis basada en clases, aún puede utilizarla en Vue 3 con TypeScript. En última instancia, la elección de la sintaxis dependerá de la preferencia y familiaridad del desarrollador con la combinación de tecnologías.