创建项目
create-vue创建vue3项目
推荐,这个库也是官方进行维护的,所以使用起来无烦恼,yyds。
执行方式也是比较简单的,我们可以基于vite创建vue3或者vue2的项目
npm init vue@3
npm init vue@2
依次填写和选择下列选项
✔ Project name: … vue3-train 项目名称
✔ Add TypeScript? … Yes 是否使用ts
✔ Add JSX Support? … Yes 是否需要支持jsx
✔ Add Vue Router for Single Page Application development? … No 是否使用vue-router
✔ Add Pinia for state management? … Yes 是否使用pinia
✔ Add Vitest for Unit Testing? … No 是否使用vitest测试
✔ Add Cypress for both Unit and End-to-End testing? … No 是否使用cypress测试
✔ Add ESLint for code quality? … Yes 是否使用eslint
✔ Add Prettier for code formatting? … Yes 是否使用prettier
单文件组件
在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件,它被称为单文件组件 (也被称为 *.vue 文件,英文 Single-File Components,缩写为 SFC)。顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例:
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
参考
https://cn.vuejs.org/guide/introduction.html#api-styles
标签:文件,教程,vue,Add,Vue,组件,Yes From: https://www.cnblogs.com/beihangxuwei/p/17532752.html